Question

如何在月视图中显示半天活动？例如，我有一个12小时的活动。我希望该事件的日期单元格只显示半条。那可能吗？如果是这样，你如何实现这个？

Answer 1

因此事件定位于“绝对”，这是一个棘手的事件......

使用eventAfterRender回调如下：

    , eventAfterRender: function(event, element, view) {
        /**
         * get the width of first day slot in calendar table
         * next to event container div
         */
        var containerWidth = jQuery(element).offsetParent()
                             .siblings("table").find(".fc-day-content").width();

        // half a day
        var elementWidth = parseInt(containerWidth / 2);

        // set width of element
        jQuery(element).css('width', elementWidth + "px");
    }

当然可以改进： - ）

Answer 2

聚会有点晚了，但我刚刚设法以一种很好的方式实现了这一点，并且在调整页面大小时也能正常工作。

eventAfterRender 似乎对我不起作用，但 eventRender 会做同样的事情：

     eventRender: function (event, element) {

            // Get the page width, then
            // subtract the margins around the side. I'm assuming a full 
            // size calendar with a margin of 15px on each side here.
            var width = getWidth()-30; 
            width = width / 14; (7 days = 14 half days)

            jQuery(event.el).css('margin-left', width + "px");
        }

然后您需要在调整浏览器窗口大小时重新加载事件，以便它们保持在中间，否则它们会漂移。

window.addEventListener('resize', function () {
        calendar.refetchEvents();
    });

注意：为了获取浏览器宽度，我使用这个函数来确保它可以在不同的浏览器上工作：

function getWidth() {
    return Math.max(
        document.body.scrollWidth,
        document.documentElement.scrollWidth,
        document.body.offsetWidth,
        document.documentElement.offsetWidth,
        document.documentElement.clientWidth
    );
}

fullcalendar - 在月视图中显示半日事件

2 个答案: