FullCalendar 水平时间范围选择

Question

谁能告诉我如何实现如下图所示的效果。我如何在 select 天中 select 特定时间范围。

请注意 selection 跨越多天。它是一个跨越多天的水平 select离子（而不是连续的）。

我正在使用 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 存储库，并扩展了它的水平选择支持。

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

FullCalendar 水平时间范围选择

FullCalendar Horizontal Time Range Selection

javascript

jquery

fullcalendar

JSFiddle

基本算法

分块和渲染

FC 选项