Event Management Script with Calendar control using JQuery , PHP & MySQL

This script uses PHP, MySQL database and JQuery UI at front end .

Pages in the script

config.php :

Database login details and connection string, read more about PDO connection.

display.php:

Show the event of the date after selection of date by user .

display-data.php :

Backend script to return events to display.php

add-event/add.php :

Used to select date and add event details to table.

Key features of the script

These are the key features of this script.

Users can select a date from a calendar and view the events of the day
User can select only those days from the calendar for which event exist or entered by Admin.
After selection of the day by user , all the events of the day will be displayed.

Adding event

A separate page is kept for adding event. (add-event/add.php )
Admin can select a date from date picker and then add event details.
Multiple events can be added for any day.
The list of events will be displayed at same page (add-event/add.php )

Deleting events

Admin can select any event to delete.

Understanding JQuery Date Picker

Read the introduction to JQuery and about the date picker from calendar in our JQuery section.
Using jQuery UI we have displayed date picker calendar for the admin to select a date for adding event. There is no restriction and event can be added for any day. While displaying the events we have used beforeshowday option of date picker to execute a JavaScript function to allow clickable links for those dates for which event exists. In the above script you can see one array with dates is used inside the JavaScript function checkDate , these dates are to be considered for showing ( or not showing based on condition ) the link for the user to select.

Here is the array with fixed dates.

var not_available_dates = ["5-12-2015", "25-12-2015", "1-1-2016", "2-2-2016"];

In our script we will populate the above array (inside checkDate ) by taking data from MySQL table. Here is the code which collects data from the table plus2net_event column name date for which event details are available.

<?Php
$q="select distinct date_format( date, '%d-%m-%Y' ) as date from plus2net_event";

$str="[ ";
foreach ($dbo->query($q) as $row) {
$str.="\"$row[date]\",";
}
$str=substr($str,0,(strlen($str)-1));
$str.="]";
echo "var not_available_dates=$str"; // array is created in JavaScript 
?>

With the above code the dates for which events are available can only be selected.

Using onselect of datepicker option

Here we are using onSelect option of datepicker to trigger JavaScript function show_event. Here we are collecting the selected date using that we are formatting a URL as a string and then using jquery load () to send the date to backend script display-data.php.

onSelect:function() {
selectedDate = $('#date_picker').val();
var url="display-data.php?selectedDate="+selectedDate;
$('#d1').load(url);
  }
});

Backend script display-data.php

This script collects the user selected date and then pass the same date to query to get the events. To collect the events we must convert the date format to matching MySQL date format.

$date = new DateTime($date);
$date=$date->format('Y-m-d');

We collect the events against the input date from the backend script display-data.php .
We return the collected data to our main calling script display.php

$sql="select * from plus2net_event where date ='$date'";

foreach ($dbo->query($sql) as $row) {
echo "$row[date]: $row[detail]<br>";
}

Adding events ( add-event/add.php)

You must understand how to add records to table inside a database after basic validation of the input data.

MySQL table

To store the events we will use MySQL table , here we have used single table plus2net_event with two columns to store date and event details.
Here is the structure of the table .

CREATE TABLE IF NOT EXISTS `plus2net_event` (
  `event_id` int(5) NOT NULL AUTO_INCREMENT,
  `date` date NOT NULL,
  `detail` varchar(256) NOT NULL,
  PRIMARY KEY (`event_id`),
  UNIQUE KEY `event_id` (`event_id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=18 ;

To keep the script simple we have not added login system for adding events or viewing the events. Several other facilities like email notification, event reminder etc can be added to this script.
Using this at your website you can show different events of the day by displaying the calendar for users.
We used bootstrap design and style but you can use your own style with this script.

How to Install and test

Download the zip file at the end of this page.
Inside you will find sql_dump.text file to create tables in the database.
Open config.php and enter your MySQL database login details.
Go to add-event/add.php page and add ( or delete ) some events.
Open display.php file to select date to see events.
You can only select dates for which event is there in our database table.

You can contact us to integrate this script in your website.

This article is written by plus2net.com team.

plus2net.com

Most Popular JQuery Scripts
1	Two dependant list boxes
2	Calendar with Date Selection
3	Data change by Slider
4	Show & Hide element

Managing event using JQuery with PHP & MySQL