I 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.
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.
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.
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.