The example, Bootstrap Calendar Events Demo using Codeigniter, will show you how we 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 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

Knowledge of PHP
Codeigniter 3.1.9
XAMPP on Windows

Let’s move on to the example Bootstrap Calendar Events demo using Codeigniter 3.1.9 …

Creating 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.

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;

Storing sample event information into above table

To make the example Bootstrap Calendar Events Demo using Codeigniter workable, we 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','2018-09-10 20:00:00','2018-09-10 20:01:02'),
(2,'Jee Tutorials','https://www.jeejava.com','event-important','2018-09-11 19:00:00','2018-09-12 19:42:45'),
(3,'Roy Tutorial','https://www.roytuts.com','event-info','2018-09-12 20:03:05','2018-09-13 08:45:53');

Setting up Codeigniter configurations

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

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

Autoload few things required for the application to work:

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

Creating 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
	}
	
	...
]

Creating 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 we are loading the model class inside constructor then we have defined two methods – one is for showing view page and another one for loading data from MySQL table.

After fetching data we convert into appropriate JSON format as required by bootstrap calendar plugin. If no data found then we 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'));
		}
	}
}

Creating view file

Create below view file with the following source code. In the head section, we have added the required css files for view page. In the body of the page we 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 we added required JavaScript files and calendar setup options. We 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/ci-3-1-9/index.php/eventcalendar/load_data',
				view: 'month',
				tmpl_path: 'http://localhost/ci-3-1-9/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 the default route

Change the default route and update as follows:

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

Testing the application

Now after doing so much hard work, it’s time to see the live on browser how it looks like.

When you are on 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 new 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 page for creating/updating events.

Thanks for reading.

I am a professional Web developer, Enterprise Application developer, Software Engineer and Blogger. Connect me on JEE Tutorials | TwitterFacebook Google PlusLinkedin | Reddit

Leave a Reply

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