如何在fullCalendar中关闭以前的popovers?

时间:2013-09-28 15:34:31

标签: javascript jquery twitter-bootstrap fullcalendar

我在我的网站中使用fullCalendar和Bootstrap,因此每次我点击一个月中的某个视图时,都会有一个popover来添加事件,就像在Google Calendar中一样。这是我的代码

$(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');
}
})

代码应该在$(this).children().popover({之前,以便它关闭所有先前被解雇的popover。

但是,确切地说,我应该用什么代码来实现这个目标?

谢谢!

1 个答案:

答案 0 :(得分:3)

您可以通过保存引用来删除之前创建的popover或更具体的destroy(这将是更具体和更好的方法)。

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

  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