Fullcalendar 动态设置 minTime 和 maxTime答案

【问题标题】：Fullcalendar set minTime and maxTime dynamicallyFullcalendar 动态设置 minTime 和 maxTime
【发布时间】：2016-07-21 12:09:40
【问题描述】：

我已经实现了 fullcalendar v2 资源日历。我无法解决的是根据天设置动态 minTime 和 maxTime。每天都有不同的工作时间。

周一 10:00 至 14:00

周二 16:00 至 24:00 ...

我以这种方式初始化了我的日历：

$('#calendar').fullCalendar({
header: {
    left: 'prev,next today',
    center: 'title',
    right: 'month,agendaWeek,resourceDay'
},
defaultView: 'resourceDay',
titleFormat: {'day':'dddd, MMMM D'},
minTime: "08:00",
maxTime: "20:00",
scrollTime:  moment().format('H:m'),
eventLimit: true, // allow "more" link when too many events
resources:[
    resource1,resource2
    ],
slotDuration: '00:15:00',
allDaySlot: false,
lazyFetching: false,
droppable: true,
defaultTimedEventDuration: '00:30:00',
selectable: true,
selectHelper: true,
unselectAuto: 'true',
timeFormat: {'agenda':'hh:mm A','':'hh:mm A'},

// Calender Method-1: AJAX events will loaded from this code
events:function(start, end, timezone,callback) {

$.ajax({
        url: "http://www.domainn.com/dashboard/index",
        dataType: 'json',
        type:'POST',
        // async: false, //blocks window close
        data: {
            start: start.unix(),
            end: end.unix(),
            viewtype: $('#calendar').fullCalendar('getView').name,
        },
        success:function(response){
          var calendarOptions = $('#calendar').fullCalendar('getView').calendar.options;
          // console.log(calendarOptions);
         calendarOptions.minTime = response.timings.start;
          calendarOptions.maxTime = response.timings.end;

          $('#calendar').fullCalendar('destroy');

          $("#calendar").fullCalendar(
                $.extend(calendarOptions, {
                    events:response.resources
                })
          );
                      
          
        }
    });
},
eventRender: function (event, element) {
  // code here
},
// other events follows.....
});

从这个 ajax 调用中，根据我获得该特定日期的动态工作时间并尝试设置它的日期

response.timings.start
response.timings.end

但是使用这些选项，然后在任何其他日子更改/前往，不会获取事件！基本上，它会在一个循环中无限地调用同一个函数。

尝试了很多选择，但没有运气。任何帮助/指南将不胜感激。谢谢。

【问题讨论】：

你能添加一个工作的jsfiddle.net 吗？
您解决了吗？如果您不能使用 FC 2.9.0 版，那么在设置最小和最大时间后，您应该能够获取调用 $('#calendar').fullCalendar('render'); 的事件；而不是破坏日历。

标签： php fullcalendar codeigniter-2 fullcalendar-scheduler

【解决方案1】：

从 2.9.0 版开始，FullCalendar 支持setting options dynamically。

你应该可以做这样的事情：

$('#calendar').fullCalendar('option', 'minTime', response.timings.start);

我看过其他 SO 帖子，其中人们尝试按照您的方式设置选项，有些人说它有效，而另一些人说它没有。

GitHub issue 请求此功能。

实现此功能的 GitHub issue。

【讨论】：

我曾尝试过此选项，但这不起作用。我正在使用 2.0.2 和资源设置。
你累了吗 $('#calendar').fullCalendar('render');而不是破坏日历？

【解决方案2】：

在声明 fullcalendar 后尝试以下操作。

arrayOfBusinessHours 类似于

[
  {
    "dow": [1],
    "start": "09:00",
    "end": "21:30"
  },
  {
    "dow": [2],
    "start": "09:00",
    "end": "21:30"
  },
  {
    "dow": [3],
    "start": "09:00",
    "end": "21:30"
  },
  {
    "dow": [4],
    "start": "09:00",
    "end": "21:30"
  }
]

var MinTime = function (){
    var curStartTime; 
    if (arrayOfBusinessHours != undefined &&  !jQuery.isEmptyObject( arrayOfBusinessHours ) ){

        $.map(arrayOfBusinessHours, function(key, value){

            var dayOfWeek = ['sun', 'mon', 'thu', 'wed', 'tue', 'fri', 'sat'];
            var curView = calendar.fullCalendar('getView');
            // console.log(curView);
            var cdViewDay = curView.start._d;
            day = $.trim(cdViewDay).split(" ")[0];//takeout day in _d
            for(var i in key){
                if(value = day){
                    curStartTime = key[i].start;
                }
            }
        })
    }
    else{
        console.log('curDay is empty: ' +arrayOfBusinessHours);
    }
    return curStartTime;
};
var MaxTime = function (){
    var curEndTime; 
    if (arrayOfBusinessHours != undefined &&  !jQuery.isEmptyObject( arrayOfBusinessHours ) ){

        $.map(arrayOfBusinessHours, function(key, value){   
            var dayOfWeek = ['sun', 'mon', 'thu', 'wed', 'tue', 'fri', 'sat'];
            var curView = calendar.fullCalendar('getView');
            // console.log(curView);
            var cdViewDay = curView.start._d;
            day = $.trim(cdViewDay).split(" ")[0];
            for(var i in key){
                if(value = day){
                    curEndTime = key[i].end;
                }
            }
        })
    }
    else{
        console.log('curDay is empty: ' +arrayOfBusinessHours);
    }
    return curEndTime;
};
console.log('Min Time: ' +MinTime()+' Max Time: '+MaxTime());
calendar.fullCalendar('option', 'minTime', MinTime());
calendar.fullCalendar('option', 'maxTime', MaxTime());

【讨论】：

【解决方案3】：

例如：

objCalendar.setOption("minTime", "10:00:00");

可能工作正常。

【讨论】：