Codeigniter Fullcalendar Example Tutorial From Scratch
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
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.
Related FAQ
Here are some more FAQ related to this Article: