javascript - 根据周 View 中的第一个和最后一个事件设置 minTime 和 maxTime

Question

我有一个 FullCalendar 小部件，正在我的网站上使用，演示如下:http://jsfiddle.net/46tnzj72/7/

我想将开始时间设置为当天的第一个事件，将结束时间设置为当天的最后一个事件。

目前，我对 minTime 进行硬编码，如下所示:

    $('#calendar').fullCalendar({
        editable: false,
        handleWindowResize: true,
        weekends: false, // Hide weekends
        defaultView: 'agendaWeek', // Only show week view
        header: false, // Hide buttons/titles
        minTime: '07:00:00', // Start time for the calendar
        columnFormat: {
            week: 'dddd' // Only show day of the week names
        },
        allDayText: 'Online/TBD'
    });

我想正确的方法是找到所有日期的最小值和最大值，然后设置 minTime 和 maxTime。问题是，我不知道如何在没有回调的情况下做到这一点

Answer 1

好的，尚不支持此功能。它属于没有动态 setter 的事物列表。为了解决这个问题，我们需要在每次更改 View 时销毁并重新创建日历，这比听起来更可行。

var prevDate = moment("1000-01-01"); //arbitrary "not now" date
var options = { //Store the FC options in a variable
    editable: false,
    weekMode: 'liquid',
    handleWindowResize: true,
    weekends: false,
    defaultView: 'agendaWeek',
    viewRender: function (view, element) {
        var newDate = $('#calendar').fullCalendar("getDate");
        if (!newDate.isSame(prevDate, 'day')) { //if the date changed
            prevDate = moment(newDate);
            var events = $('#calendar').fullCalendar("clientEvents"); //Get all current events
            $('#calendar').fullCalendar("destroy"); //Remove current calendar
            $('#calendar').fullCalendar( //Rebuild the calendar
                $.extend({}, options,
                         getEventLimits(events), //new limits
                         {defaultDate: newDate}) //preserve the date
            );
        }
    },
    events: eventSourceFunction,
};

$('#calendar').fullCalendar(options); //First build

// The following is needed or the first render won't have proper minTime/maxTime
// because events haven't been rendered yet. It just forces a date change.
window.setTimeout(function(){ 
    console.log("timeout date:",prevDate);
    var date = moment(prevDate);
    $('#calendar').fullCalendar( 'incrementDate', moment.duration("7.00:00:00") ); 
    $('#calendar').fullCalendar("gotoDate",date);
},1);

并获得限制:

var getEventLimits = function(events){
    if(events.length > 0){
        var max = events[0].end.format("HH:mm:ss"); // we will only be comparing the timestamps, not the dates
        var min = events[0].start.format("HH:mm:ss"); // and they will be compared as strings for simplicity
        for(var i = 1; i < events.length; i++){
            if(max < events[i].end.format("HH:mm:ss")){
                max = events[i].end.format("HH:mm:ss");
            }
            if(min > events[i].start.format("HH:mm:ss")){
                min = events[i].start.format("HH:mm:ss");
            }
        }
    }
    return {maxTime:max,minTime:min};
}

还需要进行一些结构性更改，因为 JSFiddle 演示。

<小时/>

此外，我注意到您正在使用重复事件。根据您的需求，像我的答案 here 这样的解决方案可能会更简单、更容易管理。