Codeigniter Fullcalendar Example

In this post we will give you information about Codeigniter Fullcalendar Example. Hear we will give you detail about Codeigniter Fullcalendar ExampleAnd how to use it also give you demo for it if it is necessary.

Hi Guys,

Today, we will learn how to integrate full calendar library in codeigniter 3 application. i will give you example step by step to create event, select time slot etc and save into database using full calendar.

A fullcalendar is a open source jquery library and that provide to create event in calendar and you can easily customize library event. fullcalendar also provide drag and drop event calendar with responsive.

In this example, we will create “events” table with title, start_date and end_date. We will store data manually on that table and then display all events form database dynamically. So you have to just follow few step and get layout like as bellow screen shot.

Preview:

Step 1: Create events Table

In first table we must have one table with some dummy records. For this example i will create “events” table and dummy records as like bellow query:

events table

CREATE TABLE IF NOT EXISTS 'events' (
  'id' int(11) NOT NULL AUTO_INCREMENT,
  'title' varchar(255) NOT NULL,
  'start_date' date NOT NULL,
  'end_date' date NOT NULL,
  PRIMARY KEY ('id')
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ;

Step 2: Make database configuration

in second step, we will add database details like username, password and database name. so you can do it from here.

application/config/database.php

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

$active_group = 'default';
$query_builder = TRUE;

$db['default'] = array(
	'dsn'	=> '',
	'hostname' => 'localhost',
	'username' => 'root',
	'password' => 'root',
	'database' => 'test',
	'dbdriver' => 'mysqli',
	'dbprefix' => '',
	'pconnect' => FALSE,
	'db_debug' => (ENVIRONMENT !== 'production'),
	'cache_on' => FALSE,
	'cachedir' => '',
	'char_set' => 'utf8',
	'dbcollat' => 'utf8_general_ci',
	'swap_pre' => '',
	'encrypt' => FALSE,
	'compress' => FALSE,
	'stricton' => FALSE,
	'failover' => array(),
	'save_queries' => TRUE
);

Also see:Codeigniter 3 and AngularJS CRUD with Search and Pagination Example.

Step 3: Create Route

Here, we will create one route for display full calendar with events. so open routes.php file and add code like as bellow:

application/config/routes.php

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

$route['my-calendar'] = "CaledarController";

Step 4: Create Controller:

Here, we need to create CaledarController with index() method. I write creating zip file code and download code on index(). Let’s just create it.

application/controllers/CaledarController.php

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class CaledarController extends CI_Controller {
    /**
     * Get All Data from this method.
     *
     * @return Response
    */
    public function __construct() {
       parent::__construct();
       $this->load->database();
    }
    /**
     * Get All Data from this method.
     *
     * @return Response
    */
    public function index()
    {
        $data['result'] = $this->db->get("events")->result();
        foreach ($data['result'] as $key => $value) {
            $data['data'][$key]['title'] = $value->title;
            $data['data'][$key]['start'] = $value->start_date;
            $data['data'][$key]['end'] = $value->end_date;
            $data['data'][$key]['backgroundColor'] = "#00a65a";
        }
        $this->load->view('my_calendar', $data);
    }
}

Step 5: Create View File

In last step, we have to create view file, we will create new view file “my_calendar.php” on views folder and put bellow code on that file.

application/views/my_calendar.php

Also see:How to Delete Multiple Rows using Checkbox in Codeigniter 3?

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
</head>
<body>
<div >
    <h1>Codeigniter Fullcalendar example - ItSolutionStuff.com</h1>
    <div  style="width:50%">
       <div >
           <div id="calendar"></div>
       </div>
    </div>
</div>
<script type="text/javascript">
    var events = <?php echo json_encode($data) ?>;
    var date = new Date()
    var d    = date.getDate(),
        m    = date.getMonth(),
        y    = date.getFullYear()
    $('#calendar').fullCalendar({
      header    : {
        left  : 'prev,next today',
        center: 'title',
        right : 'month,agendaWeek,agendaDay'
      },
      buttonText: {
        today: 'today',
        month: 'month',
        week : 'week',
        day  : 'day'
      },
      events    : events
    })
</script>
</body>
</html>

Now it’s all done steps.

You can check example and enjoy.

I hope it can help you…

Hope this code and post will helped you for implement Codeigniter Fullcalendar Example. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Codeigniter Fullcalendar Example

Leave a Comment Cancel Reply