4

我已经看到了在 fullcalendar 中拖放外部事件的解决方案。但是，在这个演示中，所有外部事件的持续时间都是 2 小时（因为 defaultEventMinutes 参数设置为 120）。我正在尝试更改此演示以管理具有不同持续时间的事件。比如说，“我的事件 1”是 45 分钟长，“我的事件 2”是 165 分钟，等等。

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

根据您的说法，满足这一要求的最佳方法是什么？提前感谢您的建议...

4

7 回答 7

3

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

  1. 具有用于 fullCalendar 的自定义“setOptions”功能。
  2. 有一个名为“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

        }
    });

希望能帮助到你。

于 2013-04-13T14:41:38.967 回答
3

如果有人仍然访问线程并且没有找到解决方案，解决方案是在事件 div 中设置持续时间参数...然后在该 div 上调用 draggable。

$(this).data('event', {
    title: 'new event title', // use the element's text as the event title
    id: $(this).attr('id'),
    stick: true, // maintain when user navigates (see docs on the renderEvent method)
    duration: '03:00:00' // will set the duration during drag of event
});
于 2016-10-01T12:09:10.633 回答
2

目前，我发现的最佳解决方案是在我的事件对象上添加一个持续时间属性，然后创建我的 fullCalendar 的代码如下所示：

    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        editable: true,
        droppable: true, // this allows things to be dropped onto the calendar !!!
        drop: function(date, allDay) { // this function is called when something is dropped

            // retrieve the dropped element's stored Event Object
            var originalEventObject = $(this).data('eventObject');

            // we need to copy it, so that multiple events don't have a reference to the same object
            var copiedEventObject = $.extend({}, originalEventObject);

            // assign it the date that was reported
            copiedEventObject.start = date;
            // HERE I force the end date based on the start date + duration
            copiedEventObject.end = new Date(date.getTime() + copiedEventObject.duration * 60 * 1000);
            copiedEventObject.allDay = allDay;

            // render the event on the calendar
            // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
            $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);

            // is the "remove after drop" checkbox checked?
            if ($('#drop-remove').is(':checked')) {
                // if so, remove the element from the "Draggable Events" list
                $(this).remove();
            }

        }
    });

唯一的缺点是当您拖动事件时，事件持续时间看起来像defaultEventMinutes而不是实际持续时间，但我不知道如何修复它

于 2012-09-25T13:46:08.730 回答
2

这些特殊属性可以在提供的事件对象中指定，也可以是独立的数据属性：

<!-- DURATION OF 3 hours EVENT WILL PROPAGATE TO CALENDAR WHEN DROPPED -->
<div class='draggable' data-event='1' data-duration='03:00' />

https://fullcalendar.io/docs/dropping/eventReceive/

于 2017-04-27T02:02:37.887 回答
0

使用最新的fullcalendar v2.0.2，如果您希望覆盖具有特定的持续时间，您可以在此功能中更新fullcalendar-arshaw.js

function dragStart(_dragElement, ev, ui) {
    hoverListener.start(function(cell) {
        clearOverlays();
        if (cell) {
            var seconds = duration_in_minutes * 1000 * 60 ;
           // we need to pass seconds into milli-seconds
            if (d1.hasTime()) {                 
                d2.add(seconds);
                renderSlotOverlay(d1, d2, cell.col);
            }
            else {
                d2.add(calendar.defaultAllDayEventDuration);
                renderDayOverlay(d1, d2, true, cell.col);
            }
        }
    }, ev);
}

在这里，将您的持续时间传递给外部事件对象，您可以获取该对象_dragElement，然后将其转换为毫秒并将其传递给d2.add(seconds). 这将在该日历上创建毫秒的阴影。

于 2016-03-04T13:44:55.960 回答
0

自 v4 以来，上述某些选项根本不起作用。我面临的问题如下：

我的全天项目都有持续时间，但没有开始时间。当我通过拖动选择开始时间时，开始时间已设置，但一旦我设置结束日期（与上述答案类似），结束日期将再次重置.. setDate 中发生了一些错误功能......结束日期已设置，这部分工作，然后它自己进行比较以找出日期之间的时间差，但日期已经由系统本身设置，导致差异为0，这导致结束日期再次设置为空......

我不得不说我脖子上的巨大疼痛......当它停留在时间线内时效果很好，但仅此而已。

我设法“修复”，更像是通过在 eventDrop 事件中使用这一行来销毁它，但它也适用于您可能使用的任何其他事件：

  • 在此处使用 ajax 更新您的活动，因为您有开始和结束日期 *
  • 日历.refetchEvents(); 在成功函数中

这将重新获取所有事件，这听起来对性能非常不利，但似乎不会占用太多时间，自己尝试一下。这样我的标题、时间等总是最新的，日历显示正确的结束日期。

于 2019-07-30T14:47:00.577 回答
0

对于非外部事件，您可以使用 fullcalendar 设置：

defaultTimedEventDuration: (hours+':00:00'),
forceEventDuration: true,
// defaultEventMinutes: hours*60, // not needed

并且在事件数据中，您没有设置 end 属性（或者您将其设为 null）：

eventData = {
    title: title,
    start: start,
    // end: end, // MUST HAVE no end for fixedduration
    color: '#00AA00',
    editable: true, // for dragging
};

参考： http: //fullcalendar.io/docs/event_data/defaultTimedEventDuration/

提示：如果您想防止由于 可能导致的事件大小调整editable: true，您可以使用 CSS 隐藏句柄：.fc-resizer.fc-end-resizer { display:none; }

于 2016-05-25T18:17:28.643 回答