Extracting Data From The Calendar
[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. For example, adding the following code to your local CSS file will result in a styled data feed that largely mimics the way items are displayed in the UNL Events system (see http://ucommdev.unl.edu/archweb/ as an example).
<style type="text/css">
/*calendar feed formatting*/
#maincontent table.upcoming {border-collapse:collapse;}
#maincontent table.upcoming td {padding:4px;}
#maincontent td.date {vertical-align:top;}
#maincontent .dtstart {font-size:80%;}
#maincontent .dtstart:after {display:none;}
#maincontent .upcoming thead th {border-bottom:1px solid; border-bottom-color:#a1a1a1;}
#maincontent .location {font-size:80%;color:green; display:block;}
#maincontent table .alt {background-color:#fafafa;}
#maincontent table tbody tr:hover {background-color:#FFFDE2;}
#maincontent tbody .description {font-style:italic;}
#maincontent thead .title {font-style:normal;}
#maincontent .alt td {border-top:1px dashed; border-top-color:#a1a1a1;}
#feeds {display:none}
</style>
