Bootstrap Fullcalendar addClass在弹出窗口中

时间:2019-06-27 02:24:26

标签: javascript jquery html css fullcalendar

我只想为bootstrap fullcalendar popover添加类名。我在很多地方在下面的脚本中尝试过$(".popover").addClass('fc-ctpopover');。它不适用于此代码。

评论以进一步澄清。

$(“。popover”)。addClass('fc-ctpopover');

我的预期输出<div class="popover fc-ctpopover">

$(document).ready(function() {

    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();
    var calendar = $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        height: 600,
        selectable: true,
        selectHelper: true,

        select: function(start, end, allDay) {
            var title = prompt('Event Title:');
            if (title) {
                calendar.fullCalendar('renderEvent', {
                        title: title,
                        start: start,
                        end: end,
                        allDay: allDay,
                        title: 'the title',
                        content: function() {
                            return $("#popoverContent").html();
                        },
                        template: popTemplate,
                        placement: 'left',
                        html: 'true',
                        trigger: 'click',
                        animation: 'true',
                        container: 'body'
                    },
                    true
                );
            }
            calendar.fullCalendar('unselect');
        },

        eventRender: function(event, element) {
            element.popover({
                title: element.find('.fc-title, .fc-list-item-title').html() + '<span class="popover-title"><a data-toggle="popover" data-trigger="focus" class="close">&times</a></span>',
                placement: 'top',
                html: true,
                trigger: 'manual',
                animation: true,
                container: 'body',
                content: function() {
                    setTimeout(function() {
                        element.popover('hide');
                    }, 20000);
                    return $('#popover-content').html();

                }

            }).on("mouseenter", function() {
            $(".popover").addClass('fc-ctpopover');		
                var _this = this;
                $(this).popover("show");
                $(".popover").on("mouseleave", function() {
                    $(_this).popover('hide');
                });
                $(".close").click(function(e) {
                    e.stopPropagation();
                    $(this).trigger("click");
                });

            }).on("mouseleave", function() {
                var _this = this;
                setTimeout(function() {
                    if (!$(".popover:hover").length) {
                        $(_this).popover("hide");
                    }
                }, 300);
                $(".close").click(function(e) {
                    e.stopPropagation();
                    $(this).trigger("click");
                });

            });

        },
        eventAfterRender: function(event, element) {
            $(".popover").remove();
            element.popover('hide');

        },

        eventClick: function(event, element, view) {
            //element.popover('hide');
            $('#modalTitle').html(event.title);
            $('#modalBody').html(event.description);
            $('#eventUrl').attr('href', event.url);
            $('#calendarModal').modal();
        },

       

        editable: true,
        events: [{
                title: 'All Day Event',
                start: new Date(y, m, 1),
                description: 'This is a cool event'
            }, {
                title: 'Long Event',
                url: 'http://stackoverflow.com',
                start: new Date(y, m, d - 5),
                end: new Date(y, m, d - 2)
            }, {
                title: "Conference",
                color: "#F6BB42",
                start: "2019-06-04",
                end: "2019-06-05"
            }, {
                id: 999,
                title: 'Repeating Event',
                start: new Date(y, m, d - 3, 16, 0),
                allDay: false
            }, {
                id: 999,
                title: 'Repeating Event',
                color: '#FB6E52',
                start: new Date(y, m, d + 4, 16, 0),
                allDay: false
            }, {
                title: 'Meeting',
                color: "#DA4453",
                start: new Date(y, m, d, 10, 30),
                allDay: false
            }, {
                title: 'Lunch',
                start: new Date(y, m, d, 12, 0),
                end: new Date(y, m, d, 14, 0),
                allDay: false
            }

        ]
    });
    var popoverElement;

});
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.6/fullcalendar.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.0/js/bootstrap.min.js"></script>

<div id="calendar"/>

0 个答案:

没有答案