[edit] Displaying a Month Widget on a UNL Web Page
As an alternative to linking to your events.unl.edu calendar page, you can query the database and display calendar events within one of your existing pages as a widget or list.
Here is a simple example which will pull a small month widget:
<h2 class="sec_main">Training Calendar</h2>
<div id="monthwidget">
<script type="text/javascript">
//<![CDATA[
UNLevent_monthWidget.init('http://events.unl.edu/training/'); //Change the URL
//]]>
</script>
</div>
Modify the URL to point to your calendar: http://events.unl.edu/training/
In the head of the document, place this code:
<link rel="stylesheet" type="text/css" media="screen" href="/ucomm/templatedependents/templatecss/components/monthwidget.css" />
<script type="text/javascript" src="/ucomm/templatedependents/templatesharedcode/scripts/UNLevent_monthWidget.js"></script>
Note: This script involves mouseover layers that display daily schedules. The default is for these layers to float to the right of the selected day. At times, it is ideal to float the dates to the left of the selected day. In order to do this, you must include CSS overrides. Add the following line of code after the monthwidget.css link:
<link rel="stylesheet" type="text/css" media="screen" href="http://nse.unl.edu/sharedcode/css/monthwidgetRight.css"/>
[edit] Displaying A List of Upcoming Events
For an upcoming events list use a URI similar to: http://events.unl.edu/training/upcoming/?format=hcalendar
<h2 class="sec_main">Training Calendar</h2>
<div id="upcoming">
Loading calendar data.
</div>
<script type="text/javascript">
//<![CDATA[
var my_calurl = "http://events.unl.edu/training/upcoming/?format=hcalendar";
fetchURLInto(my_calurl, 'upcoming', 'Error loading data.');
//]]>
</script>
This extracted data can be styled in a variety of ways using CSS.
To style the events in the same format as on the UNL calendar, you can link directly to this CSS file.
<link rel="stylesheet" type="text/css" href="/ucomm/templatedependents/templatecss/components/upcomingevents.css" />
