CODEWITHSUNDEEP
phpfullcalendarcodeigniter-2fullcalendar-scheduler
Tarunn
Tarunn

Reputation: 1048

Fullcalendar set minTime and maxTime dynamically

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.

Upvotes: 4

Views: 10337

Answers (5)

Vinod Joshi
Vinod Joshi

Reputation: 176

If you are using Version >= 5 than these parameters name are being renamed with slotMinTime and slotMaxTime

Upvotes: 0

Mihir Chichria
Mihir Chichria

Reputation: 13

calendar.fullCalendar('option', 'minTime', data.start_time);
calendar.fullCalendar('option', 'maxTime', data.end_time);
calendar.fullCalendar('render');

Might Work Fine!!

Upvotes: 0

Miquéias Dantas
Miquéias Dantas

Reputation: 9

e.g: 

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

might work fine.

Upvotes: 0

khan
khan

Reputation: 1150

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());

Upvotes: 0

Ally Murray
Ally Murray

Reputation: 609

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.

Upvotes: 2

Related Questions