Question

我正在使用FullCalendar版本3.9.0。我们以前一直使用旧版本。

对于日历中的事件，单击它们将打开一个弹出窗口。此窗口在网格线和数字后面绘制，如果超出网格的边界，则该窗口将被切断（例如，在左边缘附近打开一个均匀的右箭头将使任何比日历向左延伸的弹出窗口成为可能）。隔断）。

我的日历的定义如下：

$('#calendar').fullCalendar({

locale: initialLocaleCode,
height: "auto",
contentHeight: "auto",

header: {
    left: 'title',
    center: '',
    right: 'today prev,next'
},

loading: function(isLoading) {
    if (isLoading) {
        isCalClick = true;
    } else {
        isCalClick = false;
    }
},

events: function (start, end, timezone, callback) {
    $.ajax({
        url: homeUrl + 'Run',
        type: "GET",
        dataType: "JSON",

        success: function (result) {
            var events = [];

            $.each(result.Events, function (i, data) {
                events.push(
                    {
                        moduleId: data.moduleId,
                        title: data.title,
                        id: data.id,
                        timeStamp: data.timeStamp,
                        state: data.state,
                        user: data.user,
                        result: data.result,

                        start: moment(data.start).format('YYYY-MM-DD'),
                        end: moment(data.timeStamp).format('YYYY-MM-DD')
                    });
            });

            callback(events);
        },
        error: function () {
            alert('there was an error while fetching events!');
        }
    });
}, 

eventRender: function (event, element) {
    createEvent(event, $(element));
}
});

然后有一个create popover事件，可为每个事件创建弹出窗口（弹出窗口）...

    function createPopover(event, el) {

    var title = event.title;
    var html = SomeMethodToGetHtmlContentsOfPopup();

    el.popover({
        'placement': "left",
        'html': true,
        'title': title,
        'content': html,
    });
}

可以使用.popover CSS ...设置弹出窗口的样式。

#calendar .popover,
.large-chart .popover {
color: #333;
width: 340px;
z-index: 999 !important;
position: relative !important;
}

我尝试过各种组合样式来设置此.popover控件。调试时确实适用这些样式。我希望将z-index设置为高于其他任何项目，并使用position：relative可以将其放在最前面，但事实并非如此。

有什么想法吗？我看到的在线运行示例似乎没有这个问题，只是我在做什么。

活动弹出窗口在日历网格和数字后面绘制

0 个答案: