This tutorial will help user learn how to integrate the jQuery fullcalendar in our web application blogs etc.Below are the steps to integrate the fullcalendar:

Step 1:Write an action in an Eventcontroller let us say, event_calendar

path: /app/Controller/EventsController.php

    public function event_calendar() {

        //fetch all the events from the database (say we have and Event table)
        // the default parameters that we use as a key for any array 
        // fetched by find quey are as ('title','user','start','end','backgroudColor','textColor')

For Example:-
$events = $this->Event->find('all',array(
                'fields'=>array(
                'eventname',
                'Client.firstname', // if we find any association
                'startdate',
                'enddate','id')));
$allevents=array();
foreach($events as $event){

        $allevents[]=array(
             'title'     =>$event['Event']['eventname'],
             'user'      =>$event['Client']['firstname'],
             'start'     =>$event['Event']['startdate'],
             'end'       =>$event['Event']['enddate'],
             'backgroundColor'=>$eventcolor,
             'textColor' =>'#000000');

    }
  $this->set('allevents',$allevents);

Step 2:Now we will create an event_calendar.ctp file inside the Event directory under the directory View

path: /View/Event/event_calendar.ctp

<?php
echo  $this->Html->css(array('fullcalendar/fullcalendar.min','fullcalendar/fullcalendar.print')); 

echo $this->Html->script(array('fullcalendar/moment.min','fullcalendar/jquery.min',
'fullcalendar/fullcalendar.min'));
?>

<script>

    $(document).ready(function() {

        var jData = $("#JSONdata").html();
        //var colors = eventColoralert(jData);
        $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,basicWeek,basicDay'
            },
            events: jQuery.parseJSON(jData),
            defaultDate: '2015-02-12',
            editable: true,
            eventLimit: true, // allow "more" link when too many events
        });
    });
</script>
<style>
    body {
        margin: 40px 10px;
        padding: 0;
        font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
        font-size: 14px;
    }
    #calendar {
        max-width: 900px;
        margin: 0 auto;
    }
</style>

<?php
   $encodedData = json_encode($allevents);
?>

<div id='JSONdata' style="display:none;"><?php echo $encodedData; ?></div>

<div id="eventContent">
     <div id="eventInfo"></div>
</div>
<div id='calendar'></div>

Note:

Make sure we select the right JavaScript and CSS files also take care that the FullCalendar stylesheet, as well as the jQuery, FullCalendar, and Moment JavaScript files are included, in the head of your page.

Example screenshot shown below-