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

Answer 2

我最近遇到了同样的要求。在互联网上挖掘后，没有找到完美的解决方案。上面的解决方案解决了渲染问题 有一些其他问题，例如拖动问题，事件ID。

所以我在github上分割了原始的fullCalendar repo，并通过水平选择支持扩展它。

DEMO

用法：

请替换js文件并设置如下选项：

（expandThrough已添加.false表示水平选择已开启）

...
selectable: true,
selectOverlap: false,
eventOverlap: false,
editable: true,
expandThrough: false,
...

Javascript dist文件：

https://github.com/deepskyr/fullcalendar/blob/horizontal_range_selection/dist/fullcalendar.js