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.

Modern applications can be assembled from a range of plugins and components. These components can exist in any part of the application but in general can be broken into client side or server side. While Swiftmailer is a library of objects built in PHP designed to run on the server and allow programmers to quickly and easily send emails, Fullcalendar is a very useful javascript front-end component which allows programmers to display calendar events. Users can then drag and drop the events to different points on the calendar or drag the edge of the event to extend or reduce its time period.

This series of posts will explain how to include a 3rd party javascript component in your application and then integrate it seamlessly to provide a smooth functional user experience.

Many modern frameworks incorporate the concept of assets. Assets typically refer to those images, stylesheets or javascript components that are likely  to be reused in a number of places within your application. Treating them as "assets" allows them to be stored in a single location and incorporated where necessary. This greatly reduces duplication and maintenance of code. In addition, managing them in this way allows them to be compressed, streamlined and filtered allowing for smaller file sizes and improved overall performance of the application.

Phalcon allows programmers to add assets to "collections". Grouping them in this way allows them to be deployed only when and where they are needed. There is one overall asset collection this is where programmers will add assets which are used everywhere in their application. Bootstrap and jQuery might fall into this category. Fullcalendar is not likely to be required everywhere as such we will use a named collection of assets and deploy them only where required. For this example we will use the tennisClub application which was generated by the scaffolder in Step 3 of the getting started section. If you didn't complete that section you can still copy the database script you'll find in that post and scaffold the 3 three tables in order to start from the same place.

First download the Fullcalendar.zip from www.fullcalendar.io. Extract the zip file. If you open the demos folder you can click on any of the examples there to see Fullcalendar working. At a minimum Fullcalendar requires the following three files:

The 'min' in the filename indicates that these files have been minified. This basically means they are compressed and no-longer readible but will improve performance of the system. Locate these files in the archive (moment.min.js is in the lib folder) save the javascript files to the public/js folder within your tennisClub application and save the css file to the public/css folder within your application.

For javascript and css components which you expect to use throughout your application you can addCss and addJs to the $this->assets collection. As Fullcalendar is not likely to be used throughout our example application we will use a named collection of assets. This allows us to be a bit more surgical and not load assets unnecessarily which would have performance implications.

Edit the file app/controller/BookingsController.php and add the following action which will create a collection of assets for Fullcalendar

public function displayCalendarAction()
{
	$fcCollection = $this->assets->collection("fullCalendar");
	$fcCollection->addJs('js/moment.min.js');
	$fcCollection->addJs('js/fullcalendar.min.js');
	$fcCollection->addCss('css/fullcalendar.min.css');
}

The order in which the assets are added is important. Fullcalendar is dependent on the Moment libary to run so it must be loaded before Fullcalendar. Fullcalendar is also dependent on jQuery. 

The scaffolder includes a link to jQuery hosted on googles Content Delivery Network with the app/views/index.phtml file. jQuery is loaded at the bottom of the page underneath the block where the content from the view will be loaded. This ensures jQuery doesn't slow down the rendering of the page. As we need jQuery to be loaded before we can use Fullcalendar we need to move jQuery above the block which will contain our view.

Now we need to add a view corresponding to displayCalendarAction which will display Fullcalendar. We'll use Volt here instead of phtml as the syntax for outputting assets, pulling in content and creating a link is much neater. Create a file called displayCalendar.volt and save it to app/views/booking

{{ 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: [
        {
          title: 'All Day Event',
          start: '2018-02-01'
        }]
    });
});
</script>
<div id="calendar"></div>

$this->getContent(); will pull in the content from inherited views including app\views\layouts\booking.phtml and app\views\index.phtml. This is important as index.phtml is required to load jQuery and Fullcalendar is dependent on jQuery. 

The next two lines will output the assets we added in the displayCalendarAction() function of the bookings controller. Right click on your web page and select view page source note the code that has been generated to load the various assets. If they are not in the right order here the Fullcalendar will not load. jQuery must be loaded first then moment and then fullCalendar.

The jQuery code between the script tags in the view has been assembled from jQuery examples. There are many different settings which can be applied here. Check the Fullcalendar documentation for this.