Codeigniter Fullcalendar Example

Codeigniter Fullcalendar Example

tutorials -

Hi Guys,

Today, we will learn how to integrate full calendar library in codeigniter 3 application. i will give you example step by step to create event, select time slot etc and save into database using full calendar.

A fullcalendar is a open source jquery library and that provide to create event in calendar and you can easily customize library event. fullcalendar also provide drag and drop event calendar with responsive.

In this example, we will create "events" table with title, start_date and end_date. We will store data manually on that table and then display all events form database dynamically. So you have to just follow few step and get layout like as bellow screen shot.


Step 1: Create events Table

In first table we must have one table with some dummy records. For this example i will create "events" table and dummy records as like bellow query:

events table



`title` varchar(255) NOT NULL,

`start_date` date NOT NULL,

`end_date` date NOT NULL,



Step 2: Make database configuration

in second step, we will add database details like username, password and database name. so you can do it from here.



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

$active_group = 'default';

$query_builder = TRUE;

$db['default'] = array(

'dsn' => '',

'hostname' => 'localhost',

'username' => 'root',

'password' => 'root',

'database' => 'test',

'dbdriver' => 'mysqli',

'dbprefix' => '',

'pconnect' => FALSE,

'db_debug' => (ENVIRONMENT !== 'production'),

'cache_on' => FALSE,

'cachedir' => '',

'char_set' => 'utf8',

'dbcollat' => 'utf8_general_ci',

'swap_pre' => '',

'encrypt' => FALSE,

'compress' => FALSE,

'stricton' => FALSE,

'failover' => array(),

'save_queries' => TRUE


Step 3: Create Route

Here, we will create one route for display full calendar with events. so open routes.php file and add code like as bellow:



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

$route['my-calendar'] = "CaledarController";

Step 4: Create Controller:

Here, we need to create CaledarController with index() method. I write creating zip file code and download code on index(). Let's just create it.



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

class CaledarController extends CI_Controller {


* Get All Data from this method.


* @return Response


public function __construct() {





* Get All Data from this method.


* @return Response


public function index()


$data['result'] = $this->db->get("events")->result();

foreach ($data['result'] as $key => $value) {

$data['data'][$key]['title'] = $value->title;

$data['data'][$key]['start'] = $value->start_date;

$data['data'][$key]['end'] = $value->end_date;

$data['data'][$key]['backgroundColor'] = "#00a65a";


$this->load->view('my_calendar', $data);



Step 5: Create View File

In last step, we have to create view file, we will create new view file "my_calendar.php" on views folder and put bellow code on that file.


<!DOCTYPE html>




<link rel="stylesheet" href="" />

<script src=""></script>

<link rel="stylesheet" href="" />

<script src=""></script>

<script src=""></script>



<div class="container">

<h1>Codeigniter Fullcalendar example -</h1>

<div class="row" style="width:50%">

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

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




<script type="text/javascript">

var events = <?php echo json_encode($data) ?>;

var date = new Date()

var d = date.getDate(),

m = date.getMonth(),

y = date.getFullYear()


header : {

left : 'prev,next today',

center: 'title',

right : 'month,agendaWeek,agendaDay'


buttonText: {

today: 'today',

month: 'month',

week : 'week',

day : 'day'


events : events





Now it's all done steps.

You can check example and enjoy.

I hope it can help you...

Trending On Tutorial Stuff

Our Sponsors

Top Applications in Tutorial Stuff

Top Experts In Tutorial Stuff