8

我有一个关于名为“fullcalendar”的插件的问题，可以在这里查看https://fullcalendar.io/docs/event-data

我想要实现的是对位于我的 jsfiddle 链接下方的当前脚本进行修改。当外部事件被拖放到周五附近时，创建一个事件拆分块，3天的事件块将拆分并跳过周六和周日，并将其余的事件块放置在周一和周二。

我下面的脚本当前将三天的外部事件放置在您放置事件之日后的任意三天。

JSFiddle 链接http://jsfiddle.net/rayshinn/G3VTa/

要创建 3 天块，我添加了以下内容

var threeDayBlock = new Date(date.getTime());
threeDayBlock.setDate(threeDayBlock.getDate() + 2);

copiedEventObject.end = threeDayBlock;
4

2 回答 2

2

答案与之前的https://stackoverflow.com/a/17868692/975520类似，但是通过支持所需的来扩展它four days events（并且可以简单地切换到五个，我正在考虑一个没有 ifs 的解决方案，正在工作它...）并改进主体 if 语句。

这里有一个为期 5 天的事件： http: //jsfiddle.net/IrvinDominin/z27a2/6/该脚本通过检查开始日和接下来的几天是否在同一周内来构建日历事件数组，如果没有将事件拆分为数组的两个不同元素。最后，代码循环这个数组并在日历上创建事件。

我正在考虑一个更好的解决方案，但现在就是这样

代码：

$('#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');

        var firstDay = new Date(date.getTime());
        while (firstDay.getDay() == 0 || firstDay.getDay() == 6) {
            firstDay.setDate(firstDay.getDate() + 1);
        }

        var secondDay = new Date(firstDay.getTime());
        do {
            secondDay.setDate(secondDay.getDate() + 1);
        } while (secondDay.getDay() == 0 || secondDay.getDay() == 6);

        var thirdDay = new Date(secondDay.getTime());
        do {
            thirdDay.setDate(thirdDay.getDate() + 1);
        } while (thirdDay.getDay() == 0 || thirdDay.getDay() == 6);

        var fourthDay = new Date(thirdDay.getTime());
        do {
            fourthDay.setDate(fourthDay.getDate() + 1);
        } while (fourthDay.getDay() == 0 || fourthDay.getDay() == 6);

        var dateAdd = new Array();

        if (getWeekNr(firstDay) == getWeekNr(fourthDay)) {
            var copiedEventObject = $.extend({}, originalEventObject);
            copiedEventObject.start = firstDay;
            copiedEventObject.end = fourthDay;
            copiedEventObject.allDay = allDay;
            dateAdd.push(copiedEventObject);
        } else if (getWeekNr(firstDay) == getWeekNr(thirdDay)) {
            var copiedEventObject = $.extend({}, originalEventObject);
            copiedEventObject.start = firstDay;
            copiedEventObject.end = thirdDay;
            copiedEventObject.allDay = allDay;
            dateAdd.push(copiedEventObject);

            var copiedEventObject = $.extend({}, originalEventObject);
            copiedEventObject.start = fourthDay;
            copiedEventObject.end = fourthDay;
            copiedEventObject.allDay = allDay;
            dateAdd.push(copiedEventObject);
        } else if (getWeekNr(firstDay) == getWeekNr(secondDay)) {
            var copiedEventObject = $.extend({}, originalEventObject);
            copiedEventObject.start = firstDay;
            copiedEventObject.end = secondDay;
            copiedEventObject.allDay = allDay;
            dateAdd.push(copiedEventObject);

            var copiedEventObject = $.extend({}, originalEventObject);
            copiedEventObject.start = thirdDay;
            copiedEventObject.end = fourthDay;
            copiedEventObject.allDay = allDay;
            dateAdd.push(copiedEventObject);
        } else {
            var copiedEventObject = $.extend({}, originalEventObject);
            copiedEventObject.start = firstDay;
            copiedEventObject.end = firstDay;
            copiedEventObject.allDay = allDay;
            dateAdd.push(copiedEventObject);

            var copiedEventObject = $.extend({}, originalEventObject);
            copiedEventObject.start = secondDay;
            copiedEventObject.end = fourthDay;
            copiedEventObject.allDay = allDay;
            dateAdd.push(copiedEventObject);
        }

        $.each(dateAdd, function (index, value) {
            $('#calendar').fullCalendar('renderEvent', value, 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();
        }
    }
});

演示：http: //jsfiddle.net/IrvinDominin/z27a2/5/

于 2013-08-27T15:45:46.017 回答
1

没有内置的解决方案可以做你想做的事，而且多天的事件不能跳过间隔内的几天；所以我喜欢找到一个，这是我的解决方案！

脚本是这样工作的；对于给定的开始日期，我根据周末找到正确的接下来两天，并使用单个日期设置三个变量。对于每个日期，我都会找到周数并使用它来查找是否必须创建多天事件或更多事件。

最相关的代码是：

    var firstDay = new Date(date.getTime());
    while (firstDay.getDay() == 0 || firstDay.getDay() == 6) {
        firstDay.setDate(firstDay.getDate() + 1);
    }

    var secondDay = new Date(firstDay.getTime());
    do {
        secondDay.setDate(secondDay.getDate() + 1);
    } while (secondDay.getDay() == 0 || secondDay.getDay() == 6);

    var thirdDay = new Date(secondDay.getTime());
    do {
        thirdDay.setDate(thirdDay.getDate() + 1);
    } while (thirdDay.getDay() == 0 || thirdDay.getDay() == 6);

检查日期的星期并检查星期日期是否相同，我使用以下功能：

function getWeekNr(today)
{
    Year = takeYear(today);
    Month = today.getMonth();
    Day = today.getDate();
    now = Date.UTC(Year,Month,Day+1,0,0,0);
    var Firstday = new Date();
    Firstday.setYear(Year);
    Firstday.setMonth(0);
    Firstday.setDate(1);
    then = Date.UTC(Year,0,1,0,0,0);
    var Compensation = Firstday.getDay();
    if (Compensation > 3) Compensation -= 4;
    else Compensation += 3;
    NumberOfWeek =  Math.round((((now-then)/86400000)+Compensation)/7);
    return NumberOfWeek;
}
function takeYear(theDate)
{
    x = theDate.getYear();
    var y = x % 100;
    y += (y < 38) ? 2000 : 1900;
    return y;
}

每个范围都添加到用于填充日历的对象数组广告中，使用：

    $.each(dateAdd, function (index, value) {
        $('#calendar').fullCalendar('renderEvent', value, true);
    });

最终代码：

$('#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');

            var firstDay = new Date(date.getTime());
            while (firstDay.getDay() == 0 || firstDay.getDay() == 6) {
                firstDay.setDate(firstDay.getDate() + 1);
            }

            var secondDay = new Date(firstDay.getTime());
            do {
                secondDay.setDate(secondDay.getDate() + 1);
            } while (secondDay.getDay() == 0 || secondDay.getDay() == 6);

            var thirdDay = new Date(secondDay.getTime());
            do {
                thirdDay.setDate(thirdDay.getDate() + 1);
            } while (thirdDay.getDay() == 0 || thirdDay.getDay() == 6);

            var dateAdd = new Array();

            if (getWeekNr(firstDay)==getWeekNr(secondDay) && getWeekNr(firstDay)==getWeekNr(thirdDay)) {
                var copiedEventObject = $.extend({}, originalEventObject);
                copiedEventObject.start = firstDay;
                copiedEventObject.end = thirdDay;
                copiedEventObject.allDay = allDay;
                dateAdd.push(copiedEventObject);
            }
            else {
                if (getWeekNr(firstDay)==getWeekNr(secondDay)){
                    var copiedEventObject = $.extend({}, originalEventObject);
                    copiedEventObject.start = firstDay;
                    copiedEventObject.end = secondDay;
                    copiedEventObject.allDay = allDay;
                    dateAdd.push(copiedEventObject);

                    var copiedEventObject = $.extend({}, originalEventObject);
                    copiedEventObject.start = thirdDay;
                    copiedEventObject.end = thirdDay;
                    copiedEventObject.allDay = allDay;
                    dateAdd.push(copiedEventObject);
                }
                else {
                    var copiedEventObject = $.extend({}, originalEventObject);
                    copiedEventObject.start = firstDay;
                    copiedEventObject.end = firstDay;
                    copiedEventObject.allDay = allDay;
                    dateAdd.push(copiedEventObject);

                    var copiedEventObject = $.extend({}, originalEventObject);
                    copiedEventObject.start = secondDay;
                    copiedEventObject.end = thirdDay;
                    copiedEventObject.allDay = allDay;
                    dateAdd.push(copiedEventObject);
                }
            }

            $.each(dateAdd, function (index, value) {
                $('#calendar').fullCalendar('renderEvent', value, 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();
            }
        }
    });

工作演示：jsFiddle

于 2013-07-25T21:03:09.750 回答