How to Create Event Calendar with jQuery, PHP, and MySQL

Today, We will learn How to Create an Event Calendar with jQuery, PHP, and MySQL. Read: How To Create Multi-Step Form Progress Bar JQuery, Bootstrap, And PHP

Event Calendar is an important feature of web applications to allow users to add and view events in a Calendar. Here, you will learn how to create an event calendar with jQuery, PHP, and MySQL. We will use the Bootstrap Calendar plugin to create event calendars and load events dynamically from the MySQL database by making Ajax requests to the server-side script.

Event Calendar with jQuery, PHP, and MySQL

Step1: Create MySQL Database Table for dynamic event calendar
As we will create a dynamic event calendar, so first we will create MySQL database table events by using the below query.

CREATE TABLE `events` (
  `id` int(11) NOT NULL,
  `title` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  `description` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  `start_date` varchar(50) COLLATE utf8_unicode_ci NOT NULL,
  `end_date` varchar(50) COLLATE utf8_unicode_ci NOT NULL,
  `created` datetime NOT NULL,
  `status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '1=Active, 0=Block'
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

we will also insert few event records in this table using the below queries.

INSERT INTO `events` (`id`, `title`, `description`, `start_date`, `end_date`, `created`, `status`) VALUES
(1, 'This is a special events about web development', '', '2021-10-12 00:00:00', '2021-10-16 00:00:00', '2021-10-10 00:00:00', 1),
(2, 'PHP Seminar 2021', '', '2021-10-11 00:00:00', '2021-10-17 00:00:00', '2021-10-10 00:00:00', 1),
(3, 'Bootstrap events 2021', '', '2021-10-4 00:00:00', '2021-10-4 00:00:00', '2021-10-01 00:00:00', 1),
(4, 'Developers events', '', '2021-10-04 00:00:00', '2021-10-04 00:00:00', '2021-10-01 00:00:00', 1),
(5, 'Annual Conference 2021', '', '2021-10-05 00:00:00', '2021-10-05 00:00:00', '2021-10-01 00:00:00', 1),
(6, 'Bootstrap Annual events 2021', '', '2021-10-05 00:00:00', '2021-10-05 00:00:00', '2021-10-01 00:00:00', 1),
(7, 'HTML5 events', '', '2021-10-05 00:00:00', '2021-10-05 00:00:00', '2021-10-01 00:00:00', 1),
(8, 'PHP conference events 2021', '', '2021-10-08 00:00:00', '2021-10-08 00:00:00', '2021-10-02 00:00:00', 1),
(9, 'Web World events', '', '2021-10-08 00:00:00', '2021-10-08 00:00:00', '2021-10-01 00:00:00', 1),
(10, 'Wave PHP 2021', '', '2021-10-08 00:00:00', '2021-10-08 00:00:00', '2021-10-02 00:00:00', 1),
(11, 'Dev PHP 2021', '', '2021-10-08 00:00:00', '2021-10-08 00:00:00', '2021-10-01 00:00:00', 1);

Step2: Include Bootstrap and jQuery Files for dynamic event calendar
As we will cover this tutorial with the Bootstrap calendar plugin, so we will need to include Bootstrap, jQuery, and Bootstrap Calendar plugin files. We will include the below files at the top within the head tag.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/calendar.css">

We also need to include the below files at the bottom of the page before closing the body tag.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script type="text/javascript" src="js/calendar.js"></script>
<script type="text/javascript" src="js/events.js"></script>

Step3: Design Event Calendar HTML for dynamic event calendar
In the index.php file, we will create event calendar HTML according to the Bootstrap Calendar plugin with calendar buttons.

<div class="container">	
	<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 btn-default" 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>
		<small>To see example with events navigate to Februray 2018</small>
	</div>
	<div class="row">
		<div class="col-md-9">
			<div id="showEventCalendar"></div>
		</div>
		<div class="col-md-3">
			<h4>All Events List</h4>
			<ul id="eventlist" class="nav nav-list"></ul>
		</div>
	</div>	
</div>

Step4: Create Event Calendar with Bootstrap Calendar Plugin for dynamic event calendar
In the events.js file, we will implement the Bootstrap Calendar plugin to create an event calendar. We will make an Ajax request to load events dynamically from the MySQL database by calling the event.php server-side script on the events_source option. We will also handle other configurations and functionality here related to the event calendar.

(function($) {
	"use strict";
	var options = {
		events_source: 'event.php',
		view: 'month',
		tmpl_path: 'tmpls/',
		tmpl_cache: false,
		day: '2018-02-28',
		onAfterEventsLoad: function(events) {
			if(!events) {
				return;
			}
			var list = $('#eventlist');
			list.html('');
			$.each(events, function(key, val) {
				$(document.createElement('li'))
					.html('' + val.title + '')
					.appendTo(list);
			});
		},
		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 = $('#showEventCalendar').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();
	});
	$('#language').change(function(){
		calendar.setLanguage($(this).val());
		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();
	});	
}(jQuery));

Step5: Load Events Data from MySQL Database for dynamic event calendar
Now finally in event.php, we will get events records from the MySQL database and return data in JSON format according to the required data format for the Bootstrap Calendar plugin to load data in the event calendar.

<?php
include_once("db_connect.php");
$sqlEvents = "SELECT id, title, start_date, end_date FROM events LIMIT 20";
$resultset = mysqli_query($conn, $sqlEvents) or die("database error:". mysqli_error($conn));
$calendar = array();
while( $rows = mysqli_fetch_assoc($resultset) ) {	
	// convert  date to milliseconds
	$start = strtotime($rows['start_date']) * 1000;
	$end = strtotime($rows['end_date']) * 1000;	
	$calendar[] = array(
        'id' =>$rows['id'],
        'title' => $rows['title'],
        'url' => "#",
		"class" => 'event-important',
        'start' => "$start",
        'end' => "$end"
    );
}
$calendarData = array(
	"success" => 1,	
    "result"=>$calendar);
echo json_encode($calendarData);
?>

Also Read: How to Live Search using PHP MySQL and Ajax, How To Create Multi-Step Form Progress Bar JQuery, Bootstrap, And PHP

Leave a Reply