Fullcalendar set minTime and maxTime dynamically

Question

I have implemented fullcalendar v2 resources calendar. What I am not able to fix is setting dynamic minTime and maxTime based on day. Each day have different work timings.

Monday 10:00 to 14:00

Tuesday 16:00 to 24:00 ...

I had initilized my calendar in this way:

$('#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.....
});

From this ajax call and based on the day I am getting dynamic work timings for that particular day and trying to set it with

response.timings.start
response.timings.end

But using these options and then changing/goingTo any other day, doesn't fetches the events! Basically, it keeps calling the same function infinitely in a loop.

tried many options, but no luck. Any help/guide will be much appreciated. Thanks.

Answer 1

As of version 2.9.0 FullCalendar supports setting options dynamically.

You should be able to do something like this:

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

I have seen other SO posts where people have tried setting options the way you have, some have said it worked and others said it didn't.

GitHub issue requesting this functionality.

GitHub issue that implemented this functionality.