完整日历 (v2） 在每周视图槽的顶部显示弹出框

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

本文关键字：顶部 图槽 显示 视图 每周 日历 v2      更新时间：2023-09-26

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

http://jsfiddle.net/beckymo/nmwyz269/，这是我的代码，但弹出框仅显示在日历的同一位置。

我的问题是：当用户单击时，如何在 FullCalendar v2 中在插槽顶部显示弹出式引导程序 v3.3.2.？谢谢！

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

谢谢！！！

首先，您需要添加选项"可选：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');
}
相关文章：