Build Event Calendar with jQuery , PHP & MySQL

In our previous tutorial, we have explained how to implement Dynamic Bar Chart with JavaScript, PHP and MySQL. In this tutorial, we will explain how to implement Event Calendar with jQuery, PHP & MySQL.

Calendar is a popular tool in web applications that’s used for scheduling purpose. The dynamic events calendars are created to add events, view events, manage events etc.

So if you’re looking for solution to implement responsive mobile friendly dynamic events calendar using jQuery and PHP, then here at your destination. In this tutorial you will learn how to create dynamic event calendar using jQuery, PHP and MySQL. You would also like tutorial to create Dynamic Bar Chart with JavaScript, PHP & MySQL to implement Bar Chart with JavaScript.

We will use jQuery Calendar plugin to create event calendar with dynamic data from MySQL database using PHP. We will cover this tutorial in easy steps to create live demo of jQuery event calendar with dynamic data.

Also, read:

• Create Dynamic Bar Chart with JavaScript, PHP & MySQL

So let’s create example to create dynamic event calendar with PHP and MySQL. The file structure of this example is following.

• index.php
• event_calendar.js
• events.php

Step1: Create MySQL Database Table

As we will create event calendar with dynamic data, so first we will create MySQL database table events to store events data.

CREATE TABLE `events` (
  `id` int(11) NOT NULL,
  `category` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  `title` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  `content` text COLLATE utf8_unicode_ci NOT NULL,
  `start_date` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  `end_date` varchar(255) 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 events records to display in event calendar.

INSERT INTO `events` (`id`, `category`, `title`, `content`, `start_date`, `end_date`, `created`, `status`) VALUES
(13, 'Programming', 'PHP', 'Events about php programming!', '1552793400', '1552834800', '2019-03-23 00:00:00', 1),
(14, 'Programming', 'Java', 'Events about java', '1552881600', '1552885200', '2019-03-04 00:00:00', 1),
(15, 'Programming', 'Node JS', 'events about Nodejs', '1553140800', '1553142600', '0000-00-00 00:00:00', 1),
(16, 'Web Design', 'HTML', 'events about designing', '1553311800', '1553319000', '0000-00-00 00:00:00', 1),
(17, 'Web Design', 'CSS', 'events about CSS design', '1553053500', '1553057100', '0000-00-00 00:00:00', 1),
(18, 'Web Design', 'Bootstrap', 'Events about Boostrap', '1553234400', '1553238000', '0000-00-00 00:00:00', 1),
(19, 'Programming', 'Perl', 'event about Perl language', '1553236200', '1553245200', '0000-00-00 00:00:00', 1),
(20, 'Web Development', 'web application development', 'Events about web application development', '1553146200', '1553148000', '0000-00-00 00:00:00', 1);

Step2: Include jQuery, Bootstrap and Calendar Plugin Files

As we will create event calendar using jQuery, Bootstrap and jQuery calendar plugin, so we will include all files in index.php related to this.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.19/jquery.touchSwipe.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js"></script>
<script src="dist/js/jquery-calendar.min.js"></script>
<link rel="stylesheet" href="dist/css/jquery-calendar.min.css">
<script src="js/event_calendar.js"></script>

Step3: Create Event Calendar Container

In index.php file, we will create container to load event calendar with dynamic data.

<div class="container">
	<div id="calendar"></div>
</div>

Step4: Load Event Calendar with Dynamic Data

In event_calendar.js file, we will make Ajax request to server side PHP script events.php to load dynamic data as JSON response. We will call jQuery Calendar plugin to load events JSON response data to display event calendar.

$(document).ready(function(){
	 $.ajax({
		url: 'events.php',
		dataType: "json"
	}).done(function(response) {		
		var calendar = $('#calendar').Calendar({
			locale: 'en',
			weekday: {
			timeline: {
				intervalMinutes: 30,
				fromHour: 9
			}
		},
		events: response.result
		}).init();
	}); 
});

Step4: Load Events Data from MySQL Database

In events.php file, we will load events data from MySQL database table events and return as JSON response to load into jQuery event calendar.

<?php
include_once("inc/db_connect.php");
$sqlEvents = "SELECT id, category, title, content, start_date, end_date FROM events";
$resultset = mysqli_query($conn, $sqlEvents) or die("database error:". mysqli_error($conn));
$calendar = array();
while( $rows = mysqli_fetch_assoc($resultset) ) {	
	$start = $rows['start_date'];
	$end = $rows['end_date'];	
	$calendar[] = array(
        'category' =>$rows['category'],
        'title' => $rows['title'],
        "content" => $rows['content'],
        'start' => $start,
        'end' => $end
    );
}
$calendarData = array(
	"success" => 1,	
    "result"=>$calendar);
echo json_encode($calendarData);
?>

You may also like:

• Follow and Unfollow System with PHP & MySQL
• GST Billing System with PHP & MySQL
• Restaurant Management System with PHP & MySQL
• Visitor Management System with PHP & MySQL
• Student Attendance System with PHP & MySQL
• Like and Dislike System with Ajax, PHP & MySQL
• Build Star Rating System with jQuery, PHP & MySQL
• User Registration and Login System with PHP & MySQL
• Build Contact Form with PHP and Ajax
• To-do List Application with Ajax, PHP & MySQL

You can view the live demo from the Demo link and can download the source from the Download link below.
Demo Download