FullCalendar does not unselect previous selection

Question

I've been working with FullCalendar lately for a reservation system. The problem is that whenever I select a time range it all adds to the eventData object. What I am trying to do is select one time range only.

When I click the $('#btn-reserve') button it should render the event on the calendar.

What's happening is that even my previous selections are getting rendered on the calendar. I only want to render the last selection I made.

here is my code

$('.calendar').fullCalendar({
    selectable: true,
    select: function(start, end) {
            $('#end_time').val(end);
            $('#start_time').val(start);
            $('#newScheduleModal').modal({
                show : true,
                backdrop: 'static',
                keyboard: false
            });

            $('#btn-reserve').click(function(){
                    eventData = {
                        title: 'Lesson Schedule',
                        start: start,
                        end: end
                    };
                    $('.calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
                    $('#newScheduleModal').modal('hide');
            });

            $('#btn-cancel-reserve').click(function(){
                $('.calendar').fullCalendar('unselect');
                eventData = {};
            })
    },

})

Anthony McGrath Anthony McGrath · Accepted Answer · 2017-09-05T03:44:48

You are adding a new click event every time the calendar is selected. You need to unbind the click before adding it like so:

 $('#btn-reserve').off('click').click(function

You might want to do the same for your "#btn-cancel-reserve" element.

FullCalendar does not unselect previous selection

1 Answers