根据周视图中的第一个和最后一个事件设置minTime和maxTime

Set the minTime and maxTime depending on the first and last event on week view

本文关键字：最后一个 第一个 事件 设置 maxTime minTime 周视图 视图      更新时间：2023-09-26

我有一个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。问题是，如果没有回调

我不知道该怎么做

好的，目前还不支持。它属于那些没有动态setter的东西。为了解决这个问题，我们需要在每次更改视图时销毁并重新创建日历，这比听起来更可行。

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所示，还需要对结构进行一些更改。

另外，我注意到你在使用重复事件。根据您的需要，像我这里的答案这样的解决方案可能更简单，更容易管理。

相关文章：