Add Event to Calendar using jQuery, Ajax and PHP


In our first PHP event calendar tutorial, we had shown how to create an event calendar using jQuery, Ajax, and PHP. That tutorial provides the script for generating calendar and display events from the MySQL database on the respective date.

In this second part of the PHP event calendar tutorial, we’ll show how to add events to the calendar using jQuery, Ajax, PHP & MySQL. Means we’ll extend our PHP event calendar script with add event functionality.

Before you begin, we suggest you read the first part of PHP event calendar tutorial. It will help to understand our event calendar scripts.

Files structure of PHP Event Calendar would be the same as the first part.

add-event-to-calendar-jquery-ajax-php-tutorial-files-structure-codexworld

Here we’ll use the same scripts but the event adding code will be added. Open the functions.php file and make the following changes.
Add addEvent case on switch-case in functions.php file.

case 'addEvent':
    
addEvent($_POST['date'],$_POST['title']);
    break;

Add new addEvent() function in functions.php file for insert the event data to the MySQL database.

/*
 * Add event to date
 */
function addEvent($date,$title){
    
//Include db configuration file
    
include 'dbConfig.php';
    
$currentDate date("Y-m-d H:i:s");
    
//Insert the event data into database
    
$insert $db->query("INSERT INTO events (title,date,created,modified) VALUES ('".$title."','".$date."','".$currentDate."','".$currentDate."')");
    if(
$insert){
        echo 
'ok';
    }else{
        echo 
'err';
    }
}

getCalender() function modification:
Add a new block for display the event adding form.

<div id="event_add" class="none">
    <p>Add Event on <span id="eventDateView"></span></p>
    <p><b>Event Title: </b><input type="text" id="eventTitle" value=""/></p>
    <input type="hidden" id="eventDate" value=""/>
    <input type="button" id="addEventBtn" value="Add"/>
</div>

Insert an add event link on date hover popup.

echo '<a href="javascript:void(0);" onclick="addEvent(\''.$currentDate.'\');">add event</a>';

In JavaScript code, getEvents() function need slight modification and new code to be needed for handle event add. addEvent() function is added and Ajax would be called on #addEventBtn click.

function addEvent(date){
    $('#eventDate').val(date);
    $('#eventDateView').html(date);
    $('#event_list').slideUp('slow');
    $('#event_add').slideDown('slow');
}

$(document).ready(function(){
    $('#addEventBtn').on('click',function(){
        var date = $('#eventDate').val();
        var title = $('#eventTitle').val();
        $.ajax({
            type:'POST',
            url:'functions.php',
            data:'func=addEvent&date='+date+'&title='+title,
            success:function(msg){
                if(msg == 'ok'){
                    var dateSplit = date.split("-");
                    $('#eventTitle').val('');
                    alert('Event Created Successfully.');
                    getCalendar('calendar_div',dateSplit[0],dateSplit[1]);
                }else{
                    alert('Some problem occurred, please try again.');
                }
            }
        });
    });
});

Complete code of functions.php File

A comment label (//For Add Event) is defined before the newly added code for Add Event functionality. It will help you to find the extended code in functions.php file.

<?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;
        
//For Add Event
        
case 'addEvent':
            
addEvent($_POST['date'],$_POST['title']);
            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>         <!--For Add Event-->         <div id="event_add" class="none">             <p>Add Event on <span id="eventDateView"></span></p>             <p><b>Event Title: </b><input type="text" id="eventTitle" value=""/></p>             <input type="hidden" id="eventDate" value=""/>             <input type="button" id="addEventBtn" value="Add"/>         </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><br/>':'';
                        
//For Add Event
                        
echo '<a href="javascript:;" onclick="addEvent(\''.$currentDate.'\');">add event</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_add').slideUp('slow');                     $('#event_list').slideDown('slow');                 }             });         }         //For Add Event         function addEvent(date){             $('#eventDate').val(date);             $('#eventDateView').html(date);             $('#event_list').slideUp('slow');             $('#event_add').slideDown('slow');         }         //For Add Event         $(document).ready(function(){             $('#addEventBtn').on('click',function(){                 var date = $('#eventDate').val();                 var title = $('#eventTitle').val();                 $.ajax({                     type:'POST',                     url:'functions.php',                     data:'func=addEvent&date='+date+'&title='+title,                     success:function(msg){                         if(msg == 'ok'){                             var dateSplit = date.split("-");                             $('#eventTitle').val('');                             alert('Event Created Successfully.');                             getCalendar('calendar_div',dateSplit[0],dateSplit[1]);                      &nbnbsp;  }else{                             alert('Some problem occurred, please try again.');                         }                     }                 });             });         });                  $(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 01)?'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;
}

/*
 * Add event to date
 */
function addEvent($date,$title){
    
//Include db configuration file
    
include 'dbConfig.php';
    
$currentDate date("Y-m-d H:i:s");
    
//Insert the event data into database
    
$insert $db->query("INSERT INTO events (title,date,created,modified) VALUES ('".$title."','".$date."','".$currentDate."','".$currentDate."')");
    if(
$insert){
        echo 
'ok';
    }else{
        echo 
'err';
    }
}
?>

Conclusion

That’s enough! you only need to modify the functions.php file, rest files would be the same as like the first part. The next part of the PHP event calendar tutorial would be extended with the delete event functionality.

9 Comments

  1. Wani Said...
  2. Ugyen Said...
  3. Amir Naved Said...
  4. Lennart Said...
  5. Marjul Hossain Said...
  6. Digvijay Said...
  7. Monday Gabriel Said...
  8. Thomas Said...

Leave a reply

Connect With CodexWorld