Bootstrap Calendar Events Demo Using Codeigniter

Calendar

The example, Bootstrap Calendar Events Demo using Codeigniter 3, will show you how you can show different events set by users on a calendar. It helps users to track easily what all upcoming events are or past events were there by navigating through the calendar dates.

Bootstrap Calendar is a reusable jQuery plugin that makes it easier to create an AJAX-enabled, template-based, full-view event calendar for your web applications. I have used here bootstrap calendar events demo to make it work with Codeigniter 3 from the link.

Prerequisites

Codeigniter 3.1.9 – 3.1.11
PHP 7.0.15 – 7.4.27, Apache 2.4 (Optional), MySQL 5.x – 8.x

Project Directory

It’s assumed that you have setup PHP and Codeigniter in Windows system.

Now I will create a project root directory called codeigniter-bootstrap-calendar-events-demo anywhere in the physical drive.

Now move all the directories and files from CodeIgniter framework into codeigniter-bootstrap-calendar-events-demo directory.

I may not mention the project root directory in subsequent sections and I will assume that I am talking with respect to the project root directory.

You need to create assets folder in parallel to application folder for putting all asset files such as js, css, images etc.

MySQL table

Create a table called event in the MySQL database using the following structure. The following table has id, title, url, class, start and end dates. When you store event information you must store all fields values. For end_date field you must have non-zero value.

For MySQL version 8.x, use the following structure:

CREATE TABLE `event` (
  `id` int unsigned COLLATE utf8mb4_unicode_ci NOT NULL AUTO_INCREMENT,
  `title` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
  `url` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
  `class` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
  `start_date` timestamp COLLATE utf8mb4_unicode_ci NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  `end_date` timestamp COLLATE utf8mb4_unicode_ci NOT NULL DEFAULT '0000-00-00 00:00:00',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

For MySQL version 5.x, use the following structure:

CREATE TABLE `event` (
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `title` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  `url` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  `class` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  `start_date` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  `end_date` timestamp NOT NULL DEFAULT '0000-00-00 00:00:00',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

To make the example Bootstrap Calendar Events Demo using Codeigniter workable, I have added few rows into table:

insert  into `event`(`id`,`title`,`url`,`class`,`start_date`,`end_date`) values 
(1,'Example','http://www.example.com','event-sucess','2022-09-10 20:00:00','2022-09-10 20:01:02'),
(2,'Jee Tutorials','https://roytuts.com','event-important','2022-09-11 19:00:00','2022-09-12 19:42:45'),
(3,'Roy Tutorial','https://roytuts.com','event-info','2022-09-12 20:03:05','2022-09-13 08:45:53');

Database

Make sure you have the similar to the following connection for your database:

...
'hostname' => 'localhost',
'username' => 'root',
'password' => 'root',
'database' => 'roytuts',
'dbdriver' => 'mysqli',
...

Auto-Load Configurations

Autoload few things required for the application to work. You can also load them when required but if you load them using configuration then it’s an one time activity and you can use wherever you want.

$autoload['libraries'] = array('database', 'table');
$autoload['helper'] = array('url', 'file', 'text', 'form');

Model Class

Create below Codeigniter model class that will fetch data from database table:

<?php

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

class EventCalendar_model extends CI_Model {

    private $event = 'event';
	
	function get_event_list() {
		$this->db->select("id, title, url, class, UNIX_TIMESTAMP(start_date)*1000 as start, UNIX_TIMESTAMP(end_date)*1000 as end");
        $query = $this->db->get($this->event);
        if ($query) {
            return $query->result();
        }
        return NULL;
    }

}

In the above class I am retrieving timestamp values in seconds using UNIX_TIMESTAMP() function and converting them to milliseconds as it is required by the bootstrap calendar plugin. Also notice that I have put alias for date fields as the bootstrap calendar plugin requires following structure:

[
	...
	
	{
		"id": 293,
		"title": "Event 1",
		"url": "http://example.com",
		"class": "event-important",
		"start": 12039485678000, // Milliseconds
		"end": 1234576967000 // Milliseconds
	}
	
	...
]

Controller Class

Create below Codeigniter controller class that will communicate with Model class as well as handles request/response from clients.

As usual in the below class, I am loading the model class inside constructor then I have defined two methods – one is for showing view page and another one for loading data from MySQL table.

Related Posts:

After fetching data I convert into appropriate JSON format as required by bootstrap calendar plugin. If no data found then I send response as ‘Event not found’.

<?php

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

class EventCalendar extends CI_Controller {
	
	function __construct() {
            parent::__construct();
            $this->load->model('eventcalendar_model', 'em');
        }

	public function index() {
		$this->load->view('calendar_event');
	}
	
	public function load_data() {
		$events = $this->em->get_event_list();
		if($events !== NULL) {
			echo json_encode(array('success' => 1, 'result' => $events));
		} else {
			echo json_encode(array('success' => 0, 'error' => 'Event not found'));
		}
	}
}

View Files

Create below view file with the following source code. In the head section, I have added the required css files for view page. In the body of the page I have put different navigation controls for the calendar.

You do have also checkboxes for showing week box and week number. You can also change the data format as 12 hours format. You also have the option for seeing events in modal windows.

Then you have div area for defining modal window, which will be shown when a user clicks on even link with ‘Open events in modal window’ checkbox selected.

Next I added required JavaScript files and calendar setup options. I set the event_source link and bootstrap calendar template paths. You can download all required css and js files from the given link below.

<!DOCTYPE html>
<html>
<head>
	<title>Bootstrap Calendar Events Demo using Codeigniter</title>
	<meta charset="UTF-8">

	<link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/bootstrap.css">
	<link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/bootstrap-responsive.css">
	<link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/calendar.css">
</head>
<body>
<div class="container">
	<div>
		<h4>Bootstrap Calendar Events Demo using Codeigniter</h4>
	</div>

	<div class="page-header">

		<div class="pull-right form-inline">
			<div class="btn-group">
				<button class="btn btn-primary" data-calendar-nav="prev"><< Prev</button>
				<button class="btn" data-calendar-nav="today">Today</button>
				<button class="btn btn-primary" data-calendar-nav="next">Next >></button>
			</div>
			<div class="btn-group">
				<button class="btn btn-warning" data-calendar-view="year">Year</button>
				<button class="btn btn-warning active" data-calendar-view="month">Month</button>
				<button class="btn btn-warning" data-calendar-view="week">Week</button>
				<button class="btn btn-warning" data-calendar-view="day">Day</button>
			</div>
		</div>

		<h3></h3>
	</div>

	<div class="row">
		<div class="span9">
			<div id="calendar"></div>
		</div>
		<div class="span3">
			<div class="row-fluid">
				<select id="first_day" class="span12">
					<option value="" selected="selected">First day of week is Sunday</option>
					<option value="1">First day of week is Monday</option>
				</select>
				<label class="checkbox">
					<input type="checkbox" value="#events-modal" id="events-in-modal"> Open events in modal window
				</label>
				<label class="checkbox">
					<input type="checkbox" id="format-12-hours"> 12 Hour format
				</label>
				<label class="checkbox">
					<input type="checkbox" id="show_wb" checked> Show week box
				</label>
				<label class="checkbox">
					<input type="checkbox" id="show_wbn" checked> Show week box number
				</label>
			</div>
		</div>
	</div>

	<div class="clearfix"></div>
	<br><br>

	<div class="modal hide fade" id="events-modal">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
			<h3>Event</h3>
		</div>
		<div class="modal-body" style="height: 400px">
		</div>
		<div class="modal-footer">
			<a href="#" data-dismiss="modal" class="btn">Close</a>
		</div>
	</div>

	<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/jquery.min.js"></script>
	<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/underscore-min.js"></script>
	<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/calendar.min.js"></script>
	<script>
		(function($) {
			"use strict";
			var options = {
				events_source: 'http://localhost/eventcalendar/load_data',
				view: 'month',
				tmpl_path: 'http://localhost/assets/tmpls/',
				tmpl_cache: false,
				onAfterViewLoad: function(view) {
					$('.page-header h3').text(this.getTitle());
					$('.btn-group button').removeClass('active');
					$('button[data-calendar-view="' + view + '"]').addClass('active');
				},
				classes: {
					months: {
						general: 'label'
					}
				}
			};

			var calendar = $('#calendar').calendar(options);

			$('.btn-group button[data-calendar-nav]').each(function(){
				var $this = $(this);
				$this.click(function() {
					calendar.navigate($this.data('calendar-nav'));
				});
			});

			$('.btn-group button[data-calendar-view]').each(function(){
				var $this = $(this);
				$this.click(function() {
					calendar.view($this.data('calendar-view'));
				});
			});

			$('#first_day').change(function(){
				var value = $(this).val();
				value = value.length ? parseInt(value) : null;
				calendar.setOptions({first_day: value});
				calendar.view();
			});

			$('#events-in-modal').change(function(){
				var val = $(this).is(':checked') ? $(this).val() : null;
				calendar.setOptions({modal: val});
			});
			$('#format-12-hours').change(function(){
				var val = $(this).is(':checked') ? true : false;
				calendar.setOptions({format12: val});
				calendar.view();
			});
			$('#show_wbn').change(function(){
				var val = $(this).is(':checked') ? true : false;
				calendar.setOptions({display_week_numbers: val});
				calendar.view();
			});
			$('#show_wb').change(function(){
				var val = $(this).is(':checked') ? true : false;
				calendar.setOptions({weekbox: val});
				calendar.view();
			});
			$('#events-modal .modal-header, #events-modal .modal-footer').click(function(e){
				//e.preventDefault();
				//e.stopPropagation();
			});
		}(jQuery));
	</script>
</div>
</body>
</html>

Download assets Directory

Download the assets directory assets. Unzip and put this assets directory under your root directory of project.

Changing Route

Change the default route and update as follows:

$route['default_controller'] = 'eventcalendar';

Testing Bootestrap Calendar Events

The home page, you should see the similar page on your browser:

Bootstrap Calendar Events Demo using Codeigniter

When you click on the colorful rounded circle on the event links then you will be redirected to the appropriate URL page.

When you mouse hover on the calendar date then you see the week box with week number.

Bootstrap Calendar Events Demo using Codeigniter

When you select the checkbox for Open events in modal window and click on the event link you will see it in modal popup/window.

Bootstrap Calendar Events Demo using Codeigniter

That’s all. Hope you got idea on Bootstrap Calendar Events Demo using Codeigniter.

You can improve the example by giving users options for creating/updating events.

Source Code

Download

4 thoughts on “Bootstrap Calendar Events Demo Using Codeigniter

  1. hello
    At first, the calendar was not showing then I noticed that in the css link, calender.css is used, whereas calendar.min.css exists in the access folder. Correcting this made it display.
    WORKS JUST GREAT

  2. SOLVED! error content decoding failed 200
    Disabled Compression : Codeigniter

    $config[‘compress_output’] = FALSE;

    It works

Leave a Reply

Your email address will not be published. Required fields are marked *