CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapfullcalendar
user2363192
user2363192

Reputation: 91

How to close previous popovers in fullCalendar?

I am using fullCalendar in my website together with Bootstrap so that everytime I click on a day in month view, there is a popover to add event, just like that in Google Calendar. Here is my code 

$(document).ready(function() {

    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();
    var calendar = $('#calendar').fullCalendar({
        height: height,
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        dayClick: function( date, allDay, jsEvent, view ){
            $(this).children().popover({
        title: 'haha',
        placement: 'right',
        content: 'haha',html : true, container: 'body'
    });
    $(this).children().popover('show');
}
})

The code should be right before $(this).children().popover({ so that it closes all previously fired popover.

However, exactly, what code should I use to achieve this?

Thank you!

Upvotes: 2

Views: 5439

Answers (1)

PSL
PSL

Reputation: 123739

You can remove the popover or more specifically destroy the one created before by saving the reference (which would be a more specific and better approach).

var calendar = $('#calendar').fullCalendar({
    height: '300px',
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    dayClick: function (date, allDay, jsEvent, view) {
         $(this).children().popover({
            title: 'haha',
            placement: 'right',
            content: 'haha',
            html: true,
            container: 'body'
        });
        $('.popover.in').remove(); //<--- Remove the popover 
        $(this).children().popover('show');
    }
});

Fiddle Method1

or

  var $calPopOver; //create a variable to save refe
    var calendar = $('#calendar').fullCalendar({
        height: '300px',
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        dayClick: function (date, allDay, jsEvent, view) {
             $(this).children().popover({
                title: 'haha',
                placement: 'right',
                content: 'haha',
                html: true,
                container: 'body'
            });
            if($calPopOver) //if there is something
                $calPopOver.popover('destroy'); //then call popover destroy
            $calPopOver = $(this).children().popover('show');
        }
    });

Fiddle Method2

Upvotes: 4

Related Questions