Full calendar integration is quite easy in CakePHP but major difficulty arises when you want your events to come from database in the JSON format and you need to display event details in a popup on an event click. Don’t worry! I will explain here, how it could be done easily. Follow the steps with me and if you do properly, it's like making maggi noodles :P
Step1: Create a table APPOINTMENTS in your database. Here is the query for your ease.
CREATE TABLE IF NOT EXISTS `appointments` (
`id` bigint(20) unsigned NOT NULL AUTO_INCREMENT,
`title` varchar(200) NOT NULL,
`book_datetime` datetime DEFAULT NULL,
`start_datetime` datetime DEFAULT NULL,
`end_datetime` datetime DEFAULT NULL,
`notes` text,
`hash` text,
`is_unavailable` tinyint(4) DEFAULT '0',
`id_users_provider` bigint(20) unsigned DEFAULT NULL,
`id_users_customer` bigint(20) unsigned DEFAULT NULL,
`id_services` bigint(20) unsigned DEFAULT NULL,
`id_google_calendar` text,
PRIMARY KEY (`id`),
KEY `id_users_customer` (`id_users_customer`),
KEY `id_services` (`id_services`),
KEY `id_users_provider` (`id_users_provider`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;
Step2: Code in Controller
Create an “Appointments” controller (in my case AppointmentsController) in the controller folder. In the “index” function of it create a variable “eventData” as an array which will store the event related data needed to display in the popup.
$eventData = array();
$i = 0;
I have declared a variable “i” used to store multiple events data in eventData array.
Now fetch all appointments from the “Appointments” table using this query.
$allAppointments = $this->Appointment->find('all');
Extract event related data from this “allAppointments” variable. Actually it’s an array. So you have to do some easy manipulation like this:
foreach ($allAppointments as $value) {
$eventData[$i++] = $value['Appointment'];
}
Now final step in controller’s file, set the values to some variables to pass to view.
$this->set('allAppointments', $allAppointments);
$this->set('eventData', $eventData);
Note: No need for model here.
If you simply want data from “Appointments” table, there is no need for any model. If you need some more data related to an appointment like - user name from users table, etc. then you need to call the model. Will talk about that part in some other tutorial.
Step3: Creating a view.
Now create a “Appointments” folder in the View folder. It’s the CakePHP syntax – you have to create a folder in the view similar to the Controller name and in this folder you will place your view files with .ctp extension (again CakePHP syntax).
In “Appointments” folder create a .ctp file with the name of the method which need to be called. Here we have created “index” method in the “Appointments” controller, so we will create and index.ctp file and place our html,php, js & css related things in it.
Step4: JSON Encode array to string.
Now the array containing details of events is in “eventData”. We will encode it to JSON format string using “json_encode” PHP function.
<?php
$encodedData = json_encode($eventData);
?>
Now this string variable, we will set to the HTML page in any div with display none. This step is done to fetch this string in Javascript code of full calendar.
<div id="JSONdata" style="display:none;"><?php echo $encodedData; ?></div>
Step5: Placing DIVs in the code.
Now create an event content div which will contain all the event data like this:
<div id="eventContent">
<div id="eventInfo"></div>
</div>
And place the calendar containing div also.
<div id='calendar'></div>
Step6: Calling fullcalendar script and setting attributes
This is the final step. First of all you need to include the css and javascript files in your code in the head section or top of your view file – index.ctp.
CSS
- fullcalendar.css
Javascript
- moment.min.js
- jquery.min.js
- fullcalendar.min.js
- jquery-ui.js
Include the above files in order included, so that no javascript issues occur. Now call the full calendar script as described below.
<script>
$(document).ready(function() {
var jData = $("#JSONdata").html();
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
events: jQuery.parseJSON(jData),
eventRender: function(event, element){
element.attr('href', 'javascript:void(0);'); // disable the event href
element.click(function(){
// set the values & open the modal
var html = "<div><div class='heading'>Appointment Details</div><br/><span class='firstCol'>Title</span> <span class='secondCol'>"+event.title+"</span><br/><span class='firstCol'>Start Date</span> <span class='secondCol'>"+event.start_datetime+"</span><br/><span class='firstCol'>End Date</span> <span class='secondCol'>"+event.end_datetime+"</span><br/><span class='firstCol'>Booked Date</span> <span class='secondCol'>"+event.book_datetime+"</span><br/><span class='firstCol'>Notes</span> <span class='secondCol'>"+event.notes+"</span><br/><span class='firstCol'>Description</span> <span class='secondCol'>"+event.notes+"</span><br/></div>";
$("#eventInfo").html(html);
$("#eventContent").dialog({
modal : true
});
});
},
defaultDate: '2014-09-12',
editable: true,
eventColor: 'green',
//eventBackgroundColor: 'blue',
eventLimit: true // allow "more" link when too many events
});
});
</script>
To parse json encoded string data in the fullcalendar, use parseJSON() function. Pass the values to the “events” attribute as shown below.
events: jQuery.parseJSON(jData),
This will display all the events fetched from appointments table into the calendar. See image below:
eventRender: This attribute will be used to display popup and event details when clicked on any event. Paste the code as mentioned in previous step. It will work like this, if you click on any event:
Hope it works for you, if not - mention in comments your issues.
Happy Coding :)