Full Calendar in Codeigniter

If you are building any kind of app that needs a calendar, then I highly recommend using Full Calendar. Full Calendar can be downloaded for free by visiting https://fullcalendar.io/

This is what full Calendar looks like once you have implemented it into your Codeignter Application.

Full Calendar in Codeigniter

Add Full Calendar into Codeigniter

As we will be using Codeigniter and it’s wonderful MVC Architecture, we can easily setup a Model, View & Controller ready to integrate our Full Calendar functionality.

If you have already downloaded the files from Full Calendar, then now let’s place them into our Codeigniter Application. I am saving all my third party scripts in a folder called Vendor. So I will be adding the whole Full Calendar into this directory in the root of my Application.

Full Calendar file directory in Codeigniter

 

Access Full Calendar Javascript

To ensure you can link to your full calendar files ok add the following URL to your browser and hit enter. Don’t forget to update the url with your domain. If you are using localhost, this will work also. Don’t forget to change where I have ‘vendor’ if you have a folder called ‘scripts’.

http://www.yourwebsite.com/vendor/fullcalendar/fullcalendar.min.js

 

If you can link to the file, you should see a screen like this:

Full Calendar Javascript

This is just the Fullcalendar Javascript code all minified. If you see this screen, congratulations, you can now access Fullcalendar in your Application.

Codeigniter Setup

Now we have installed FullCalendar and we know we can connect to it ok, let’s go ahead and setup the Codeigniter Files to display our Calendar in a View.

The Controller File: application/controllers/Calendar.php

Add the following code to your Calendar Controller file. If you have used codeigniter before this will look very familiar to you, but if not I will explain what it all means.

<?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());
}

}

?>

Below I will briefly explain what is happening on each line number:

  • 1: Just the default script called so this file cannot be accessed directly by the browser.
  • 3: We create the Calendar Class that will hold all the methods we want to run.
  • 5: the default Constructor Function which sets any default actions we want to happen when this class is called.
  • 7: This is telling the Calendar Class which model we will be using to communicate with the Database to grab our events.
  • 10: The Index Function of the class, this will be loading the View we want and pass the data that we get from the model as an array.

Ok moving on, we can setup our Model File.

The Model File: application/models/Calendar_model.php

As we are focusing on simply installing and displaying Full Calendar in our Application, we will simply have an empty Model file like so.

<?php

class Calendar_Model extends CI_Model {


}

?>

 

The View File: application/views/calendar/index.php

I will be using Bootstrap and jQuery for my layout. I will be using a CDN (Content Delivery Network) so I will not need to install Bootstrap or jQuery into my Codeigniter Application manually. Add the following to your View file.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>My Calendar of Events</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>My Awesome Calendar</h1>
          <!-- Display Our Calendar -->
        </div>
      </div>
    </div>

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

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

Include Full Calendar Files

Now we need to include our full calendar files that we downloaded earlier into our View File. Here you will see why we tested our URL earlier in the Tutorial.

<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>

Copy the links above and we will be pasting them into the ‘head section’ of our view file HTML. We will place the code after the jQuery Script Code. This is important as it ensures the browser loads jQuery before the Full Calendar Scripts.

Your View File should now look like the below code. I have placed a comment where we will be adding our Full Calendar shortly.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>My Calendar of Events</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>
        
        <!-- Import Full Calendar Files -->
        <link rel="stylesheet" href="<?php echo base_url() ?>scripts/fullcalendar/fullcalendar.min.css" />
        <script src="<?php echo base_url() ?>vendor/fullcalendar/lib/moment.min.js"></script>
        <script src="<?php echo base_url() ?>vendor/fullcalendar/fullcalendar.min.js"></script>
        <script src="<?php echo base_url() ?>vendor/fullcalendar/gcal.js"></script>

    </head>
    <body>

    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <h1>My Awesome Calendar</h1>
          <!-- Display Our Calendar -->

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

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

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

You may be wondering why I have added the below to each of the URL’s:

<?php echo base_url() ?>

This simply returns your Site URL. If I had to move this code to another application in another website, I would not need to come in and change these values to the new URL, they would simply reference the base URL of that new application and as long as I had the files in place it should all work fine still.

Displaying The Calendar

In order to make our Full Calendar Display in the page, the Full Calendar Code when initialised will look for an HTML Div with an ID of ‘calendar’.

We need to add the following to our View File:

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

Now in our view file. do you see the comment I placed earlier where will be adding our Calendar. Under neath it add the above HTML snippet.

Now your HTML Code should all look like this:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>My Calendar of Events</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>
        
        <!-- Import Full Calendar Files -->
        <link rel="stylesheet" href="<?php echo base_url() ?>scripts/fullcalendar/fullcalendar.min.css" />
        <script src="<?php echo base_url() ?>vendor/fullcalendar/lib/moment.min.js"></script>
        <script src="<?php echo base_url() ?>vendor/fullcalendar/fullcalendar.min.js"></script>
        <script src="<?php echo base_url() ?>vendor/fullcalendar/gcal.js"></script>

    </head>
    <body>

    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <h1>My Awesome Calendar</h1>
          <!-- Display Our Calendar -->
          <div id="calendar"></div>
        </div>
      </div>
    </div>

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

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

Initialise Full Calendar

Still in the View File, We are going to initialise Full Calendar to make it display on the page. If you look down at the bottom of your View File, just before the Closing Body Tag in the HTML you will see our Script Tags. This is where we will be adding our Full Calendar Code to call Full Calendar and attach it to the DIV we made earlier with the ID of ‘calendar’.

Replace the whole Script Tag Snippet with the following:

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

    });
});
</script>

You will see we are using jQuery to grab our div with an ID of calendar and attach the FullCalendar Script to it.

Simple as that and now if you visit your calendar page you will see you have the calendar, installed and displayed on the page like so:

Full Calendar added into Codeigniter

Customise Calendar Header Toolbar

Our Calendar looks great, but it can look much better! Full Calendar comes with a ton of great functions that let you customise every aspect of the Calendar. Check out the documentation from the link below and see what you can do.

https://fullcalendar.io/docs#main

Look at our Calendar Header, currently you can see which month it is, and skip months using the forward and backward arrows.

What about adding Day View, Week View and Month View toggle buttons?

Let me show you just how simple that is.

Adding Extra Toolbar Buttons

Full Calendar has a Toolbar Header Object which you can tell it what to display. To do it is very easy. In our jQuery and inside the Full Calendar function simply place the following code, so the whole jQuery function will look like this now:

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

    header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },

    });
});
</script>

What we are doing here is telling Full Calendar what items we want to show and the position we want to show them, either left, centre or right.

Save your code and refresh your screen and you will see you now have extra buttons on your calendar which you can now click to manipulate the Calendar.

Here is what our Full Calendar Toolbar looks like now:

Full Calendar Toolbar buttons

As you can see we added the Previous/Next buttons and also the today button to the left side. We added the Title to the Center and we added the different view buttons to the right.

Full Calendar also has a Footer Object which you can do the exact same thing to.

If you update the jQuery code to look like the following you will see we now have a toolbar on the header and footer of the calendar.

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

    header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
   footer: {
            left: 'prev,next today myCustomButton',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },

    });
});
</script>

 

If you have done this correctly you should see the following output on your calendar:

Full Calendar Footer Toolbar

Event Sources in Full Calendar

Full Calendar gets its events through something called EventSources. This is a way that the calendar reads data and outputs into the calendar. Events are normally pulled from a a database but I will show you how to add some hard coded events by using the EventSources function provided by Full Calendar.

In Full Calendar you can add many different event sources so that you can grab events from multiple sources, but I will show you how to add a single EventSource.

Again, in our jQuery code, if you add the following code, above the header and footer sections we added previously:

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

    eventSources: [
            {
                color: '#306EFE',   
                textColor: '#ffffff',
                events: [
                    {
                        title: 'My Big Event',
                        start: '2019-02-09',
                        end: '2019-02-10'
                    },
                    {
                        title: 'My Second Big Event',
                        start: '2019-02-11',
                        end: '2019-02-13'
                    }  
                 ]
            }
    ],

    header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
   footer: {
            left: 'prev,next today myCustomButton',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },

    });
});
</script>

 

What we have added is the EventSource and defined a few attributes with it. We have provided:

  • A Color attribute which will be the default background color of our event in the calendar.
  • A TextColor attribute which will define the text color of our event when listed in the calendar.
  • Events attribute which contains our events.

In the Events this is where you will declare The title of your event, The Start Date/Time and End Date/Time of your event.

Save your code and refresh your calendar you should now have 2 events listed in your calendar, both events are 2 day events. You will also notice your events have a background colour of Blue with white Text as we declared in our styling attributes.

Full Calendar with Test events added

The Whole Code so far

Your code should look like the following if you have followed every step of the tutorial.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>My Calendar of Events</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>
        
        <!-- Import Full Calendar Files -->
        <link rel="stylesheet" href="<?php echo base_url() ?>scripts/fullcalendar/fullcalendar.min.css" />
        <script src="<?php echo base_url() ?>vendor/fullcalendar/lib/moment.min.js"></script>
        <script src="<?php echo base_url() ?>vendor/fullcalendar/fullcalendar.min.js"></script>
        <script src="<?php echo base_url() ?>vendor/fullcalendar/gcal.js"></script>

    </head>
    <body>

    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <h1>My Awesome Calendar</h1>
          <!-- Display Our Calendar -->
          <div id="calendar"></div>
        </div>
      </div>
    </div>

<!-- Our Scripts -->
<script type="text/javascript">
$(document).ready(function() {
    $('#calendar').fullCalendar({
    eventSources: [
            {
                color: '#306EFE',   
                textColor: '#ffffff',
                events: [
                    {
                        title: 'My Big Event',
                        start: '2019-02-09',
                        end: '2019-02-10'
                    },
                    {
                        title: 'My Second Big Event',
                        start: '2019-02-11',
                        end: '2019-02-13'
                    }  
                 ]
            }
    ],
    header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
   footer: {
            left: 'prev,next today myCustomButton',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
    });
});
</script>
    </body>
</html>

I hope this tutorial helps you to easily integrate Full Calendar into your Codeigniter project.

If you have any questions or suggestions then please comment below, i’d love to hear how you implement this into your own project.

 

 

Brian Revie

Brian Revie

A UK Based Web Developer who solves problems for the Business Community

6 Comments

  • TheBoss says:

    Hola !

    I am new to both php and codeigniter as a framework.
    First of all you seem to use a older version of fullcalendar ? because the latest zip file does not contain all the files you mention.
    But u use a older one so o could follow your staps, now i can see the calendar but my quiestion now is how do i get data from my database into the calendar ?

    Thx for this tutorial !

    • Brian Revie says:

      Hello and thank you for your comment.

      This is the function I use in my controller to grab the events from the database, I hope it helps you.

      public function get_events()
      {
      // Our Start and End Dates
      $start = $this->input->get("start");
      $end = $this->input->get("end");

      $startdt = new DateTime('now'); // setup a local datetime
      $startdt->setTimestamp($start); // Set the date based on timestamp
      $start_format = $startdt->format('Y-m-d H:i:s');

      $enddt = new DateTime('now'); // setup a local datetime
      $enddt->setTimestamp($end); // Set the date based on timestamp
      $end_format = $enddt->format('Y-m-d H:i:s');

      $events = $this->model_calendar->get_events($start_format, $end_format);

      $data_events = array();

      foreach($events->result() as $r) {

      if ($r->is_recurring == 0){
      $data_events[] = array(
      "id" => $r->id,
      "title" => $r->title,
      "description" => $r->description,
      "end" => $r->end,
      "start" => $r->start,
      "category" => $r->category,
      "color" => $r->color,
      );
      } else {
      $data_events[] = array(
      "id" => $r->id,
      "title" => $r->title,
      "description" => $r->description,
      "end" => $r->end_time,
      "start" => $r->start_time,
      "category" => $r->category,
      "color" => $r->color,
      "dow" => $r->day_of_week,
      );
      }

      }

      echo json_encode(array("events" => $data_events));
      exit();
      }

  • Alejandro Guillan Pazos says:

    Hola, me gusta mucho su proyecto pero no se programación y no logro ponerlo en linea, hay posibilidad de que comparta el código fuente.
    Desde ya muchas gracias por su tiempo.
    Un Saludo

  • Alejandro Guillan Pazos says:

    the complete source code, thanks

  • Alejandro Guillan Pazos says:

    ?? please

Leave a Reply