将minTime和maxTime特定应用于当前周

Question

我在周工作模式下工作，我希望将可见时间范围限制为本周最早的活动和本周的最新活动。

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

Answer 1

这比我预期的要多得多，希望它对你有用。我基本上是按照上面的评论中的建议做的。

修改 更改了代码以提高性能，因此我们不必等待所有日历呈现，然后才能发现我们需要重新开始。

请注意，为了更有效地执行此操作，我们要么必须实现新的回调，因为现有的回调似乎都没有设置clientEvents或事先计算事件的时间（在时区的情况下可能会变得混乱）。 / p>

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'));

Answer 2

您可以使用eventAfterAllRender来执行此操作，该the following JsFiddle在所有事件都已呈现后执行

eventAfterAllRender: function(view) {
    var evts = $("#calendar").fullCalendar( 'clientEvents'),
        minTime = moment("2014-01-01 23:59:59").format("HH:mm:ss"),
        maxTime = moment("2014-01-01 00:00:00").format("HH:mm:ss"),
        currentDate = view.calendar.getDate(),
        currentMinTime = view.calendar.options.minTime,
        currentMaxTime = view.calendar.options.maxTime;

    // lets calculate minTime and maxTime based on the week events
    // if this event's minTime is 'before' than the minTime, set this as the minTime
    for(var i in evts) {
        minTime = timeDiff(minTime, evts[i].start.format("HH:mm:ss"), true);
        maxTime = timeDiff(maxTime, evts[i].end.format("HH:mm:ss"), false);
    }

    // If minTime or maxTime don't match, recreate fullcalendar
    // This is a pain in the ass : \
    // We have to destroy and apply fullcalendar so this can work.
    if (minTime != currentMinTime || maxTime != currentMaxTime) {
        $("#calendar").fullCalendar('destroy');
        $("#calendar").fullCalendar(
            $.extend(fcOpts, {
                defaultDate: currentDate,
                minTime: minTime,
                maxTime: maxTime
            })
        );
    }
}

您必须有一个函数来计算最晚或最早的时间：

function timeDiff(time1, time2, getMin) {
    var d1 = new Date('2014-01-01 ' + time1),
        d2 = new Date('2014-01-01 ' + time2);

    if (getMin) {
        return d1.getTime(d1) - d2.getTime(d2) < 0 ? time1 : time2;
    } else {
        return d1.getTime(d1) - d2.getTime(d2) > 0 ? time1 : time2;
    }
}

有关工作示例，请参阅{{3}}。