The examples on this site are currently tested to work on Phalcon V3.4 and Phalcon Devtools V3.2 Some issues may arise when using later versions.

Please get in touch or post a comment below the post if you encounter a problem.

Fullcalendar uses Javascript Object Notation data to store, process and display events. Json data is an increasingly important lightweight data storage format which allows for the data to be easily stored and interchanged between applications. It is also gaining increasing importance as a database storage format as seen in databases such as MongoDB.

At the time of writing the Fullcalendar Event object had 19 different attributes which allow programmers to control and display events on the calendar. These are described here: https://fullcalendar.io/docs/event_data/Event_Object/

For now we will focus on the following attributes

In our example the one event on our calendar was hardcoded into the jQuery code which set up the calendar. We need to be able to produce raw json data from our database regarding bookings in our tennisClub which takes this format.

As the columns in our tennisClub bookings table have different names we will create a SQL view to ensure we have a virtual table which has the same attribute names as required by Fullcalendar we can then transform this into json data before passing it to Fullcalendar to be rendered.

The following SQL query will create a view called Event whose attributes are id, title, start, and end. The title will be the member's full name (joined in from the member table) and start and end attributes are reformatted to use the Universal Time Code as required by Fullcalendar. Run the following command to create the view.

drop view if exists event;
create view event as
select concat(member.firstname, " ", member.surname) as title, 
Concat(DATE_FORMAT(BookingDate,'%Y-%m-%d'), "T", StartTime) as start, 
Concat(DATE_FORMAT(BookingDate,'%Y-%m-%d'), "T", EndTime) as end, 
concat("Court: " ,court.id) as venue,booking.id as id
from member, court, booking
where member.ID = booking.MemberID and court.id=booking.CourtID;

The great thing about a SQL view is that it appears and behaves almost exactly as if it were a table. This means we can scaffold it. In this instance we don't need to do a full scaffold so we can generate a model class using the phalcon model command. Execute the following from your phalcon project folder

phalcon model event --get-set

Now that we have a model for the event we can relatively easily transform our events into json data of the type required by Fullcalendar. Include the following action in app/controllers/BookingController.php

public function jsonAction()
{
	//$this->view->disable();
	$events = Event::find();
	$this->response->resetHeaders();
	$this->response->setContentType('application/json', 'UTF-8');
	$this->response->setContent(json_encode($events));
	return $this->response->send();
}

This function will pull all the tennis club bookings from the database in the required json format for an event. It will then transform the data into json and send it as a response. Setting the appropriate response headers for the json content type is a vital step as very often the browser will create errors if an incorrect content type is used. Disabling the view isn't required here as there isn't a view corresponding to this action but I've left the code in commented out as it can be useful when trying to return json data.

Now visit http://localhost/tennisClub/booking/json to view your tennisClub bookings in the raw json format required by fullCalendar. Using this approach any database table with start and end time information could be made to produce the correct event data for fullcalendar provided you can adapt the SQL view above.

All that's left is to modify our example from step 1 so that rather than relying on hard-coded events it will pull the data from our database.

Modify app/views/booking/displayCalendar.phtml to replace the hard-coded events with the code in red below. This resolves in my application to '/tennisClub/booking/json' - the url which will produce the raw json data. Including $this->getBaseUri() here will allow the code to work in any project folder. Including this technique in your code also allows for smooth deployment to a production system where your base uri may change.

{{ content()}}
{{ assets.outputCss('fullCalendar') }}
{{ assets.outputJs('fullCalendar') }}
<script>
$(document).ready(function() {
    $('#calendar').fullCalendar({
        header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay,listWeek'
            },
        defaultDate: '2018-10-12',
        editable: true,
        eventLimit: true,
        events: '{{ url('booking/json') }}'
    });
});
</script>
<div id="calendar"></div>

If you revisit the booking/displayCalendar view of your application your bookings will be displayed on the calendar. If you are the tennisClub example database you may have to go back to 2017 to see them. Alternatively visit http://localhost/tennisClub/booking/new and create some more up to date bookings. Then return to booking/displayCalendar to see them integrated and displayed in Fullcalendar.