Change Event using Fullcalendar

This tutorial demonstrates how to build an interactive calendar that displays event data fetched from a JSON API. First, we will setup a MySQL database to store event data. This is very interesting and simple.

HTML Code

<div class="calendar"></div>

Jquery Code

$('#md-saveinfo').delegate('.followup_status_caledar','change',function(){
       $('.calendar').fullCalendar('destroy');   
       RenderCalendar($(this).val());
});

function RenderCalendar(eId) {
        $('.calendar').fullCalendar({
            displayEventTime: false,
            header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
            },
        buttonText: {
                prev: "",
                next: "",
                today: 'Today',
                month: 'Month',
                week: 'Week',
                day: 'Day'
        },
        eventSources: [
        {
            url: 'ajax_candidatequestions.php?followup_status=true',
            type: 'POST',
            data: {
                 id: eId,
            },
            error: function() {
                alert('there was an error while fetching events!');
            },
            color: '#3A87AD',   
        }
        ]
    });
}

PHP Code

if(!empty($_REQUEST['followup_status']))
{
    $json = array();
    $get_sql = mysqli_query($conn,"SELECT * FROM `wo_calendar` where user_id = '".$id."' ");
    while ($row = mysqli_fetch_assoc($get_sql))
    {
        $start_date1 = date('Y,m,d',strtotime($row['start_date']));
        $end_date1 = date('Y,m,d',strtotime($row['end_date']));
        $e1 = array();
        $e1['title'] = "Blocked";
        $e1['start'] = $start_date1 .' '.  $row['start_time'];
        $e1['end'] = $end_date1 .' '. $row['end_time'];
        $e1['color'] = '#ff0080';
        array_push($json, $e1);
    }
    echo json_encode($json);
}