FullCalendar and CakePHP part 1 – Set Up

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.

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

67 thoughts on “FullCalendar and CakePHP part 1 – Set Up

  1. Duck Ranger Post author

    @Marek – I don’t know of live examples you can see. I am using Cake 1.3.6 and Fullcalendar in some projects, but they are not public.
    As for the unexpected T_STRING – this is a php error. How did you conclude that these are the lines?
    Usually with unexpected T_STRING it has to do with some php parsing – either there’s an un-closed quote somewhere, or your last line
    in the file does not contain a ?> , or you have an empty last line, etc etc.

  2. marek

    Hi, Duck
    Thank you for your help. There was my mistake as pointing to the /events/feed should be in my case /myapp/events/feed. Now I can go further with your tutorial. Thank you very much for your time and help.
    Marek

  3. Philip

    Look tried everything. Very new to cakephp. Is there any zipped file of this tuturial in its entirety. Really need help here.

  4. paskuale

    Great article, thanks to your article I realized the same thing but with another framework, I don’t know if I can quote it, I don’t want to spam.

  5. Pingback: FullCalendar + CakePHP (1) | Think deeply, Do less, More effective

  6. Sean

    Hi Duck, I’m pretty new to CakePHP and now trying to setup the calendar using jquery fullcalendar plugin.

    Firstly, I have created events and event_types tables by importing full_calendar.sql with following the link;
    http://bakery.cakephp.org/articles/silasmontgomery/2011/03/02/cakephp_full_calendar_plugin_2

    it says just follow simple 3 steps, but i can’t see the calendar. (i assume the instruction in the link on bakery and your post are different?)

    so I want to follow your post.

    I can see your explanation is quite clear, but I’m bit confused in creating tables.

    should I create calendar table too? because your explanation says add some command into calendar.ctp ?

    thank you so much.

  7. Sean

    and if i need to create extra tables, what attributes should i put into the tables?

    appreciate it Duck

  8. Sean

    thanks for your help Duck.

    I have some more questions

    1. then i only have events and eventType tables,

    should I create calendar table? because you mention it above.

    2. Where can I see the calendar plugin working?

    can you explain how to display it with the example of your case?

    thank you so much!

  9. Duck Ranger Post author

    @Sean
    1. If you’re following my posts – there’s only the events table.
    2. I don’t know, it’s not mine.

  10. Pingback: Summary of Build 3 | rhu7's blog

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>