Codeigniter Fullcalendar Example Tutorial From Scratch

Rate this post

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

Free Live Chat for Any Issue

full calendar codeigniter Configuration of the database

Read Also:  Upload video files Images using PHP mysql

<?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 :

Read Also:  How to Count Number of Files in directory PHP?

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

Download

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.