根据输入中的值重新获取FullCalendar事件

Question

I have a calendar that fetches events from a MySQL DB for site work permits. When the page opens the events are fetched from the DB and added to the calendar.

I would like to add a search facility to the calendar where the user enters text in to any of 5 inputs, click apply and the calendar fetches the events based on the criteria entered.

The first fetch of the events when the page opens uses wildcard characters to query the DB via ajax, this works with no issues. I then call the FullCalendar removeEvents and refetchEvents methods to run the ajax with the new values but any entered text is not included, only the original values are used.

My Javascript is below

$(document).ready(function(){

document.getElementById('left_nav').innerHTML = sessionStorage.getItem('left_nav');
document.getElementById('company').innerHTML = " " + sessionStorage.getItem('company');
document.getElementById('profile_image').innerHTML = sessionStorage.getItem('profile_image');

//Add value of inputs to variables
var select_project = $('#select_project').val();
var select_site = $('#select_site').val();
var select_area = $('#select_area').val();
var select_requester = $('#select_requester').val();
var select_line_manager = $('#select_line_manager').val();

var today = new Date();
var dd = today.getDate();
var m = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear();

today = yyyy+'/'+m+'/'+dd;

var popup_button;

$('#clear').click(function(e) {


})

$('#apply').click(function(e) {

    //Clear all events and refetch
    $('.fullcalendar-event').fullCalendar('removeEvents');
    $('.fullcalendar-event').fullCalendar('refetchEvents');
})

// Event colors
$('.fullcalendar-event').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'agendaWeek,agendaDay'
    },
    views: {
        week: {
            columnFormat: 'ddd D/M'
        },
        day: {
            columnFormat: 'dddd D/M'
        }
    },
    defaultDate: today,
    editable: false,
    eventOverlap: false,
    displayEventTime: false,
    height: 'auto',
    allDaySlot: false,
    defaultView: 'agendaWeek',
    events: {
        //Get events based on criteria with wildcards
        type: "POST",
        url: 'php_files/calender_php_files/populate_calender.php',
        data: {
            client_id: sessionStorage.getItem('client_id'),
            access_id: sessionStorage.getItem('access_id'),
            select_project: '%' + select_project + '%',
            select_site: '%' + select_site + '%',
            select_area: '%' + select_area + '%',
            select_requester: '%' + select_requester + '%',
            select_line_manager: '%' + select_line_manager + '%'
        }
    },
    eventRender: function (event, element) {
        var event_popover = element.popover({
            title: function () {
                return "<B>" + event.event_title + "</B>";
            },
            placement: 'auto',
            html: true,
            trigger: 'click',
            animation: 'true',
            content: function () {

                if (sessionStorage.getItem('access_id') > 1) {
                    if (event.event_status === 'Open') {
                        popup_button = "<div class='form-group text-center'>" +
                            "<button class='btn btn-primary btn-xs'><a style='color:white;' href='view_permit.php?permit_id="
                            + encodeURIComponent(event.event_number) + "'>View/Edit</a></button>" +
                            "<button style='margin-left: 8px;' class='btn btn-success btn-xs'><a style='color:white;' href='sign_on_permit.php?permit_id="
                            + encodeURIComponent(event.event_number) + "'>Sign On</button>" +
                            "<button style='margin-left: 8px;' class='btn btn-warning btn-xs'><a style='color:white;' href='clear_permit.php?permit_id="
                            + encodeURIComponent(event.event_number) + "'>Clear</button>" +
                            "</div>"
                    } else if (event.event_status === 'Cleared') {
                        popup_button = "<div class='form-group text-center'>" +
                            "<button class='btn btn-primary btn-xs'><a style='color:white;' href='view_permit.php?permit_id="
                            + encodeURIComponent(event.event_number) + "'>View</a></button>" +
                            "<button style='margin-left: 8px;' class='btn btn-danger btn-xs'><a style='color:white;' href='cancel_permit.php?permit_id="
                            + encodeURIComponent(event.event_number) + "'>Cancel</button>" +
                            "</div>"
                    } else if (event.event_status === 'Cancelled') {
                        popup_button = "<div class='form-group text-center'>" +
                            "<button class='btn btn-primary btn-xs'><a style='color:white;' href='view_permit.php?permit_id="
                            + encodeURIComponent(event.event_number) + "'>View</a></button>" +
                            "</div>"
                    }
                } else {
                    popup_button = "<div class='form-group text-center'>" +
                        "<button class='btn btn-primary btn-xs'><a style='color:white;' href='view_permit.php?permit_id="
                        + encodeURIComponent(event.event_number) + "'>View</a></button>" +
                        "</div>"

                }

                if (event.event_type === 'embargo') {

                    if (sessionStorage.getItem('access_id') > 1) {
                        return "<div>" +
                            "<b>Site: </b>" + event.event_site +
                            "<br />" +
                            "<b>Start: </b>" + moment(event.event_start_date).format('DD/MM/YYYY') + ", " +
                            moment(event.event_start_time, 'HHmmss').format('HH:mm') +
                            "<br />" +
                            "<b>End: </b>" + moment(event.event_end_date).format('DD/MM/YYYY') + ", " +
                            moment(event.event_end_time, 'HHmmss').format('HH:mm') +
                            "<br />" +
                            "<br />" +
                            "<div class='form-group text-center'>" +
                            "<button class='btn btn-primary btn-xs'><a style='color:white;' href='edit_site_embargo.php?embargo_id="
                            + encodeURIComponent(event.event_number) + "'>View/Edit</a></button>" +
                            "</div>" +
                            "</div>"
                    } else {
                        return "<div>" +
                            "<b>Site: </b>" + event.event_site +
                            "<br />" +
                            "<b>Start: </b>" + moment(event.event_start_date).format('DD/MM/YYYY') + ", " +
                            moment(event.event_start_time, 'HHmmss').format('HH:mm') +
                            "<br />" +
                            "<b>End: </b>" + moment(event.event_end_date).format('DD/MM/YYYY') + ", " +
                            moment(event.event_end_time, 'HHmmss').format('HH:mm') +
                            "<br />" +
                            "<br />" +
                            "<div class='form-group text-center'>" +
                            "<button class='btn btn-primary btn-xs'><a style='color:white;' href='edit_site_embargo.php?embargo_id="
                            + encodeURIComponent(event.event_number) + "'>View</a></button>" +
                            "</div>" +
                            "</div>"
                    }

                } else if (event.event_type === 'permit') {
                    return "<div>" +
                        "<b>Site: </b>" + event.event_site +
                        "<br />" +
                        "<b>Start: </b>" + moment(event.event_start_date).format('DD/MM/YYYY') + ", " +
                        moment(event.event_start_time, 'HHmmss').format('HH:mm') +
                        "<br />" +
                        "<b>End: </b>" + moment(event.event_end_date).format('DD/MM/YYYY') + ", " +
                        moment(event.event_end_time, 'HHmmss').format('HH:mm') +
                        "<br />" +
                        "<br />" +
                        popup_button +
                        "</div>"
                }
            },
            container: 'body'
        }).popover('show');
        $('body').on('click', function (e) {
            if (!element.is(e.target) && element.has(e.target).length === 0 && $('.popover').has(e.target).length === 0)
                element.popover('hide');
        });
    }
});
});  

Answer 1

The issue you've got is that the data object you pass into fullCalendar as part of your events is static. When you create the calendar, you give fullCalendar this object in the state it is in at that moment. fullCalendar makes a copy of it and uses it whenever it fetches events. It cannot read any changes you make to that object or the variables within it.

The solution to this is to define data as a callback function, which fullCalendar can re-run whenever the events need to be refreshed. That way it has some code it can actually execute in order to read the latest values of the variables, rather than just a static object.

You write it like this:

events: {
    //Get events based on criteria with wildcards
    type: "POST",
    url: 'php_files/calender_php_files/populate_calender.php',
    data: function() {
        return {
           client_id: sessionStorage.getItem('client_id'),
            access_id: sessionStorage.getItem('access_id'),
            select_project: '%' + select_project + '%',
            select_site: '%' + select_site + '%',
            select_area: '%' + select_area + '%',
            select_requester: '%' + select_requester + '%',
            select_line_manager: '%' + select_line_manager + '%'
        };
    }
},

This is documented here: https://fullcalendar.io/docs/event_data/events_json_feed/ in the last section entitled "Dynamic data parameter".

PS There should be no need to use removeEvents before calling refetchEvents - the refetch operation already automatically clears the calendar and replaces it with the latest data.