Creating an Event Calendar

It's easy to create sophisticated event calendars with Webvanta.

One approach, which we've used for our "stock" event calendar, is as follows:

• Events are stored in the database, as part of the standard knowledgebase system.
• Some JavaScript and WebvantaScript code sets up the calendar data, using the information from the knowledgebase.
• A standard jQuery plugin, called FullCalendar, displays the calendar based on this information.

FullCalendar, written by Adam Shaw, has a lot of capabilities beyond those that we use in our example, and it can be extensively customized. See the documentation on the project's site for details.

You could also use other HTML/CSS/JS calendars, following the general approach outlined here.

Calendar HTML

The HTML for the calendar is simple in the extreme:

<div id="calendar"></div>

That is, it is nothing but an empty div element, into which the FullCalendar JavaScript code places the calendar display. If you view the generated source on the calendar page, you'll see a big, complex table in this div that the calendar JavaScript code created.

You can insert other HTML content before or after the div as you choose. You can place this div inside a container of any width, and the calendar will be sized to that width.

Calendar JavaScript

All the action happens in the JavaScript code. First, you need to load the FullCalendar code, which is available from the Webvanta file library:

<script src="/webvanta/js/jquery/1.3/plugins/fullcalendar/1.4.3/fullcalendar.min.js" type="text/javascript"></script>

The FullCalendar code does all the real work of creating the calendar. Our code just invokes fullCalendar on the calendar div, setting the initialization parameters for the calendar code and creating an array of events:

$('#calendar').fullCalendar({
   editable: false,      
   header: {
     left: 'prev,next today',
     center: ' title',
     right: 'month,basicWeek'
   },
   timeFormat: "",
   events: [
     <w:kb:item:each type="events">
       {
         id: "<w:id />",
         title: $('<textarea/>').html("<w:escape_html><w:name /></w:escape_html>").val(),
         start: "<w:get name="event:start_date" format="%Y-%m-%d" />",
         end: "<w:get name="event:end_date" format="%Y-%m-%d" />",
         url: "<w:path url='/calendar/event' />",
         allDay: false
       }<w:unless_last>, </w:unless_last>
     </w:kb:item:each>
   ]
 });

The first half-dozen lines set up configuration options, after which the events array is created. The WebvantaScript is executed on the server, before the JavaScript reaches the browser, so when the JavaScript is executed the WebvantaScript has been expanded out into an array with all of the event information.

The messy bit of code that sets the title value is just manipulating the encoding of the <w:name> value so that if it includes any single or double quotes, it won't break the JavaScript.

Calendar CSS

You can control the styling of the calendar via CSS. The basic styles are in the file calendar.css, which you can access via Structure > CSS Files.

There's details about customizing the event colors and using jQuery UI themes in the FullCalendar documentation.

Filtering the Calendar

Since the list of calendar items is generated with a standard WebvantaScript <w:kb:item:each> statement, you can use any of the available criteria to filter the results. You can also use Webvanta's category system to sort events into categories. By setting the calendar page to be a category page, you can can add category="current" to the iterator and get only the items in the specified category.