FullCalendar（v2）在每周视图的插槽顶部显示popover [英] FullCalendar (v2) show popover on the top of slot of weekly view

问题描述

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

I am using FullCalendar v2 and bootstrap v3.3.2. I am trying to show a popover inside of the slot where the user click. Here there an example that I try to do http://jsfiddle.net/5g396/ but the problem is that it uses FullCalendar v1 and I need FullCalendar V2.

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

This is my code, http://jsfiddle.net/beckymo/nmwyz269/, but the popover is only shown in the same position of the Calendar.

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

My questions is: How to show popover bootstrap v3.3.2. in FullCalendar v2 on the top of slot when the user click? Thanks!

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

谢谢!!!

推荐答案

首先你需要添加selectable：true选项，因为它会在你点击的插槽里面创建一个div。

Firstly you need add the option "selectable: true" because it create a div inside of slot where you click.

其次你可以使用这个div作为选择器（.fc-highlight）用于这样的调用popover：

Secondly you can use this div as selector (.fc-highlight") for call popover like this:

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！