drag-and-drop - 在 fullCalendar 组件中拖动具有特定持续时间的事件

Question

我已经看到了 drag and drop external events in fullcalendar 的解决方案.但是，在此演示中，所有外部事件的持续时间为 2 小时(因为 defaultEventMinutes 参数设置为 120)。我正在尝试更改此演示以管理具有不同持续时间的事件。比如说，“我的事件 1”是 45 分钟，“我的事件 2”是 165 分钟，等等。

一开始我虽然可能有一个属性来存储 eventObject 中的持续时间，但根据文档，情况并非如此。
然后，我认为可以在开始拖动事件时更改 'defaultEventMinutes' 的值。但显然，如果不重建整个日历，我就无法做到。

在您看来，满足此要求的最佳方法是什么？
预先感谢您的建议...

Answer 1

对此也进行了处理，并以这种方式解决了 fullCalendar 上显示的持续时间:

fullCalendar 具有自定义的“setOptions”功能。

有一个名为“dragMinutes”的 fullCalendar 属性，可以在元素 $(this).draggable({start:...}) 期间设置。

这是自定义 setOptions 的代码:

 ...
    function Calendar(element, options, eventSources) {
        var t = this;

        // hack for setting options that updates
        function setOptions(new_options, refresh) {
            $.extend(options, new_options);
            if (refresh) {
                var viewName = currentView.name;
                changeView(viewName, true);
            }
        }
    // exports ... 
    t.setOptions = setOptions;
    ...

下面是在 fullCalendar 中处理“dragMinutes”选项的代码:

/* External Dragging
--------------------------------------------------------------------------------*/


function dragStart(_dragElement, ev, ui) {
    hoverListener.start(function (cell) {
        clearOverlays();
        if (cell) {
            if (cellIsAllDay(cell)) {
                renderCellOverlay(cell.row, cell.col, cell.row, cell.col);
            } else {
                var d1 = cellDate(cell);
                if (opt('dragMinutes'))
                    var d2 = addMinutes(cloneDate(d1), opt('dragMinutes'));
                else
                    var d2 = addMinutes(cloneDate(d1), opt('defaultEventMinutes'));
                renderSlotOverlay(d1, d2);
            }
        }
    }, ev);
}

这是我如何使事件可拖动并更新“dragMinutes”:

    // make the event draggable using jQuery UI
    $(this).draggable({
        containment: 'document',
        // return a custom styled elemnt being dragged
        helper: function (event) {
            return $('<div class="uv-planning-dragging"></div>').html($(this).html());
        },
        opacity: 0.70,
        zIndex: 10000,
        appendTo: 'body',
        cursor: 'move',
        revertDuration: 0,
        revert: true, 
        start: function (e, ui) {
            // set the "dragMinutes" option in fullCalendar so shown interval about to be added is correct.
            var data = $(this).data('eventObject');
            if (data) {
                var min = data.jsonProps.durationMsec / 1000 / 60;
                if (macroCalendar.calendar) {
                    macroCalendar.calendar.fullCalendar('setOptions', { dragMinutes: Math.round(min) }, false);
                }
            }
        },
        stop: function (e, ui) {
            // further process

        }
    });

希望能帮助到你。