Managing event using JQuery with PHP & MySQL
Pages in the script
Database login details and connection string, read more about PDO connection.
Show the event of the date after selection of date by user .
Backend script to return events to display.php
Used to select date and add event details to table.
Key features of the scriptThese 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 eventA 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 eventsAdmin can select any event to delete.
Understanding JQuery Date PickerRead the introduction to JQuery and about the date picker from calendar in our JQuery section.
Here is the array with fixed dates.
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.
With the above code the dates for which events are available can only be selected.
Backend script display-data.phpThis 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.
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
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 tableTo 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 .
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
This article is written by plus2net.com team.