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

我正在以周模式工作，我想将可见时间范围限制为一周中最早的事件和一周中的最新事件。

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

最佳答案

这项工作比我预期的要多得多，希望它对您来说足够好。我基本上是在做我上面的评论中建议的事情。

编辑:
更改了代码以提高性能，因此我们不必等到所有日历都呈现出来就可以发现我们需要重新开始。

请注意，要更有效地执行此操作，我们将不得不实现新的回调，因为现有的回调似乎都没有设置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'));