Calendar Event

Submitted by rinvizle on Friday, July 22, 2016 - 09:14.

In this tutorial we will show you how to create an Event Calendar using jQuery, Ajax, and PHP. This 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 well show you how to add events to the calendar using jQuery, Ajax, PHP & MySQL. Means we’ll extend our PHP event calendar script with add event and view event functionality. See the example code and image below.

Sample Code

For the addEvent function. 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('Their was an error, please try again.');
                }
            }
        });
    });
});

And for the addEvent Function script in function.php to add a file to insert the event data to the MySQL database.

function addEvent($date,$title){
    include 'dbConfig.php';
    $currentDate = date("Y-m-d H:i:s");
    $insert = $db->query("INSERT INTO events (title,date,created,modified) VALUES ('".$title."','".$date."','".$currentDate."','".$currentDate."')");
    if($insert){
        echo 'ok';
    }else{
        echo 'err';
    }
}

And if you already done or complete the project all you have to do is test it so you can know if their's an error. Hope that you learn in this project and enjoy coding. Don't forget to LIKE & SHARE this website.

Calendar Event

Sample Code

Tags

Comments

ISAT

Test

Add new comment