FullCalendar (v2) 在每周视图的插槽顶部显示弹出窗口

Question

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

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

我的问题是：如何显示弹出框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") 调用弹出窗口，如下所示：

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

FullCalendar (v2) 在每周视图的插槽顶部显示弹出窗口

FullCalendar (v2) show popover on the top of slot of weekly view

javascript

css

jquery

fullcalendar

twitter-bootstrap