Extracting Data From The Calendar

From Web Developer Network Wiki
Jump to: navigation, search

Contents

2009 Templates Events Setup

The 2009 Templates are built with ability to quickly add a small snippet to the body of your page to get either of the following event listings. They work by adding the following link to the head of the document:

<link rel="events" href="http://events.unl.edu/wdn/" title="WDN" />

Modify the URL to point to your calendar. To edit the link text below the Upcoming Events header, ex: "See all Wellness events" whatever you list in the title="Wellness" attribute will be what displays for the type of events in the link text.

If using HTML5, be aware that the link above is technically not valid HTML5 because the rel="events" is not on the list of approved relations. To work around this, the 3.1 version of the templates include a function to call to properly setup the calendar URL.

Displaying a Month Widget on a UNL Web Page

UNL Events Month Widget.png

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:

<div id="monthwidget">
    <script type="text/javascript">
    WDN.initializePlugin('monthwidget');
    </script>
</div>

If you are using HTML5, the following is a workaround alternative to using the link element in the head.

<div id="monthwidget">
    <script type="text/javascript">
    WDN.setPluginParam('events', 'href', 'http://events.unl.edu/wdn/')
    WDN.initializePlugin('monthwidget');
    </script>
</div>

Displaying A List of Upcoming Events

Template Styling for Upcoming Events List:

UpcomingEventsList TemplateStyle-thumb.png

The image above is an example of the Upcoming Events styling which is in the templates when you include the following code.

To control the number of events displayed on the page you can edit the number in code that looks like this [ {WDN.events.limit=# of events; ]

<div class="one_col left">
    <div id="wdn_calendarDisplay"></div>
</div>
<script type="text/javascript">WDN.initializePlugin('events', function(){WDN.events.limit=5;}, 'before');</script>

If you are using HTML5, the following is a workaround alternative to using the link element in the head.

<div class="one_col left">
    <div id="wdn_calendarDisplay"></div>
</div>
<script type="text/javascript">
WDN.setPluginParam('events', 'href', 'http://events.unl.edu/wdn/');
WDN.setPluginParam('events', 'title', 'Web Developer Network'); //optional
WDN.setPluginParam('events', 'limit', 5); //optional
WDN.initializePlugin('events');
</script>

Customizable Styling for Upcoming Events List

UNL Events Upcoming List.png

For an upcoming events list use a URI similar to: http://events.unl.edu/training/upcoming/?format=hcalendar

Please Note: the following code has not been updated for the 2009 templates. While it will still work, the CSS mentioned is only distributed with the previous, 2006 templates.

<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 increase the number of events displayed you can add &limit=30 parameter to the end of the url to increase or decrease the number of events (10 is the default).

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" />

Training Calendar

   Loading calendar data.

<script type="text/javascript">

   //<![CDATA[

var my_calurl = "http://events.unl.edu/training/upcoming/?format=hcalendar"; fetchURLInto(my_calurl, 'upcoming', 'Error loading data.');

   //]]>

</script> </pre> </code>

This extracted data can be styled in a variety of ways using CSS. To increase the number of events displayed you can add &limit=30 parameter to the end of the url to increase or decrease the number of events (10 is the default).

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" />

Training Calendar

   Loading calendar data.

<script type="text/javascript">

   //<![CDATA[

var my_calurl = "http://events.unl.edu/training/upcoming/?format=hcalendar"; fetchURLInto(my_calurl, 'upcoming', 'Error loading data.');

   //]]>

</script> </pre> </code>

This extracted data can be styled in a variety of ways using CSS. To increase the number of events displayed you can add &limit=30 parameter to the end of the url to increase or decrease the number of events (10 is the default).

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" />
Personal tools
Namespaces

Variants
Actions
Navigation
Toolbox