Question

我正在使用FullCalendar v2和bootstrap v3.3.2。我试图在用户单击的插槽内显示一个弹出窗口。这里有一个例子，我尝试http://jsfiddle.net/5g396/，但问题是它使用FullCalendar v1，我需要FullCalendar V2。

这是我的代码http://jsfiddle.net/beckymo/nmwyz269/，但是popover只显示在日历的相同位置。

我的问题是：如何显示popover bootstrap v3.3.2。当用户点击时，在插槽顶部的FullCalendar v2中？谢谢！

$('#calendar-holder').fullCalendar({
    header: {
        left: 'prev, next',
        center: 'title',
        right: 'month, agendaWeek, agendaDay'
    },
    businessHours: {
        start: '09:00',
        end: '19:00',
        dow: [1, 2, 3, 4, 5]
    },
    allDaySlot: false,
    defaultView: 'agendaWeek',
    lazyFetching: true,
    firstDay: 1,
    selectable: true,
    timeFormat: {
        agenda: 'h:mmt',
        '': 'h:mmt'
    },
    dayClick: function (date, jsEvent, view) {
        $(this).popover({
            title: 'haha',
            placement: 'right',
            content: 'haha',
            html: true,
            container: 'body'
        });
        $(this).popover('show');
    }
});

感谢!!!

Answer 1

首先，您需要添加“selectable：true”选项，因为它会在您单击的插槽内创建一个div。

其次你可以使用这个div作为选择器（.fc-highlight“）进行调用popover，如下所示：

dayClick: function (date, jsEvent, view) {
    $(".fc-highlight").popover({
        title: 'haha',
        placement: 'right',
        content: 'haha',
        html: true,
        container: 'body'
    });
    $(".fc-highlight").popover('show');
}

FullCalendar（v2）在每周视图的插槽顶部显示popover

1 个答案: