Codeigniter Implement Fullcalendar Example Tutorial
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...
