user3796642 user3796642 - 10 months ago 231
jQuery Question

FullCalendar Horizontal Time Range Selection

Can someone tell me how to achieve something like below image.
How can I select particular time range in selected days.

Notice that the selection spans multiple days. It's a horizontal selection across multiple days (as opposed to a continuous one).

I am using fullCalendar jquery library.

intended result


So, the exact thing you need to do isn't quite possible unless you want to heavily modify FC. But you can do something quite close:

horizontal FC selection


Basic Algorithm

  • Turn on selectHelper so that FC will attempt to render it as an event.
  • In eventRender, stop the helper from actually rendering. Instead, take its start and end dates and chunk them into one event per day.
  • Render the chunked events.

Chunking and Rendering

// Chunks a multiday event into an array of events
// i.e. From {start:"2015-05-06T11:00",end:"2015-05-08T15:00"}
//      into [ {start:"2015-05-06T11:00",end:"2015-05-07T15:00"},
//             {start:"2015-05-07T11:00",end:"2015-05-08T15:00"} ]
var chunk = function (event,type) {
    var chunked = [];
        //diff = moment.duration(event.end.diff(event.start));
    if (event.start.format('HHmm') > event.end.format('HHmm')) {
        return false; //Can't chunk, starttime > endtime
    for (var day = event.start.clone(); !day.isAfter(event.end,'day'); day.add(1,'day')) {
            id:"chunked-"+type //Used as a flag in the render function
    return chunked;
// Takes an event and renders it chunked. Also remove the previous chunked-helper.
// Runs after a timeout and only once.
var renderChunkedHelper = (function(){
    var id = 0;
    return function(event){
        id = window.setTimeout(function(){
            var chunked = chunk(event,"helper");
            eventToChunk = null;
            $("#calendar").fullCalendar( "removeEvents", "chunked-helper");
            for(var i = 0; i < chunked.length; i++){
                $("#calendar").fullCalendar("renderEvent", chunked[i]); //Manually render each chunk
        },0); //delay in ms. Could be tweaked for optimal perfomance


FC options

    selectable: true,
    selectHelper: true,
    select: function( start, end, jsEvent, view ){
        if(window.confirm("Create this event?")){
            $("#calendar").fullCalendar( "removeEvents", "chunked-helper");
            $("#calendar").fullCalendar( "addEventSource",chunk({start:start,end:end},"event"));
            $("#calendar").fullCalendar( "removeEvents", "chunked-helper");
    eventRender: function (event,element) {
        if(event.className[0] === "fc-helper"){ //if it's the drag event
            return false; //don't actually render the select helper