FullCalendar: An Excellent jQuery Calendar Plug-in

One of our goals with Webvanta is to provide designers with the best in open-source technology, without exposing them to all of its hassles.

We do this with our core platform by building upon Ruby on Rails and lots of other great open-source components (see our Technology Stack page), and also by setting up the starter site you get when you sign up for an account with jQuery and an assortment of jQuery plugins.

This post is the first in a series giving thanks to the open-source software we're using. One of the things that makes jQuery so valuable is the broad range of plugins that developers have built. It can be challenging picking high-quality plugins, but we've done that for you. In addition to blogging about each of them, we're making a modest cash donation to each of the developers to thank them for their efforts.

FullCalendar is a Great Calendar

For our calendar feature, we've chosen Adam Shaw's FullCalendar. You can see examples of its use on Webvanta sites at the Post Carbon Institute and Sebastopol Community Cultural Center sites.

Integrating this calendar with the Webvanta system was just a matter of writing the initialization code to get the events from Webvanta's events database:

  $('#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>
    ]
  });

Our purpose in this blog post is not to give a tutorial on the code, but only to point out that the integration is easy. The code above sets up the events array used to initialize the calendar by looping through all of the events in the database, and setting each of FullCalendar's parameters appropriately. You can easily change this code to pull events from a custom item type, if you'd prefer.

There's a lot more you can do with FullCalendar, including pulling from a Google calendar or other sources. And it's all styled with CSS, so you can make it look just how you want. It has excellent documentation and is frequently updated — things we always look for when checking out open-source software.

Whether you are using Webvanta or not, if you need to display a calendar, check out FullCalendar.