Fullcalendar with PHP and CodeIgniter

FullCalendar is a JavaScript event Calendar that allows you to make easy customisable calendars quickly. This tutorial is going to show you how you can store events in a database and then use FullCalendar to display these events using PHP. We'll also show you how to add new events and delete old ones.

This tutorial is a continuation of our FullCalendar with PHP and CodeIgniter series. View previous parts:

We'll be using the CodeIgniter Framework for this tutorial; since it uses a MVC architecture, it makes it very easy for us to keep our code organised. Let's setup our basic CodeIgniter files:

  • application/controllers/Calendar.php
  • application/models/Calendar_model.php
  • application/views/calendar/index.php
  • scripts/fullcalendar/*

First, grab the FullCalendar download files from their site: https://fullcalendar.io/

Unzip the file and add them to a new folder in your CodeIgniter root directory called scripts. You should then be able to access the script by going to your URL: http://www.example.com/scripts/fullcalendar/fullcalendar.min.js

If you haven't already, download CodeIgniter from their website and upload it to your site, modifying the config and database config files to include your website details and database settings respectively.

Now, let's create our skeleton files:

File: application/controllers/Controllers.php

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Calendar extends CI_Controller
{

     public function __construct() {
        Parent::__construct();
        $this->load->model("calendar_model");
    }

     public function index()
     {
          $this->load->view("calendar/index.php", array());
     }

}

?>

File: application/models/Calendar_model.php

<?php

class Calendar_Model extends CI_Model
{


}

?>

File: application/views/calendar/index.php

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Calendar Display</title>
        <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    </head>
    <body>

    <div class="container">
    <div class="row">
    <div class="col-md-12">

    <h1>Caelndar</h1>



    </div>
    </div>
    </div>


<script type="text/javascript">
$(document).ready(function() {

});
</script>
    </body>
</html>

FullCalendar

Once you have all your skeleton files sorted, we can now dive into making our calendar. Let's first include our FullCalendar scripts into the view file so that we load the javascript library:

File: application/views/calendar/index.php

<link rel="stylesheet" href="<?php echo base_url() ?>scripts/fullcalendar/fullcalendar.min.css" />
               <script src="<?php echo base_url() ?>scripts/fullcalendar/lib/moment.min.js"></script>
               <script src="<?php echo base_url() ?>scripts/fullcalendar/fullcalendar.min.js"></script>
               <script src="<?php echo base_url() ?>scripts/fullcalendar/gcal.js"></script>

I like to place these scripts just after including jquery. These scripts are all included in the download for FullCalendar. The different scripts will give us different functionality that we need to make our calendar work.

Next, we need to create a Div that is going to contain our calendar:

File: application/views/calendar/index.php

<div id="calendar">
</div>

I placed mine just below the h1 tag.

Now, we need to use FullCalendar's magic; simply initialise the library on the calendar div we just made:

File: application/views/calendar/index.php

<script type="text/javascript">
$(document).ready(function() {
    $('#calendar').fullCalendar({

    });
});
</script>

Voila! It's as simple as that to create a Calendar using FullCalendar. Your page should look something like the screenshot below:

Events

Events in FullCalendar are provided to the Calendar in the form of EventSources. Our application will eventually use a database to grab events from and then display them using AJAX. But for now, let's look at how we can add some static events using a simple Javascript array.

In our FullCalendar JavaScript code, let's add in a new EventSource:

File: application/views/calendar/index.php

$('#calendar').fullCalendar({
    eventSources: [
            {
                color: '#18b9e6',   
                textColor: '#000000',
                events: []
            }
        ]
});

Here you can see we have an array of event sources (denoted by the [ square brackets ]). This allows you to add multiple sources for obtaining events. For now we'll just use one.

We have three attributes we can edit in the example above: color, textColor and events. The first two attributes effect the styling of events and can contain any HTML HEX code or name (red, blue, yellow).

The events attribute is another array. Here we can list an array of our events that will appear in the Calendar. Let's add two events:

events: [
                    {
                        title: 'Event 1',
                        start: '2017-03-13'
                    },
                    {
                        title: 'Event 2',
                        start: '2017-03-19'
                    }
                ]

Now if you refresh your calendar page, you should these two events pop up under the dates listed. If you're reading this tutorial beyond March 2017, then these events won't show up on the first page. Feel free to change the dates.

That is a simple look into events. As mentioned, we'll be using AJAX to populate our Calendar with events in the next tutorial. Resources




Enjoyed that? Check These Posts Out

Learn Linux: Setup DNS Server with Bind On Debian

Using Datatables with CodeIgniter Tutorial

Fullcalendar with PHP and CodeIgniter - Database Events - Part 2

Pro Login User Management System - PHP

Article Comments

Let us know your thoughts below by adding a quick comment!

14/06/2017

nurfaiz

Great tutorial

Reply

28/07/2017

Global Solutions

please check controller name i guess it should be Calendar not conrtoller , im chekig other issues

Reply

31/07/2017

Patchesoft

@Global Solutions controller name is correct in the tutorial (Calendar). You shouldn't need to change it.

Reply

15/09/2017

CodeIgniter Developer

Yes, I agree with @Patchesoft. The article is right about the Calendar and its Calendar. By the way, excellent post!

Reply

06/11/2017

Hilal

Quite Impressive @Patchesoft, Good Work ,Keep it Up (y)
Have you maintained any repository for the whole code

Reply

Leave A Comment