Create Event Calendar Using jQuery, PHP and MySql

Create Event Calendar Using jQuery
Event calendar is intuitive feature for the web application. In this tutorial we will learn how to create event calendar using jQuery, PHP and MySQL. This feature provide user to an easy way to manage all day events.

Event calendar allow users to add, view and delete the day events. We are using FullCalendar free library to display calendar on web page. This FullCalendar has interactive feature of drag & drop events. It also have month, week, day calendar view. Just include the dependent files on page to show calendar.

Create Event Calendar using jQuery, PHP and MySql:

Lets start with create an page to show calendar using library source code.

Step 1 : Create an File to Display Calendar

First create an index.php file and include FullCalendar required JS and CSS files in it. This FullCalendar plugin comes with different layout.

event calendar demo

See below HTML code example. This will create event calendar with month, week and day data. In jQuery script ‘events’ attribute is used to show all events data. This data comes via MySQL database in the JSON form and render it on the calendar. In next step we will create an database table to save events data.

To take input from user, we used window prompt() method. It will display an window where user input event details.

Step 2 : Create MySQL Table to Save Dynamic Events

Now create an MySQL database table to save dynamic events using with below query. All existed events will fetch from this database table.

Step 3: Create Database Connection

Now create an database connection to execute all events functionality. Create a database.php file to make MySQL connection.

Step 4: Create CRUD Operation using jQuery

Now we write code to create CRUD operation using jQuery ajax. These operations are requested through AJAX using FullCalendar library callbacks. Create each event operation PHP file and upload it. Below are the code files require to create:

  • all_events.php
  • add_event.php
  • delete_event.php
  • update_event.php

First start with fetch all events using ‘all_events.php’ from database table.

all_events.php : Show all Events in Calendar

In this we use PHP code to fetch all events data from MySQL database table in an array form. Now return the array data in JSON encoded format.

add_events : Add Events in Calendar

Below code using to insert event data in database table on calendar callback response.

delete_event : Delete Events on Calendar

Click on the showing event element, an AJAX request send to delete the event. We have placed user confirmation event handler, on confirm it will delete row data from database table and render latest event data.

update_events : Update Events in Calendar

We have implemented script function to display action response. It will display an message on specific action performed successfully. Add below function in your index.php script.

Conclusion:

Combine all crud event operations code in index.php script. Use ‘eventClick’ element to track the click action. Using this tutorial you can create event calendar using jQuery, PHP and MySql for your web application and provide an intuitive way for manage all events data.

Check demo to understand the process and download free source code.

DEMO

Leave a Comment