FullCalendar dayClick js event not detaching

Question

I have a fullcalendar in my webpage. The calendar has events. On dayClick event handler I am calling a function.

The problem is 1st time on click of a day box the function gets called 1 time. 2nd time the function is getting called 2 times, 3rd time 3 times..and so on.

I can guess the problem is the day click event is not detaching. But I am not able to solve it.

The code:

$('#calendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    eventLimit: true,
    defaultView: 'month',
    editable: false,
    eventClick: function (event) {
        if (event.url) {
            window.open(baseUrl + event.url);
            return false;
        }
    },
    dayClick: function (date, allDay, jsEvent, view) {
        var dateString = '';
        dateString = moment(date, 'YYYY-MM-DD').format().split('T')[0];
        $('#popup').modal('toggle');
        $('#popup').on('shown.bs.modal', function () {
        AsyncFn().done(function (result) {
            AnotherAsyncFn(function () {
                SomeFunction();  //This function gets called multiple times                                           
                });
            });                   
        });                        
    }
}); 

I am not sure how to detach this event. May be by using off or unbind, but don't know exactly how. Can anyone give some help on this?

Answer 1

You should use off method.

$('#popup').on('shown.bs.modal', function () {
    $('#popup').off('shown.bs.modal');
    AsyncFn().done(function (result) {
        AnotherAsyncFn(function () {
            SomeFunction();  //This function gets called multiple times                                           
        });
    });                   
});