monetization

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

Setup Amazon Affiliate API with PHP - Product Advertising API 5.0 (2020)

Fullcalendar with PHP and CodeIgniter - Database Events - Part 2

Using Datatables with CodeIgniter Tutorial

Fullcalendar with PHP and CodeIgniter

...
monetization

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

20/11/2017

pathi

hi
i have customised your script with our admin panel ..well working good without any change in editable event ..
i can' add more fields ..but i cant show up onlick ...
and also i need your help to upload /update event picture with this event calendar ...
i can upload and add fields nicely..not in showing events and also update / delete is not possible myside with this script ..
please help me to generate success

thanks in advance
Pathi .C
webinar
ovm web solutions
chennai

Reply

21/11/2017

Patchesoft

@pathi do you have a link I can check?

Reply

30/11/2017

paul

can't even display a basic calendar did everything what you have said but mine is not working TT

Reply

30/11/2017

Patchesoft

@paul do you have a link to your site so I can test it out?

Reply

08/02/2018

gio

why cant even display the full calendar, i did everything what the tutor says except this one i think "You should then be able to access the script by going to your URL: http://www.example.com/scripts/fullcalendar/fullcalendar.min.js" when i open it the domain error, can you help this?

Reply

10/04/2018

Ewan

how to setup index.php from views/calendar to be the main site dir at localhost, i keep getting 'Welcome to CodeIgniter!' page no matter what I change

thanks!

Reply

28/04/2018

M

The calendar does not display

Reply

14/05/2018

Hamza

Kindly tell us what link to use for accessing the calendar. I have tried all of em on localhost, but none works. And please edit this line of yours, and tell us where to access the calendar from:

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

Reply

04/07/2018

SpawnJFK

@Hamza
Yes, +1 for your question, i would like that answer too...

Reply

11/07/2018

Tausif Anwar

Hi,

Thank You, Its helpful, but I want to show picture from db in place of static text ?

Reply

05/08/2018

Andy

@Patchesoft Global Solutions is right.

You wrote the file name as "controllers" in this line:

Now, let's create our skeleton files:
File: application/controllers/Controllers.php

It should be

File: application/controllers/Calendar.php

Reply

06/11/2018

Arjan

The Calendar doesn't show for me. can anyone please post the complete index.php file?

Reply

24/12/2018

naduni

my calendar won't show old events when page loaded until I create a new event.plese help me.

Reply

09/07/2019

Nitesh Kesarkar

Please help me I am stuck. What is wrong?

Error -

moment.min.js:6 Uncaught TypeError: Cannot read property 'createPlugin' of undefined
at moment.min.js:6
at moment.min.js:6
at moment.min.js:6
calendar:31 Uncaught TypeError: $(...).fullCalendar is not a function
at HTMLDocument. (calendar:31)
at c (jquery.min.js:4)
at Object.fireWith [as resolveWith] (jquery.min.js:4)
at Function.ready (jquery.min.js:4)
at HTMLDocument.q (jquery.min.js:4)


My view code is




Calendar Display



Reply

Leave A Comment