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');
}
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>
<?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>
$(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
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:
- Part 1: Set up
- Part 2: Creating an event source
- Part 3: Adding events
- Part 4: Editing events
- Part 5: Dragging and resizing
Popularity: 90% [?]
If you enjoyed this article, please consider sharing it!
60 Responses to FullCalendar and CakePHP part 1 – Set Up
Leave a Reply
Recent Comments
- paskuale: @Duck Ranger framework’s name: Yii (Yes it is)
- Hanzel: I’m having a hard time understanding why when i click “run as…” in the project it...
- paskuale: Great article, thanks to your article I realized the same thing but with another framework, I don’t...
- Radix: This indeed came first in google and saved heck lot of time for me. Thanks
- Aditya: Spot on!! Thank you!! Had no idea why this error was occurring.
- paskuale: @Duck Ranger framework’s name: Yii (Yes it is)
LinkedIn
Growing Kiwis
Growing Kiwis is my free service for early childhood education centers, preschools, daycares, kindies and more- any group of children, really.
Let me know what you think!
@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.
Hi Duck,
Thank you. You were right I made a mistake in copy and paste in my controller. Now I get the response like :
[{"id":"1","title":"cos tam","start":"2011-09-26 17:28","end":"2011-09-26 15:28","allDay":false}]
when calling :
http://localhost/cakephp/events/feed&start=1280617200&end=1317195548
Could you share with me the way I should have used that in the view ? I am doing this
//
but it does not work
Marek
sorry, I have this in my view
//
@Marek – this event feed should only go to the fullcalendar itself – you shouldn’t try and load it in the browser. See here for how to use it
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
Look tried everything. Very new to cakephp. Is there any zipped file of this tuturial in its entirety. Really need help here.
@Philip – go here: http://bakery.cakephp.org/articles/silasmontgomery/2011/03/02/cakephp_full_calendar_plugin_2
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.
@paskuale – go ahead, I don’t think it’s spam if you add to the knowledge
@Duck Ranger framework’s name: Yii (Yes it is)