Build an event calendar using jQuery, Ajax and PHP


The event calendar is a very useful element for a web project. Using it you can add the event to the calendar along with the respective date. Today we’ll discuss how can you create a PHP Event Calendar easily using jQuery and Ajax.

build-event-calendar-using-jquery-ajax-php-by-codexworld

In the following script, we’ll build a PHP calendar and fetch the events from the MySQL database and display those events along with the calendar date. We’ll use jQuery, Ajax and PHP for building the event calendar. Now we are going to creating an event calendar using jQuery, Ajax, PHP and MySQL.

Database Table:

Assume that, we already have the events data into the MySQL database. The events database table SQL is something like the below.

CREATE TABLE `events` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `title` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
 `date` date NOT NULL,
 `created` datetime NOT NULL,
 `modified` datetime NOT NULL,
 `status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '1=Active, 0=Block',
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

dbConfig.php File:

This file helps to connect and select the database.

<?php
//db details
$dbHost 'localhost';
$dbUsername 'root';
$dbPassword '';
$dbName 'codexworld';

//Connect and select the database
$db = new mysqli($dbHost$dbUsername$dbPassword$dbName);

if (
$db->connect_error) {
    die(
"Connection failed: " $db->connect_error);
}
?>

functions.php File:

This file holds all the calendar related functions. Read the comment lines for uses details of the functions.

<?php
/*
 * Function requested by Ajax
 */
if(isset($_POST['func']) && !empty($_POST['func'])){
    switch(
$_POST['func']){
        case 
'getCalender':
            
getCalender($_POST['year'],$_POST['month']);
            break;
        case 
'getEvents':
            
getEvents($_POST['date']);
            break;
        default:
            break;
    }
}

/*
 * Get calendar full HTML
 */
function getCalender($year '',$month '')
{
    
$dateYear = ($year != '')?$year:date("Y");
    
$dateMonth = ($month != '')?$month:date("m");
    
$date $dateYear.'-'.$dateMonth.'-01';
    
$currentMonthFirstDay date("N",strtotime($date));
    
$totalDaysOfMonth cal_days_in_month(CAL_GREGORIAN,$dateMonth,$dateYear);
    
$totalDaysOfMonthDisplay = ($currentMonthFirstDay == 7)?($totalDaysOfMonth):($totalDaysOfMonth $currentMonthFirstDay);
    
$boxDisplay = ($totalDaysOfMonthDisplay <= 35)?35:42;
?>
    <div id="calender_section">         <h2>             <a href="javascript:void(0);" onclick="getCalendar('calendar_div','<?php echo date("Y",strtotime($date.' - 1 Month')); ?>','<?php echo date("m",strtotime($date.' - 1 Month')); ?>');">&lt;&lt;</a>             <select name="month_dropdown" class="month_dropdown dropdown"><?php echo getAllMonths($dateMonth); ?></select>             <select name="year_dropdown" class="year_dropdown dropdown"><?php echo getYearList($dateYear); ?></select>             <a href="javascript:void(0);" onclick="getCalendar('calendar_div','<?php echo date("Y",strtotime($date.' + 1 Month')); ?>','<?php echo date("m",strtotime($date.' + 1 Month')); ?>');">&gt;&gt;</a>         </h2>         <div id="event_list" class="none"></div>         <div id="calender_section_top">             <ul>                 <li>Sun</li>                 <li>Mon</li>                 <li>Tue</li>                 <li>Wed</li>                 <li>Thu</li>                 <li>Fri</li>                 <li>Sat</li>             </ul>         </div>         <div id="calender_section_bot">             <ul>
            <?php 
                $dayCount 
1
                for(
$cb=1;$cb<=$boxDisplay;$cb++){
                    if((
$cb >= $currentMonthFirstDay+|| $currentMonthFirstDay == 7) && $cb <= ($totalDaysOfMonthDisplay)){
                        
//Current date
                        
$currentDate $dateYear.'-'.$dateMonth.'-'.$dayCount;
                        
$eventNum 0;
                        
//Include db configuration file
                        
include 'dbConfig.php';
                        
//Get number of events based on the current date
                        
$result $db->query("SELECT title FROM events WHERE date = '".$currentDate."' AND status = 1");
                        
$eventNum $result->num_rows;
                        
//Define date cell color
                        
if(strtotime($currentDate) == strtotime(date("Y-m-d"))){
                            echo 
'<li date="'.$currentDate.'" class="grey date_cell">';
                        }elseif(
$eventNum 0){
                            echo 
'<li date="'.$currentDate.'" class="light_sky date_cell">';
                        }else{
                            echo 
'<li date="'.$currentDate.'" class="date_cell">';
                        }
                        
//Date cell
                        
echo '<span>';
                        echo 
$dayCount;
                        echo 
'</span>';
                        
                        
//Hover event popup
                        
echo '<div id="date_popup_'.$currentDate.'" class="date_popup_wrap none">';
                        echo 
'<div class="date_window">';
                        echo 
'<div class="popup_event">Events ('.$eventNum.')</div>';
                        echo (
$eventNum 0)?'<a href="javascript:;" onclick="getEvents(\''.$currentDate.'\');">view events</a>':'';
                        echo 
'</div></div>';
                        
                        echo 
'</li>';
                        
$dayCount++;
            
?>
            <?php }else{ ?>
                <li><span>&nbsp;</span></li>
            <?php } } ?>
            </ul>         </div>     </div>

    <script type="text/javascript">         function getCalendar(target_div,year,month){             $.ajax({                 type:'POST',                 url:'functions.php',                 data:'func=getCalender&year='+year+'&month='+month,                 success:function(html){                     $('#'+target_div).html(html);                 }             });         }                  function getEvents(date){             $.ajax({                 type:'POST',                 url:'functions.php',                 data:'func=getEvents&date='+date,                 success:function(html){                     $('#event_list').html(html);                     $('#event_list').slideDown('slow');                 }             });         }                  function addEvent(date){             $.ajax({                 type:'POST',                 url:'functions.php',                 data:'func=addEvent&date='+date,                 success:function(html){                     $('#event_list').html(html);                     $('#event_list').slideDown('slow');                 }             });         }                  $(document).ready(function(){             $('.date_cell').mouseenter(function(){                 date = $(this).attr('date');                 $(".date_popup_wrap").fadeOut();                 $("#date_popup_"+date).fadeIn();                 });             $('.date_cell').mouseleave(function(){                 $(".date_popup_wrap").fadeOut();                     });             $('.month_dropdown').on('change',function(){                 getCalendar('calendar_div',$('.year_dropdown').val(),$('.month_dropdown').val());             });             $('.year_dropdown').on('change',function(){                 getCalendar('calendar_div',$('.year_dropdown').val(),$('.month_dropdown').val());             });             $(document).click(function(){                 $('#event_list').slideUp('slow');             });         });     </script>
<?php
}

/*
 * Get months options list.
 */
function getAllMonths($selected ''){
    
$options '';
    for(
$i=1;$i<=12;$i++)
    {
        
$value = ($i 10)?'0'.$i:$i;
        
$selectedOpt = ($value == $selected)?'selected':'';
        
$options .= '<option value="'.$value.'" '.$selectedOpt.' >'.date("F"mktime(000$i+100)).'</option>';
    }
    return 
$options;
}

/*
 * Get years options list.
 */
function getYearList($selected ''){
    
$options '';
    for(
$i=2015;$i<=2025;$i++)
    {
        
$selectedOpt = ($i == $selected)?'selected':'';
        
$options .= '<option value="'.$i.'" '.$selectedOpt.' >'.$i.'</option>';
    }
    return 
$options;
}

/*
 * Get events by date
 */
function getEvents($date ''){
    
//Include db configuration file
    
include 'dbConfig.php';
    
$eventListHTML '';
    
$date $date?$date:date("Y-m-d");
    
//Get events based on the current date
    
$result $db->query("SELECT title FROM events WHERE date = '".$date."' AND status = 1");
    if(
$result->num_rows 0){
        
$eventListHTML '<h2>Events on '.date("l, d M Y",strtotime($date)).'</h2>';
        
$eventListHTML .= '<ul>';
        while(
$row $result->fetch_assoc()){ 
            
$eventListHTML .= '<li>'.$row['title'].'</li>';
        }
        
$eventListHTML .= '</ul>';
    }
    echo 
$eventListHTML;
}
?>

index.php File:

In this file, the event calendar is displaying with the respective events. You should need to include functions.php file and call the getCalender() function for appearing the event calendar. Also, include the jQuery library and style.css file.

<?php
//Include the event calendar functions file
include_once('functions.php');
?> <!DOCTYPE html> <html lang="en-US"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>PHP Event Calendar by CodexWorld</title> <!-- Include the stylesheet --> <link type="text/css" rel="stylesheet" href="style.css"/> <!-- Include the jQuery library --> <script src="jquery.min.js"></script> </head> <body> <!-- Display event calendar --> <div id="calendar_div">         <?php echo getCalender(); ?> </div> </body> </html>

Testing:

Once you open the index.php file on the browser, you’ll see the calendar like the below. Today’s date would have grey background and dates would have sky color background if has events. Also, you can change your desired year and month from the top of the calendar.

php-event-calendar-by-codexworld

On hover the sky color’s date cell, a popup would appear with events counter and view events link. Once the view events link is clicked, respective events would be displayed.

php-event-calendar-events-list-by-codexworld

Conclusion

In this article, you have seen how to build event calendar using jQuery, Ajax, PHP, and MySQL. Our next tutorial on PHP Event calender will show you how to add events to the calendar using jQuery, Ajax, PHP and MySQL.

24 Comments

  1. Inday Said...
  2. Ben Raffaele Said...
  3. Tan Said...
  4. Michael Said...
  5. Manu Said...
  6. Ella Said...
  7. May Said...
  8. Hasif Said...
  9. Abdullah Said...
  10. Abdullah Said...
    • CodexWorld Said...
  11. Hiren Motwani Said...
  12. Louis Mondo Said...
  13. Yong Said...
  14. Rohit Jena Said...
  15. Zul Said...
    • CodexWorld Said...
  16. Joyce Said...
    • CodexWorld Said...
  17. Varad Mayee Said...
    • CodexWorld Said...

Leave a reply

Connect With CodexWorld