FullCalendar and CakePHP part 1 – Set Up

By
Duck Ranger
 – March 11, 2010Posted in: CakePHP, jQuery

FullCalendar pictureI needed to integrate a calendar into my application.

This being a CakePHP application, I started looking for a good calendar helper – but found none that I liked enough to integrate. Luckily, I then stumbled upon the excellent fullCalendar project which is everything I wanted:

  • Extensible – let me change events easily.
  • Provides lazy loading of events.
  • Provides for visual differentiation of events based on their type.
  • Uses multiple displays (daily, weekly, monthly).
  • Lets me, as the developer, store events that are not editable by the user (e.g. Easter dates).

Integration with Cake was relatively straight forward, and I found this series that helped me get started.

FullCalendar is a jQuery plugin. To use it, you’ll need jQuery library itself and a few jQuery plugins. You don’t need to go and find them all over the Internet – they are all bundled with the fullCalendar download.
To set up your cake with fullCalendar you’ll first need to download and unzip fullCalendar’s download package to cake’s /app/webroot/js folder.

Then you’ll want to hook up fullCalendar’s css and javascript files to your page. It’s pretty straightforward actually. You may use the Javascript helper or add the script tags to the view file yourself.

To use the Javascript helper, add it to the $helpers array in your controller (my calendar controller is just called events_controller):

class EventsController extends BaseController  {
    var $name = 'Events';
    var $helpers = array('Admin','Time','Javascript');
}

Then link the relevant javascript files in your view. I just add them to the relevant *.ctp file (calendar.ctp in my case) – but you may add them to the layout itself if you want.

<!-- calendar.ctp -->

<?php

    echo $javascript->link('jquery-1.3.2.min.js');
    echo $javascript->link('ui.core.js');
    echo $javascript->link('ui.resizable.js');
    echo $javascript->link('fullcalendar.min.js');
    echo $javascript->link('ui.draggable.js');
    echo $html->css('fullcalendar');
    //Note: to use $html->css as above, the fullcalendar.css
    //file must be in your app/webroot/css folder.
?>

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

The “calendar” div above is the where the fullCalendar will actually be created once you call the fullCalendar function in your document.ready function

3. To display the calendar, you need to call its init method – fullCalendar.

<script type='text/javascript'>

    $(document).ready(function() {
        $('#calendar').fullCalendar({});
    });

</script>

The code above will display the calendar with its default configuration. It will have no events, because none are defined.
If you did everything right you should see something like the screenshot below. This means that you managed to hook up fullCalendar and CakePHP.

calendar screenshot

Calendar screenshot

And that’s it for integration.

The next post in this series describes how to hook up a database table as an events source for this integration.

The fullCalendar and CakePHP Series:

  1. Part 1: Set up
  2. Part 2: Creating an event source
  3. Part 3: Adding events
  4. Part 4: Editing events
  5. Part 5: Dragging and resizing

Popularity: 87% [?]

Tags:

About the Author