jQuery Fullcalendar Integration with Codeigniter| Tech Arise

Event Calendar is an important feature of web applications to allow users to add, edit, and display events in a Calendar. A FullCalendar is an open-source jQuery Library and that provides to create an event in the calendar and you can easily customize the library event. It also supports event resizing to extend or change event duration. In this tutorial, we will explain how to integrate FullCalendar in Codeigniter and jQuery with display events. This is a very simple example, you can just copy-paste, and change according to your requirements.

In this tutorial, you will learn to how create CRUD (create, read, update, delete) operation REST API with Slim Framework. This is a very simple example, you can just copy paste, and change according to your requirement.

Also Read : Integrate Google Calendar API with Codeigniter Calendar Library

Before started to implement the FullCalendar in Codeigniter, jQuery and MySQL, look files structure:

integrate-fullcalendar-in-codeigniter
- application
  - config
    - autoload.php
    - database.php
    - constants.php
    - routes.php
  - controllers
    - Event.php
  - models
    - Event_model.php
  - views
    - calendar
      - index.php
    - templates
      - header.php
      - footer.php
- system
- index.php
- assets
  - css
  - packages

Download FullCalendar Library click here.

Step 1: Create the database and Table

For this tutorial, you need a MySQL database with the following table:

    --
    -- Table structure for table `event`
    --

    CREATE TABLE `event` (
	  `id` int(11) NOT NULL,
	  `title` varchar(255) NOT NULL,
	  `start_date` varchar(12) NOT NULL,
	  `end_date` varchar(12) NOT NULL,
	  `created_date` varchar(12) NOT NULL,
	  `modified_date` varchar(12) NOT NULL,
	  `status` int(1) NOT NULL DEFAULT 0
	) ENGINE=InnoDB DEFAULT CHARSET=latin1;

	--
	-- Dumping data for table `event`
	--

	INSERT INTO `event` (`id`, `title`, `start_date`, `end_date`, `created_date`, `modified_date`, `status`) VALUES
	(1, 'Event 1', '1575370801', '1575370801', '1575370801', '1575370801', 1),
	(2, 'Event 2', '1575457201', '1575457201', '1575457201', '1575457201', 1),
	(3, 'Event 3', '1575537085', '1575537085', '1575537085', '1575537085', 1),
	(4, 'Event 4', '1575709885', '1575709885', '1575709885', '1575709885', 1);

    --
    -- Indexes for table `event`
    --
 	ALTER TABLE `event`
  		ADD PRIMARY KEY (`id`);


    --
    -- AUTO_INCREMENT for table `event`
    --
    ALTER TABLE `event`
  		MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=5;

-- Table structure for table `event`

CREATE TABLE `event` (

`id` int(11) NOT NULL,

`title` varchar(255) NOT NULL,

`start_date` varchar(12) NOT NULL,

`end_date` varchar(12) NOT NULL,

`created_date` varchar(12) NOT NULL,

`modified_date` varchar(12) NOT NULL,

`status` int(1) NOT NULL DEFAULT 0

) ENGINE=InnoDB DEFAULT CHARSET=latin1;

-- Dumping data for table `event`

INSERT INTO `event` (`id`, `title`, `start_date`, `end_date`, `created_date`, `modified_date`, `status`) VALUES

(1, 'Event 1', '1575370801', '1575370801', '1575370801', '1575370801', 1),

(2, 'Event 2', '1575457201', '1575457201', '1575457201', '1575457201', 1),

(3, 'Event 3', '1575537085', '1575537085', '1575537085', '1575537085', 1),

(4, 'Event 4', '1575709885', '1575709885', '1575709885', '1575709885', 1);

-- Indexes for table `event`

ALTER TABLE `event`

ADD PRIMARY KEY (`id`);

-- AUTO_INCREMENT for table `event`

ALTER TABLE `event`

MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=5;

Step 2: Create Model

Create a model file named Event_model.php inside “application/models” folder.

<?php
defined('BASEPATH') OR 
    exit('No direct script access allowed');
/**
 * Version: 1.0.0
 *
 * Description of Event model
 *
 * @author TechArise Team
 *
 * @email  info@techarise.com
 *
 **/

// Event class
class Event_model extends CI_Model {
	
	// Fetch data according to per_page limit.
	public function eventList() {       
        $this->db->select(array('e.id', 'e.title', 'e.start_date', 'e.end_date', 'e.created_date', 'e.modified_date', 'e.status'));
        $this->db->from('event as e');          
        $query = $this->db->get();
        return $query->result_array();
    }

}
?>

<?php

defined('BASEPATH') OR

exit('No direct script access allowed');

/**

* Version: 1.0.0

* Description of Event model

* @author TechArise Team

* @email info@techarise.com

**/

// Event class

class Event_model extends CI_Model {

// Fetch data according to per_page limit.

public function eventList() {

$this->db->select(array('e.id', 'e.title', 'e.start_date', 'e.end_date', 'e.created_date', 'e.modified_date', 'e.status'));

$this->db->from('event as e');

$query = $this->db->get();

return $query->result_array();

}

Step 3: Create controllers

Create a controllers file named Event.php inside “application/controllers” folder.

The Event controller handles the calendar process.
__construct() – Loads the required library, helper and model.
index() – load calendar data.
loadEventData() – Ajax request and get event data.

<?php
defined('BASEPATH') OR 
exit('No direct script access allowed');
/**
 * Version: 1.0.0
 *
 * Description of Event Controller
 *
 * @author TechArise Team
 *
 * @email  info@techarise.com
 *
 **/

// Event class
class Event extends CI_Controller {
	//Load libraries in Constructor.
	public function __construct() {
        parent::__construct();
        $this->load->model('Event_model', 'event');

    }
	// index method
	public function index() {
        $data['metaDescription'] = 'Integrate FullCalendar in Codeigniter';
        $data['metaKeywords'] = 'Integrate FullCalendar in Codeigniter';
        $data['title'] = "Integrate FullCalendar in Codeigniter | TechArise";
        $data['breadcrumbs'] = array('Integrate FullCalendar in Codeigniter' => '#');
        $this->load->view('calendar/index', $data);
    }

    // load event data
    public function loadEventData() {
        $json = array();
        $dataInfo = $this->event->eventList();       
        foreach($dataInfo as $element) {
            $json[] = array(
                'title' =>$element['title'],
                'start' => date('Y-m-d G:i:s', $element['start_date']),
                'type' => 'gc_event',
                'color' => '#1D8FA3',
                'textColor' => '#FFFFFF',
                'class' => 'gcal-day-grid',
            );
        }
        $this->output->set_header('Content-Type: application/json');
        echo json_encode($json, true);
    }
}
?>

<?php

defined('BASEPATH') OR

exit('No direct script access allowed');

/**

* Version: 1.0.0

* Description of Event Controller

* @author TechArise Team

* @email info@techarise.com

**/

// Event class

class Event extends CI_Controller {

//Load libraries in Constructor.

public function __construct() {

parent::__construct();

$this->load->model('Event_model', 'event');

}

// index method

public function index() {

$data['metaDescription'] = 'Integrate FullCalendar in Codeigniter';

$data['metaKeywords'] = 'Integrate FullCalendar in Codeigniter';

$data['title'] = "Integrate FullCalendar in Codeigniter | TechArise";

$data['breadcrumbs'] = array('Integrate FullCalendar in Codeigniter' => '#');

$this->load->view('calendar/index', $data);

}

// load event data

public function loadEventData() {

$json = array();

$dataInfo = $this->event->eventList();

foreach($dataInfo as $element) {

$json[] = array(

'title' =>$element['title'],

'start' => date('Y-m-d G:i:s', $element['start_date']),

'type' => 'gc_event',

'color' => '#1D8FA3',

'textColor' => '#FFFFFF',

'class' => 'gcal-day-grid',

);

}

$this->output->set_header('Content-Type: application/json');

echo json_encode($json, true);

}

Include Bootstrap, jQuery and FullCalendar plugin in header and footer

Header

<!-- Bootstrap core CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
  <!-- Custom fonts for this template -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css" />
  <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
  <!--- FullCalendar plugin --->
  <link href='<?php print HTTP_PATH_CALENDAR; ?>core/main.css' rel='stylesheet' />
  <link href='<?php print HTTP_PATH_CALENDAR; ?>daygrid/main.css' rel='stylesheet' />
  <link href='<?php print HTTP_PATH_CALENDAR; ?>list/main.css' rel='stylesheet' />
  <!-- Custom styles for this template -->
  <link href="<?php print HTTP_CSS_PATH; ?>style.css" rel="stylesheet">

Footer

  <!-- Bootstrap core JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>  
  <script src='<?php print HTTP_PATH_CALENDAR; ?>core/main.js'></script>
  <script src='<?php print HTTP_PATH_CALENDAR; ?>interaction/main.js'></script>
  <script src='<?php print HTTP_PATH_CALENDAR; ?>moment/main.js'></script>
  <script src='<?php print HTTP_PATH_CALENDAR; ?>moment-timezone/main.js'></script>
  <script src='<?php print HTTP_PATH_CALENDAR; ?>daygrid/main.js'></script>
  <script src='<?php print HTTP_PATH_CALENDAR; ?>timegrid/main.js'></script>
  <script src='<?php print HTTP_PATH_CALENDAR; ?>list/main.js'></script>
  <script src='<?php print HTTP_PATH_CALENDAR; ?>google-calendar/main.js'></script>

Step 4:Create a view(header)

Create a view file named header.php inside “application/views/templates” folder.

This view contains the header section of the webpage. The Bootstrap library is used to provide a better UI, so, include it in the header section.

  <?php
defined('BASEPATH') OR exit('No direct script access allowed');
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">

  <title><?php print $title; ?></title>
  <link rel="icon" type="image/ico" href="<?php print HTTP_IMAGE_PATH; ?>favicon.ico">
  <!-- Bootstrap core CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
  <!-- Custom fonts for this template -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css" />
  <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
  <link href='<?php print HTTP_PATH_CALENDAR; ?>core/main.css' rel='stylesheet' />
  <link href='<?php print HTTP_PATH_CALENDAR; ?>daygrid/main.css' rel='stylesheet' />
  <link href='<?php print HTTP_PATH_CALENDAR; ?>list/main.css' rel='stylesheet' />
  <!-- Custom styles for this template -->
  <link href="<?php print HTTP_CSS_PATH; ?>style.css" rel="stylesheet">
</head>
<body>
  <!-- Navigation -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top header-bg-dark" style="background: ##FFFFFF!;">
  <div class="container">
    <a class="navbar-brand font-weight-bold" href="https://techarise.com"><h1>Tech Arise</h1></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link" href="https://techarise.com">Home
                <span class="sr-only">(current)</span>
              </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="https://techarise.com/php-free-script-demos/">Live Demo</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<?php

defined('BASEPATH') OR exit('No direct script access allowed');

<!DOCTYPE html>

<head>

</head>

<body>

<a class="navbar-brand font-weight-bold" href="https://techarise.com"><h1>Tech Arise</h1></a>

</button>

<a class="nav-link" href="https://techarise.com">Home

<span class="sr-only">(current)</span>

</a>

</li>

</li>

</ul>

</div>

</nav>

Step 5: Create a view(footer)

Create a view file named footer.php inside “application/views/templates” folder.

This view contains the footer section of the webpage.

  <!-- Footer -->
  <footer class="footer bg-light footer-bg-dark">
    <div class="container">
      <div class="row">
        <div class="col-lg-6 h-100 text-center text-lg-left my-auto">
          <ul class="list-inline mb-2">
            <li class="list-inline-item">
              <a href="#">About</a>
            </li>
            <li class="list-inline-item">&sdot;</li>
            <li class="list-inline-item">
              <a href="#">Contact</a>
            </li>
            <li class="list-inline-item">&sdot;</li>
            <li class="list-inline-item">
              <a href="#">Terms of Use</a>
            </li>
            <li class="list-inline-item">&sdot;</li>
            <li class="list-inline-item">
              <a href="#">Privacy Policy</a>
            </li>
          </ul>
          <p class="text-muted small mb-4 mb-lg-0">Copyright &copy;  2011 - <?php print date('Y', time());?> <a href="https://techarise.com/">TECHARISE.COM</a> All rights reserved.</p>
        </div>
        <div class="col-lg-6 h-100 text-center text-lg-right my-auto">
          <ul class="list-inline mb-0">
            <li class="list-inline-item mr-3">
              <a href="#">
                <i class="fab fa-facebook fa-2x fa-fw"></i>
              </a>
            </li>
            <li class="list-inline-item mr-3">
              <a href="#">
                <i class="fab fa-twitter-square fa-2x fa-fw"></i>
              </a>
            </li>
            <li class="list-inline-item">
              <a href="#">
                <i class="fab fa-instagram fa-2x fa-fw"></i>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </footer>
  <script>
    var baseurl = "";
  </script>
  <!-- Bootstrap core JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>  
  <script src='<?php print HTTP_PATH_CALENDAR; ?>core/main.js'></script>
  <script src='<?php print HTTP_PATH_CALENDAR; ?>interaction/main.js'></script>
  <script src='<?php print HTTP_PATH_CALENDAR; ?>moment/main.js'></script>
  <script src='<?php print HTTP_PATH_CALENDAR; ?>moment-timezone/main.js'></script>
  <script src='<?php print HTTP_PATH_CALENDAR; ?>daygrid/main.js'></script>
  <script src='<?php print HTTP_PATH_CALENDAR; ?>timegrid/main.js'></script>
  <script src='<?php print HTTP_PATH_CALENDAR; ?>list/main.js'></script>
  <script src='<?php print HTTP_PATH_CALENDAR; ?>google-calendar/main.js'></script>
</body>
</html>

<a href="#">About</a>

</li>

<a href="#">Contact</a>

</li>

<a href="#">Terms of Use</a>

</li>

<a href="#">Privacy Policy</a>

</li>

</ul>

</div>

</a>

</li>

</a>

</li>

</a>

</li>

</ul>

</div>

</footer>

var baseurl = "";

</script>

</body>

</html>

Step 6: Create views

Create a views file named index.php inside “application/views/calendar folder.

<?php $this->load->view('templates/header');?>
<style type="text/css">
  .fc-sun { color:red;  }
  .fc-ltr .fc-dayGrid-view .fc-day-top .fc-day-number {
    float: none;
  }
  .fc-day-top { text-align: center!important; }
</style>
<section class="showcase">
  <div class="container">
    <div class="pb-2 mt-4 mb-2 border-bottom">
      <h2>Integrate FullCalendar in Codeigniter and jQuery</h2>
    </div>
    <div class="row">       
      <div class="col-md-12 gedf-main">
        <span id="loading">Loading...</span>
        <span id="load-calendar"></span>
      </div>       
    </div>
  </div>
</section>
<?php $this->load->view('templates/footer');?>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('load-calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
    // load plugins
    plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list', 'googleCalendar', 'momentTimezonePlugin', 'momentPlugin'],  
    firstDay: 1,
    locale: 'en',  
    timeZone: 'local',  
    editable: true,
    selectable: true,
    selectHelper: true,
    displayEventTime: true, // don't show the time column in list view
    buttonIcons: true, // show the prev/next text
    weekNumbers: false,
    navLinks: true, // can click day/week names to navigate views
    editable: true,
    eventLimit: true, // allow "more" link when too many events
    // calendar header
    header: {
      left: 'prevYear, prev,next, nextYear, today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
    },
    // change button text
    buttonText: {
      today: "Today",  
      month: "Month",
      week: "Week",
      day : "Day",
      listMonth: 'List'
    },
    // THIS KEY WON'T WORK IN PRODUCTION!!!
    // To make your own Google API key, follow the directions here:
    // http://fullcalendar.io/docs/google_calendar/
    googleCalendarApiKey: 'AIzaSyCn2Ko4rxGsf4PudP-NWAVRdvpQdnJf6DU',
    // US Holidays
    eventSources: [
        {
            url: "en.indian#holiday@group.v.calendar.google.com",
            dataType : 'jsonp',
            className: 'feed_one'
        },
        {
            url: "<?php echo base_url();?>event/loadEventData",
            dataType : 'jsonp',
            className: 'feed_two',  
          }
    ],
    
    loading: function(bool) {
      document.getElementById('loading').style.display =
        bool ? 'block' : 'none';
    },

    });

    calendar.render();
  });
</script>

<?php $this->load->view('templates/header');?>

.fc-sun { color:red; }

.fc-ltr .fc-dayGrid-view .fc-day-top .fc-day-number {

float: none;

}

.fc-day-top { text-align: center!important; }

</style>

<h2>Integrate FullCalendar in Codeigniter and jQuery</h2>

</div>

<span id="loading">Loading...</span>

</div>

</section>

<?php $this->load->view('templates/footer');?>

document.addEventListener('DOMContentLoaded', function() {

var calendarEl = document.getElementById('load-calendar');

var calendar = new FullCalendar.Calendar(calendarEl, {

// load plugins

plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list', 'googleCalendar', 'momentTimezonePlugin', 'momentPlugin'],

firstDay: 1,

locale: 'en',

timeZone: 'local',

editable: true,

selectable: true,

selectHelper: true,

displayEventTime: true, // don't show the time column in list view

buttonIcons: true, // show the prev/next text

weekNumbers: false,

navLinks: true, // can click day/week names to navigate views

editable: true,

eventLimit: true, // allow "more" link when too many events

// calendar header

header: {

left: 'prevYear, prev,next, nextYear, today',

center: 'title',

right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'

// change button text

buttonText: {

today: "Today",

month: "Month",

week: "Week",

day : "Day",

listMonth: 'List'

// THIS KEY WON'T WORK IN PRODUCTION!!!

// To make your own Google API key, follow the directions here:

// http://fullcalendar.io/docs/google_calendar/

googleCalendarApiKey: 'AIzaSyCn2Ko4rxGsf4PudP-NWAVRdvpQdnJf6DU',

// US Holidays

eventSources: [

{

url: "en.indian#holiday@group.v.calendar.google.com",

dataType : 'jsonp',

className: 'feed_one'

{

url: "<?php echo base_url();?>event/loadEventData",

dataType : 'jsonp',

className: 'feed_two',

}

loading: function(bool) {

document.getElementById('loading').style.display =

bool ? 'block' : 'none';

});

calendar.render();

});

</script>

Step 7: Load Calendar

We will also need to use jQuery code in views index.php in "application/views/calendar" directory to load calendar data

 <script>
  document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('load-calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
    // load plugins
    plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list', 'googleCalendar', 'momentTimezonePlugin', 'momentPlugin'],  
    firstDay: 1,
    locale: 'en',  
    timeZone: 'local',  
    editable: true,
    selectable: true,
    selectHelper: true,
    displayEventTime: true, // don't show the time column in list view
    buttonIcons: true, // show the prev/next text
    weekNumbers: false,
    navLinks: true, // can click day/week names to navigate views
    editable: true,
    eventLimit: true, // allow "more" link when too many events
    // calendar header
    header: {
      left: 'prevYear, prev,next, nextYear, today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
    },
    // change button text
    buttonText: {
      today: "Today",  
      month: "Month",
      week: "Week",
      day : "Day",
      listMonth: 'List'
    },
    // THIS KEY WON'T WORK IN PRODUCTION!!!
    // To make your own Google API key, follow the directions here:
    // http://fullcalendar.io/docs/google_calendar/
    googleCalendarApiKey: 'AIzaSyCn2Ko4rxGsf4PudP-NWAVRdvpQdnJf6DU',
    // US Holidays
    eventSources: [
        {
            url: "en.indian#holiday@group.v.calendar.google.com",
            dataType : 'jsonp',
            className: 'feed_one'
        },
        {
            url: "<?php echo base_url();?>event/loadEventData",
            dataType : 'jsonp',
            className: 'feed_two',  
          }
    ],
    
    loading: function(bool) {
      document.getElementById('loading').style.display =
        bool ? 'block' : 'none';
    },

    });

    calendar.render();
  });
</script>

document.addEventListener('DOMContentLoaded', function() {

var calendarEl = document.getElementById('load-calendar');

var calendar = new FullCalendar.Calendar(calendarEl, {

// load plugins

plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list', 'googleCalendar', 'momentTimezonePlugin', 'momentPlugin'],

firstDay: 1,

locale: 'en',

timeZone: 'local',

editable: true,

selectable: true,

selectHelper: true,

displayEventTime: true, // don't show the time column in list view

buttonIcons: true, // show the prev/next text

weekNumbers: false,

navLinks: true, // can click day/week names to navigate views

editable: true,

eventLimit: true, // allow "more" link when too many events

// calendar header

header: {

left: 'prevYear, prev,next, nextYear, today',

center: 'title',

right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'

// change button text

buttonText: {

today: "Today",

month: "Month",

week: "Week",

day : "Day",

listMonth: 'List'

// THIS KEY WON'T WORK IN PRODUCTION!!!

// To make your own Google API key, follow the directions here:

// http://fullcalendar.io/docs/google_calendar/

googleCalendarApiKey: 'AIzaSyCn2Ko4rxGsf4PudP-NWAVRdvpQdnJf6DU',

// US Holidays

eventSources: [

{

url: "en.indian#holiday@group.v.calendar.google.com",

dataType : 'jsonp',

className: 'feed_one'

{

url: "<?php echo base_url();?>event/loadEventData",

dataType : 'jsonp',

className: 'feed_two',

}

loading: function(bool) {

document.getElementById('loading').style.display =

bool ? 'block' : 'none';

});

calendar.render();

});

</script>

Also Read : Implement Calendar in CodeIgniter

Demo Download