使用全日歷，跳過周末並分三天進行一次活動

Question

我有一個與名為“ 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;

Answer 1

答案類似於先前的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/

Answer 2

沒有內置的解決方案可以做您想做的事情，而且多日活動不能跳過間隔內的幾天； 所以我很高興找到一個，這是我的解決方案！

腳本的工作方式如下： 對於給定的開始日期，我會根據周末找到正確的接下來兩天，並用單個日期設置三個變量。 對於每個日期，我都會找到星期數，並使用它來確定是否必須創建多日活動或更多活動。

最相關的代碼是：

    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();
            }
        }
    });

工作演示：