Codeigniter Fullcalendar Example

By Hardik Savani | October 10, 2018 | | 4497 Viewer | Category : PHP jQuery MySql Codeigniter


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.

Preview:

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

CREATE TABLE IF NOT EXISTS `events` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`title` varchar(255) NOT NULL,

`start_date` date NOT NULL,

`end_date` date NOT NULL,

PRIMARY KEY (`id`)

) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ;

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.

application/config/database.php

<?php

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:

application/config/routes.php

<?php

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.

application/controllers/CaledarController.php

<?php

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() {

parent::__construct();

$this->load->database();

}

/**

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

application/views/my_calendar.php

<!DOCTYPE html>

<html>

<head>

<title></title>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>

</head>

<body>

<div class="container">

<h1>Codeigniter Fullcalendar example - ItSolutionStuff.com</h1>

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

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

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

</div>

</div>

</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()

$('#calendar').fullCalendar({

header : {

left : 'prev,next today',

center: 'title',

right : 'month,agendaWeek,agendaDay'

},

buttonText: {

today: 'today',

month: 'month',

week : 'week',

day : 'day'

},

events : events

})

</script>

</body>

</html>

Now it's all done steps.

You can check example and enjoy.

I hope it can help you...




***Do you want me hire for your Project Work? Then Contact US.


We are Recommending you: