 |
|
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/mm_widget/widget_mm.css" media="all"></link>
<script language="Javascript" src="http://www.happyjacksoftware.com/downloads/widgets/mm_widget/events_api.js"></script>
<script language="Javascript" src="http://www.happyjacksoftware.com/downloads/widgets/mm_widget/widget_mm.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 divs that
will host the
widget. Then set the time column on or off by setting
the "timeColumnP" 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 CalibrateMonthWidget ("schedule", // ID of div to hold month
"details", // ID of div to hold details
null // ID of div to hold debug info
);
w.setTimeColumnP (false);
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 id="widget" style="width:200px; float: right;">
<div id="schedule">
</div>
<div id="details">
Downloading calendar events from <a href="http://www.happyjacksoftware.com">CALibrate Groups</a>...
</div>
</div>
<div style="clear: both"></div>
|
