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:

  1.   Laravel Soft Delete Example Tutorial From Scratch
  2.   Laravel 7 User Login Authentication From Scratch
  3.   Retrieve last insert id by Eloquent in Laravel 6
  4.   Woocommerce get price in custom loop
  5.   Woocommerce Featured Image URL and Gallery images in Wordpress
  6.   Laravel Dropzonejs Multiple File Upload using jQuery
  7.   Transpose of a matrix in Java Program
  8.   VueJS form v-on:submit example - Form Submit VueJS
  9.   How to Solve Error call to a member function toArray() on null?
  10.   Top 10 Great Cloud Storage File Sharing Services