FullCalendar水平时间范围选择

Question

有人能告诉我如何实现像下面的图像.如何在选定日期选择特定时间范围.

请注意,选择跨越多天.它是跨越多天的水平选择(而不是连续的).

我正在使用fullCalendar jquery库.

Answer 1

因此，除非您想大量修改FC，否则您几乎不可能做确切的事情。但是您可以做的很接近：

JSFiddle

基本算法

• 启用selectHelper以便FC将尝试将其呈现为事件。
• 在中eventRender，停止实际渲染帮助程序。取而代之的是，获取其开始和结束日期，并将它们分成每天一个事件。
• 渲染分块的事件。

分块和渲染

// 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')) {
        chunked.push({
            start:day.clone(),
            end:day.clone().hour(event.end.hour()).minute(event.end.minute()),
            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){
        window.clearTimeout(id);
        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选项

$("#calendar").fullCalendar({
    /*...*/
    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"));
        }else{
            $("#calendar").fullCalendar( "removeEvents", "chunked-helper");
        }
    },
    eventRender: function (event,element) {
        if(event.className[0] === "fc-helper"){ //if it's the drag event
            renderChunkedHelper(event);
            return false; //don't actually render the select helper
        }
    }
});