November 5, 2023
Category : Codeigniter
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
Read Also: How to Change Date Format in Codeigniter?
<!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...
Hardik Savani
I'm a full-stack developer, entrepreneur and owner of ItSolutionstuff.com. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Laravel, Angular, Vue, Node, Javascript, JQuery, Codeigniter and Bootstrap from the early stage. I believe in Hardworking and Consistency.
We are Recommending you
- How to Get Last Executed Query in Codeigniter?
- Codeigniter Create Dynamic Tree View using Treeview JS
- Codeigniter Google Recaptcha Form Validation Example
- Codeigniter Ajax Pagination using JQuery Example
- Codeigniter Delete Multiple Rows using Checkbox Example
- How to Create Dynamic Sitemap in Codeigniter?
- How to implement and use DataTables in CodeIgniter?
- Codeigniter Resize Image and Create Thumbnail Example
- Codeigniter Ajax Form Validation Example
- Codeigniter 3 - Basic CRUD application with MySQL Example with Demo
- Codeigniter Drag and Drop Multiple Image Upload Example
- Codeigniter Ajax CRUD Tutorial Example
- Codeigniter Select2 Ajax Autocomplete from Database Example
- Codeigniter 3 and AngularJS CRUD with Search and Pagination Example.
;void(0);){kind=link}
;void(0);){kind=link}