remove unused hours of the day in Fullcalendar

2
votes

I'm trying to configure Fullcalendar to manage night events. So I have envents starting one day and finishing in the morning of the next day. So currently I have this configuration: 

{
    header: {
        left: '',
        center: 'title',
        right: ''
    },
    defaultView: 'timelineTwoDays',
    views: {
        timelineTwoDays: {
            type: 'timeline',
            duration: { days:1, hours:7, minutes:00 }
        }
    },
    scrollTime: '17:00'
}

This is not the best solution because the hours before the specified scrollTime are hidden, but I would like to completely remove them. minTime is not an option because it also remove the hours after the midnight.

1
javascriptjqueryjsonfullcalendar
So you want to take a chunk out of the middle of each day? – DanielST
If that's correct, there isn't a built-in way. I might be able to hack something together though. – DanielST

1 Answers

1
votes

Ideally, you should make this a feature request. But here's a hacky method.

Fudge the time slot labels

On viewRender, grab the slot labels and add an offset to them:

viewRender: function (view, element) {
    if (view.name.indexOf("timeline") > -1) { //if it's a timeline view
        $(element).find(".fc-chrono .fc-cell-text").each(
            function (i, cell) {
                var old = moment($(cell).text(), "ha"); //grab and parse old time label
                $(cell).text(old.add(OFFSET, 'h').format("ha")); //add an offset
            }
        );
    }
},

And set minTime. Remember that there is an offset.

minTime: "15:00:00", //is actually 15h + offset

JSFiddle

Problems

Naturally this cause some issues.

  • It only changes the labels. FC still thinks that the place labeled 5am is midnight.
  • Server sync issues. You either have to store offset dates or transform them from the server and to the server.
  • The day labels might not be exactly what you want. They will show something like 10pm - 4am as the same day.

Helper Functions

Something like this will be useful. Convert an event to an offset event and back again.

var offset = {
    _offset: 6, //in hours
    _apply: function(moments,op){ //sub/add offset from moment array, with null checks
        for(var i = 0; i < moments.length; i++){
            if(moment.isMoment(moments[i]))
                moments[i][op](this._offset,'h');
        }
    },
    get: function(){
        return this._offset;
    },
    //Add the offset to the event or moment
    //Real time/display time -> offset timeline time
    add: function(event){
        this._apply([event,event.start,event.end],'subtract');
        return event;
    },
    //Remove the offset to the event or moment
    //Offset timeline time -> real time/display time
    remove: function(event){
        this._apply([event,event.start,event.end],'add');
        return event;
    }
};

Complete JSfiddle