Fullcalendar set minTime and maxTime dynamically

3
votes

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.

3
phpfullcalendarcodeigniter-2fullcalendar-scheduler
can you add a working jsfiddle.net ? – fehrlich
Did you get this resolved? If you can't use version 2.9.0 of FC then after you set the min and max times you should be able to fetch the events calling $('#calendar').fullCalendar('render'); rather than destroying the calendar. – Ally Murray

3 Answers

2
votes

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.

0
votes

Try the following after declaring fullcalendar.

arrayOfBusinessHours is something like 

[
  {
    "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());
0
votes

e.g: 

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

might work fine.