Today, We want to share with you Codeigniter Fullcalendar Example Tutorial From Scratch.In this post we will show you Fullcalendar with PHP and CodeIgniter, hear for How to integrate jQuery Fullcalendar using Codeigniter and MySQL
we will give you demo and example for implement.In this post, we will learn about Fullcalendar with PHP and CodeIgniter – Database Events with an example.
Codeigniter Fullcalendar Example Tutorial From Scratch
Contents
There are the Following The simple About Codeigniter Fullcalendar Example Tutorial From Scratch Full Information With Example and source code.
As I will cover this Post with live Working example to develop Fullcalendar Jquery Codeigniter, so the codeigniter calendar multiple events for this example is following below.
Step 1: Codeigniter Generate events Table
events table
codeigniter full calendar tutorial
CREATE TABLE IF NOT EXISTS `events` ( `id` int(11) NOT NULL AUTO_INCREMENT, `title` varchar(255) NOT NULL, `to_events_date` date NOT NULL, `from_events_date` date NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ;
Step 2: Create Codeigniter database Settings
application/config/database.php
full calendar codeigniter Configuration of the database
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
$active_group = 'default';
$query_builder = TRUE; //boolean true or false
$db['default'] = array(
'dsn' => '',
'hostname' => 'localhost',
'username' => 'root',
'password' => 'My_SET_PASS',
'database' => 'pakainfo',
'dbdriver' => 'mysqli', // Database type
'dbprefix' => '',
'pconnect' => FALSE, //boolean true or false
'db_debug' => (ENVIRONMENT !== 'production'), //mode
'cache_on' => FALSE, //boolean true or false
'cachedir' => '',
'char_set' => 'utf8',
'dbcollat' => 'utf8_general_ci',
'swap_pre' => '',
'encrypt' => FALSE, //boolean true or false
'compress' => FALSE, //boolean true or false
'stricton' => FALSE, //boolean true or false
'failover' => array(),
'save_queries' => TRUE //boolean true or false
);
Step 3: Define a Codeigniter Route
application/config/routes.php
fullcalendar events codeigniter Route
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
$route['live-calendar'] = "LiveCalcController";
Step 4: Make a Codeigniter Controller:
application/controllers/LiveCalcController.php
codeigniter Controller event calendar example
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class LiveCalcController extends CI_Controller {
public function __construct() {
parent::__construct();
$this->load->database();
}
public function index()
{
$allEvents['result'] = $this->db->get("events")->result();
foreach ($allEvents['result'] as $key => $value) {
$allEvents['allEvents'][$key]['title'] = $value->title;
$allEvents['allEvents'][$key]['start'] = $value->to_events_date;
$allEvents['allEvents'][$key]['end'] = $value->from_events_date;
$allEvents['allEvents'][$key]['backgroundColor'] = "#00a65a";
}
$this->load->view('live_ci_calender', $allEvents);
}
}
Step 5: Make a Codeigniter View File
application/views/live_ci_calender.php
<!DOCTYPE html>
<html>
<head>
<title>Codeigniter Fullcalendar Example Tutorial From Scratch</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<! -- Include jquery version of the 3.3.1 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<! -- Include fullCalendar 3.9.0 version of the 3.3.1 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css" />
<! -- Include moment js version of the 2.22.2 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<! -- Include fullCalendar jquery version of the 3.9.0 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
</head>
<body>
<div class="pakainfo container">
<h1>Codeigniter Fullcalendar example - pakainfo.com</h1>
<div class="pakainfo row" style="width:60%">
<div class="pakainfo col-md-12">
<div id="live-calendar"></div>
</div>
</div>
</div>
<script type="text/javascript">
//jquery full calendar codeigniter
var events = <?php echo json_encode($allEvents) ?>;
var date = new Date()
var d = date.getDate(),
m = date.getMonth(),
y = date.getFullYear()
// jquery events handaling
$('#live-calendar').fullCalendar({
header : {
left : 'prev,next today', // filter data
center: 'title',
right : 'month,agendaWeek,agendaDay'
},
buttonText: {
today: 'today', //button Label
month: 'month', //button Label
week : 'week', //button Label
day : 'day' //button Label
},
events : events
})
</script>
</body>
</html>
Angular 6 CRUD Operations Application Tutorials
Read :
Summary
You can also read about AngularJS, ASP.NET, VueJs, PHP.
I hope you get an idea about Codeigniter Fullcalendar Example Tutorial From Scratch.
I would like to have feedback on my Pakainfo.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, donβt forget to share.
I am Jaydeep Gondaliya , a software engineer, the founder and the person running Pakainfo. I’m a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS and Bootstrap from the early stage.