Build a Kick-Ass Calendar with ExpressionEngine & jQuery

It's actually surprisingly simple to create a really awesome calendar in ExpressionEngine 2 if you have about 15 minutes and $79.95 to spare for the amazing Calendar module from Solspace. For the most part, it's almost a no-brainer but there's a few small tweaks you'll want to make. So here goes...

Things you'll need to download:

jQuery FullCalendar from Adam Shaw
Calendar Module from Solspace ($79.99)

Step 1:
Purchase and install the Calendar module from Solspace. Installation instructions can be found here.

Step 2:
Once you've got the the Calendar module installed and configured, create the template where the calendar will live.

Step 3:
Make sure you've got jQuery, and hook up the FullCalendar plugin. The full instructions are here, but you basically want to include this in the head of your document once you've got the FullCalendar files on your server:

<link rel='stylesheet' type='text/css' href='/css/fullcalendar.css' />
<script type='text/javascript' src='/js/jquery.js'></script>
<script type='text/javascript' src='/js/fullcalendar.js'></script> 

Step 4:
Now that we've got the FullCalendar plugin files all linked up, it's time to make the magic happen. What we're basically going to do is run the Calendar "occurances" loop inside the javascript tags. So for each event entry that you create, a new entry will be dynamically created in the calendar. Here is the full template code (and yes, this works for repeating events as well as the day, month and week views):

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

<script type='text/javascript'>  
$(document).ready(function() {
  header: {
   left: 'prev,next today',
   center: 'title',
   right: 'month,agendaWeek,agendaDay'
  editable: false,
  events: [ {}
   {exp:calendar:events  sort="asc" dynamic="off"}
     title: '{event_title}',
     url: '{url_title_path="events/detail"}',
     start: new Date({occurrence_start_date format="%Y,%n-1,%j"}),
     end:  new Date({occurrence_end_date format="%Y,%n-1,%j"}),
     allDay: false       

Since this will be a calendar for users visiting the site, we've disabled the ability to drag and drop items in the calendar by setting editable: false; We also want to include, Previous, Next and Today buttons as well as the ability for users to choose from "Day View", "Month View", and "Week View".... so we'll include:

header: {
   left: 'prev,next today',
   center: 'title',
   right: 'month,basicWeek,basicDay'

Now, there's a 2 important things to mention.

1. IE hates the trailing comma when dealing with dynamically created javascript arguments. So to get around this, I've added "{}" right before {exp:calendar:events} loop so that there never has to be a trailing comma after the last event entry.

2. ExpressionEngine uses PHP to render date variables and counts months starting at "1" and not "0". January (for example) is always referred to as either "1" or "01". Makes sense right, since January is the 1st month of the year... But in javascript, January is referred to as month "0", February as "1", etc, etc. To get around this, I used %n-1 as the month variable.

Step 5:
That's it, you're done! Pretty easy right? For addtional info on setting up more advanced FullCalendar functionality, make sure to visit Adam Shaw's site...Also, big ups to @vladikoff for helping fix the javascript and date variable issues.

Haven't really got too deep into testing this yet, so let me know if you notice any issues or better ways of implementing.

blog comments powered by Disqus