javascript - 应用特定于本周的 minTime 和 maxTime

Question

我在周模式下工作，我想将可见时间范围限制为本周最早的事件和本周最晚的事件。

我想解决问题的正确方法是手动过滤本周可见的事件，找到最小和最大时间并将它们设置为 minTime 和 maxTime 属性。问题是我没有看到 weekChanged 回调(或类似的东西)，这似乎是重新计算 minTime 和 maxTime 的正确位置。

Answer 1

这比我预期的要多得多，希望它对你来说足够好。我基本上是按照上面评论中的建议去做的。

编辑:更改代码以提高性能，这样我们就不必等到所有日历都呈现完毕才发现我们需要重新开始。

请注意，为了更有效地做到这一点，我们要么必须实现一个新的回调，因为现有回调似乎都没有设置 clientEvents，要么事先计算事件的时间(如果有时区，这可能会变得困惑)。

http://jsfiddle.net/3E8nk/555/

(function(c) {

    var startedViewRender = true;

    function greaterTime(first, second) {
        //Assuming dates are the same year
        if (first.clone().dayOfYear(0).isBefore(second.clone().dayOfYear(0)))
            return second;
        else
            return first;
    }

    var calendarOptions = {
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'agendaWeek'
        },
        defaultView: 'agendaWeek',
        minTime: '00:00:00',
        maxTime: '24:00:00',
        defaultDate: '2014-06-12',
        defaultTimedEventDuration: '02:00:00',
        editable: true,
        events: [{
            title: 'All Day Event',
            start: '2014-06-01'
        }, {
            title: 'Long Event',
            start: '2014-06-07',
            end: '2014-06-10'
        }, {
            id: 999,
            title: 'Repeating Event',
            start: '2014-06-09T16:00:00'
        }, {
            id: 999,
            title: 'Repeating Event',
            start: '2014-06-16T16:00:00'
        }, {
            title: 'Meeting',
            start: '2014-06-12T10:30:00',
            end: '2014-06-12T12:30:00'
        }, {
            title: 'Lunch',
            start: '2014-06-12T12:00:00'
        }, {
            title: 'Birthday Party',
            start: '2014-06-13T07:00:00'
        }, {
            title: 'Click for Google',
            url: 'http://google.com/',
            start: '2014-06-28'
        }],
        viewRender: function(view) {
            startedViewRender = true;
        },
        eventRender: function(event, element, view) {
            if (!startedViewRender)
                return;
            else
                startedViewRender = false;

            if (view.name !== 'agendaWeek') {
                console.log('not agendaWeek');
                return;
            }

            var events = c.fullCalendar('clientEvents');

            if (events.length === 0) {
                console.log('no events at all');
                //Set to default times?
                return;
            }

            var visibleAndNotAllDayEvents = events.filter(function(event) {
                //end not necessarily defined
                var endIsWithin = event.end ? event.end.isWithin(view.start, view.end) : false;
                return !event.allDay && (event.start.isWithin(view.start, view.end) || endIsWithin);
            });

            if (visibleAndNotAllDayEvents.length === 0) {
                console.log('no visible not all day events');
                //Set to default times?
                return;
            }

            var earliest = visibleAndNotAllDayEvents.reduce(function(previousValue, event) {
                return greaterTime(previousValue, event.start).isSame(previousValue) ? event.start : previousValue;
            }, moment('23:59:59', 'HH:mm:ss'));

            var latest = visibleAndNotAllDayEvents.reduce(function(previousValue, event) {
                var end = event.end ? event.end.clone() : event.start.clone().add(moment(calendarOptions.defaultTimedEventDuration, 'HH:mm:ss'));

                return greaterTime(previousValue, end);
            }, moment('00:00:00', 'HH:mm:ss'));

            if (calendarOptions.minTime !== earliest.format('HH:mm:ss') || calendarOptions.maxTime !== latest.format('HH:mm:ss')) {
                //Reinitialize the whole thing

                var currentDate = c.fullCalendar('getDate');

                c.fullCalendar('destroy');
                c.fullCalendar($.extend(calendarOptions, {
                    defaultDate: currentDate,
                    minTime: earliest.format('HH:mm:ss'),
                    maxTime: latest.format('HH:mm:ss')
                }));
            }

        }
    };

    c.fullCalendar(calendarOptions);

})($('#calendar'));