为多天的事件分隔div对象(fc-event)

时间:2014-05-02 08:32:27

标签: jquery fullcalendar

使用jquery fullcalendar拖动工作外部事件。

我想知道,当用户使用句柄栏拖动将某个事件扩展到更多日期时,是否有可能创建多个事件div object(fc-event)

现在它只显示所有选定日期的一个div(fc-event),每天需要单独div s(fc-event)。

1 个答案:

答案 0 :(得分:1)

您可以使用eventResize事件:

  

调整大小时停止并且事件的持续时间发生了变化。

在克隆元素并在其上设置新的开始/结束日期的事件中,然后使用renderEvent方法在日历上呈现它;最后记得使用revertFunc

恢复标准调整大小效果

代码:

$('#mycalendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    editable: true,
    events: [{
        title: 'event1',
        start: '2014-05-02'
    }, {
        title: 'event2',
        start: '2014-05-10'
    }],
    eventResize: function (event, dayDelta, minuteDelta, revertFunc) {
        var originalEventObject = event;

        for (var i = 0; i < dayDelta; i++) {
            var selectedIndex = parseInt(originalEventObject._id.replace(/_fc/, '') - 1);
            var copiedEventObject = $.extend({}, $("#mycalendar").fullCalendar("clientEvents")[selectedIndex]);
            copiedEventObject.source = null;
            var newDay = new Date(copiedEventObject.start);
            newDay.setDate(newDay.getDate() + i + 1);
            copiedEventObject._id = "_fc" + parseInt($("#mycalendar").fullCalendar("clientEvents").length + 1);
            copiedEventObject.start = newDay;
            copiedEventObject.end = newDay;
            $('#mycalendar').fullCalendar('renderEvent', copiedEventObject, true);
        }

        revertFunc();
    }
});

演示:http://jsfiddle.net/IrvinDominin/p9JFq/