Полный календарь устанавливает minTime и maxTime динамически
Я реализовал 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
Но использование этих параметров, а затем изменение / переход в любой другой день не приводит к извлечению событий!
По сути, он продолжает бесконечно вызывать одну и ту же функцию в цикле.
перепробовал много вариантов, но не повезло. Любая помощь / руководство будет высоко ценится. Благодарю.
Решение
Начиная с версии 2.9.0, FullCalendar поддерживает установка параметров динамически.
Вы должны быть в состоянии сделать что-то вроде этого:
$('#calendar').fullCalendar('option', 'minTime', response.timings.start);
Я видел другие посты SO, где люди пытались установить параметры так, как вы, некоторые говорили, что это работает, а другие говорили, что нет.
GitHub вопрос запрашивая эту функциональность.
GitHub вопрос который реализовал эту функциональность.
Другие решения
Попробуйте следующее после объявления 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());