|
|
 |
|
Include the CSS and JavaScript files for the widget
The CSS file can be local, so you can customize it.
The JavaScript files should be remote to so you
can always have the latest version.
|
| |
|
<link type="text/css" rel="stylesheet" href="http://www.happyjacksoftware.com/downloads/widgets/ue_widget/widget_ue.css" media="all"></link>
<script language="Javascript" src="http://www.happyjacksoftware.com/downloads/widgets/ue_widget/events_api.js"></script>
<script language="Javascript" src="http://www.happyjacksoftware.com/downloads/widgets/ue_widget/widget_ue.js"></script>
|
|
|
 |
|
Create a JavaScript function that will invoke the CALibrate API
This function creates the widget. Give it the names of the calendars you want information
from and
give it the IDs of the div that
will host the widget. Set the time column on or off by setting the
"timeColumnP" property. Set the Heading by
setting "Heading" property. Set the number of events to
put on the page with the "PageSize" property.
Finally, ask the
widget to get data from CALibrate.
|
| |
|
<script language="Javascript">
function get_my_events() {
cals = new Array ("C/UWCS/Julija Zommere/UW Computer Science",
"C/UWCS/Ruben Gamboa/Personal",
"C/UWCS/Ruben Gamboa/UWyo",
"C/Ruben Gamboa/MyAppointments",
"C/UWCS/Paula Sircin/2006-07 Academic Year Calendar");
var w = new CalibrateListWidget ("schedule", // ID of div to hold data
null // ID of div to hold debug info
);
w.setHeading ("Upcoming Events");
w.setTimeColumnP (true);
w.setPageSize (10);
w.getEventsFromCalibrate (null, // username
null, // password
null, // timezone
cals);
}
</script>
|
|
|
 |
|
Call your JavaScript function
From the onLoad method of the body tag, call your JavaScript function
|
| |
|
<body onLoad="get_my_events()">
|
|
|
 |
|
Place the divs on your web page.
Place the divs for your widget where you want them on the HTML page. You can use
CSS to style the
divs, e.g. to specify the size. Make sure that the name of ids are the same as in Step2!
|
| |
|
<div style="width: 500px" id="widget">
<div id="schedule">
<table width="95%">
<tr class="cal_event_heading">
<th colspan="2">Upcoming Events</th>
</tr>
<tr>
<td colspan="2">Downloading calendar events from <a href="http://www.happyjacksoftware.com">CALibrate Groups</a>...</td>
</tr>
</table>
</div>
</div>
|
