Codeigniter Fullcalendar Example Tutorial From Scratch

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.

  Send Windows Push Notification Services using PHP

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

  Increment Decrement with Laravel 6 Example

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 :

  Retrieve Multiple Checkbox Selected Options using VueJS

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.

Leave a Reply

avatar
  Subscribe  
Notify of