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

问题

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.

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

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

Thanks!!!

回答1:

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

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

来源：https://stackoverflow.com/questions/28992871/fullcalendar-v2-show-popover-on-the-top-of-slot-of-weekly-view

标签

javascript

jquery

css

twitter-bootstrap

fullcalendar