Displaying Calendar Widgets on Your Own Website
- Using RSS or iCal Feeds on Your Own Website
- Customizing Your Calendar Widgets Using CSS
- Sample Calendar Page
- Get More Help
You can embed "widgets" into any web page, either the Month view, the Full Calendar view, the "Today" list view, or the "Upcoming Events" list view.
Experienced developers could use their favorite web programming language to parse calendar RSS or iCal feeds. But the widget method even works for those with little scripting experience, or whose websites have limitations on scripting.
The widgets can display departmental calendars as well as the main calendar. Our new sample calendar page shows what your calendar could look like. The demo page begins with sample links to cultural events searches, followed by an example of a month view, full calendar view, upcoming events view, and today's events view.
1. Required Javascript
To embed the calendar, first paste the following Javascript codes into the head of the page where you want the widget.
2. Additional Page Styles
To make your embedded calendar flow nicely within the page, include the appropriate codes in the head of your page:
For the Month View
<link rel="stylesheet" type="text/css" media="screen" href="http://calendar.tamu.edu/templates/aggieland/monthwidget/monthWidget.css" />
For the Full Calendar View
<link rel="stylesheet" type="text/css" media="screen" href="http://calendar.tamu.edu/templates/aggieland/monthwidget/fullCal.css" />
For Today View and Upcoming Events View
To Display Titles without Descriptions or Locations
div.eventDescription,span.location {
display: none;
}
</style>
Changing the Color of Your Calendar Widgets
Download and edit our customizable stylesheet to match your site's design. Our sample calendar page shows what your calendar could look like. You can view and copy the source code as an example for your calendar. The sample page begins with demo links to cultural events searches, followed by an example of a month view, full calendar view, upcoming events view, and today's events view.
3. Javascript Widgets
Next, paste one of the following Javascript codes into the body of the page where you want the widget to appear.
Month View
<script type="text/javascript">
UNLevent_monthWidget.init('http://calendar.tamu.edu/');
</script>
</div>
Full Calendar View
<script type="text/javascript">
//<![CDATA[
var currentDate = new Date()
var month = currentDate.getMonth() + 1
var year = currentDate.getFullYear()
var my_calurl = "http://calendar.tamu.edu/?&y=" + year + "&m=" + month + "&format=xml";
fetchURLInto(my_calurl, 'fullCal', 'Error loading data.');
//]]>
</script>
</div>
Event View for Today
<script type="text/javascript">
//<![CDATA[
var my_calurl = "http://calendar.tamu.edu/?format=hcalendar";
fetchURLInto(my_calurl, 'todayEvents', 'Error loading data.');
//]]>
</script>
</div>
Upcoming Events View
<script type="text/javascript">
//<![CDATA[
var my_calurl = "http://calendar.tamu.edu/?upcoming=upcoming&format=hcalendar";
fetchURLInto(my_calurl, 'upcomingEvents', 'Error loading data.');
//]]>
</script>
</div>
Note that the highlighted sections in the samples above are generic in nature. You should change them to the
specific URL that you want displayed, such as "http://calendar.tamu.edu/engineering/". If you want to display only three upcoming events instead of the default, add the "limit" parameter, as in http://calendar.tamu.edu/engineering/?&upcoming=upcoming&limit=3.
Though you can use these widgets to display departmental calendars URLs, search URLs don't work the same way. That is, in these codes, you can replace "http://calendar.tamu.edu/" with "http://calendar.tamu.edu/engineering/" but not with "http://calendar.tamu.edu/?q=Lectures&search=search". Searches work fine as the targets of links, of course. Test the URL in your browser first.
