Set the minTime and maxTime depending on the first and last event on week view

Question

I have a FullCalendar widget that I am using on my site demo'd here: http://jsfiddle.net/46tnzj72/7/

I would like to set the start time as the first event of the day, and the end time as the last event of the day.

Currently, I hardcode the minTime like this:

    $('#calendar').fullCalendar({
        editable: false,
        handleWindowResize: true,
        weekends: false, // Hide weekends
        defaultView: 'agendaWeek', // Only show week view
        header: false, // Hide buttons/titles
        minTime: '07:00:00', // Start time for the calendar
        columnFormat: {
            week: 'dddd' // Only show day of the week names
        },
        allDayText: 'Online/TBD'
    });

I guess the correct way is to find the min and max of all my dates, then set that minTime and maxTime. The problem with this is, I don't know how to do this without a callback

So, you want to cut off the top and bottom hours based on when the earliest event is? So in the demo, it would start at `9:00am` and end at `4:00`? — DanielST, Aug 21 '15 at 17:49
yup. since your dataset is dynamic. you can just work on the times inside ur dataset and create a `minTime` and `maxTime` variable that u can set in your calendar. let me try doing it for you. — Sushil, Aug 21 '15 at 18:19
@Sushil `minTime` and `maxTime` are specified on a per-view basis... not a per-event basis. — DanielST, Aug 21 '15 at 19:04
yeah I am not talking about per event basis. he resets the dataset everytime he's moving back or forward, so I am just asking him to set these variables everytime he sets the dataset and the calendar will be looking up on these variables — Sushil, Aug 21 '15 at 19:08
@Sushil The datasets have nothing to do with `min/maxTime`. `minmax/time` only affect how much of the calendar is displayed (when the starting/end of a day is). It cannot be changed except at init. — DanielST, Aug 21 '15 at 19:26
oh. sorry about that. I haven't worked on FulLCalendar before so don't know much about the initialization. i guess there might be a way to reset the calendar? — Sushil, Aug 21 '15 at 19:28
@Sushil Yeah, destroying it and re-initializing it works well enough provided the scope of your project isn't too big. See my answer. — DanielST, Aug 21 '15 at 19:31

score 0 · Answer 1 · edited May 23 '17 at 12:06

Okay, this isn't supported yet. It falls under the list of things that there isn't a dynamic setter for. To work around this, we need to destroy and recreate the calendar every time we change the view, which is more feasible than it sounds.

var prevDate = moment("1000-01-01"); //arbitrary "not now" date
var options = { //Store the FC options in a variable
    editable: false,
    weekMode: 'liquid',
    handleWindowResize: true,
    weekends: false,
    defaultView: 'agendaWeek',
    viewRender: function (view, element) {
        var newDate = $('#calendar').fullCalendar("getDate");
        if (!newDate.isSame(prevDate, 'day')) { //if the date changed
            prevDate = moment(newDate);
            var events = $('#calendar').fullCalendar("clientEvents"); //Get all current events
            $('#calendar').fullCalendar("destroy"); //Remove current calendar
            $('#calendar').fullCalendar( //Rebuild the calendar
                $.extend({}, options,
                         getEventLimits(events), //new limits
                         {defaultDate: newDate}) //preserve the date
            );
        }
    },
    events: eventSourceFunction,
};

$('#calendar').fullCalendar(options); //First build

// The following is needed or the first render won't have proper minTime/maxTime
// because events haven't been rendered yet. It just forces a date change.
window.setTimeout(function(){ 
    console.log("timeout date:",prevDate);
    var date = moment(prevDate);
    $('#calendar').fullCalendar( 'incrementDate', moment.duration("7.00:00:00") ); 
    $('#calendar').fullCalendar("gotoDate",date);
},1);

And to get the limits:

var getEventLimits = function(events){
    if(events.length > 0){
        var max = events[0].end.format("HH:mm:ss"); // we will only be comparing the timestamps, not the dates
        var min = events[0].start.format("HH:mm:ss"); // and they will be compared as strings for simplicity
        for(var i = 1; i < events.length; i++){
            if(max < events[i].end.format("HH:mm:ss")){
                max = events[i].end.format("HH:mm:ss");
            }
            if(min > events[i].start.format("HH:mm:ss")){
                min = events[i].start.format("HH:mm:ss");
            }
        }
    }
    return {maxTime:max,minTime:min};
}

A couple of structural changes are also needed as this JSFiddle demonstrates.

Also, I noticed you are using repeating events. Depending on your needs, a solution like my answer here might be simpler and easier to manage.

Set the minTime and maxTime depending on the first and last event on week view

1 Answers1