Skipping weekends and splitting days with an event block of 3 days using fullcalendar

问题

I have a question relating to the plugin called "fullcalendar" that can be viewed here https://fullcalendar.io/docs/event-data

What I would like to achieve is a modification to my current script located below on my jsfiddle link. Which is to create a event split block when the external event is dragged and dropped near for example Friday, the event block of 3 days would split and would skip saturday and sunday and place the rest of the event block on Monday and Tuesday instead.

My script below currently places the external event of three days on any three days following the day you place the event.

JSFiddle Link http://jsfiddle.net/rayshinn/G3VTa/

To create the 3 days block I added the following

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

copiedEventObject.end = threeDayBlock;

回答1:

The answer is similar to the previous https://stackoverflow.com/a/17868692/975520, but extend it by supporting the required four days events (and can be simply switched to five, I'm thinking about a solution without the ifs, working on it...) and improving the principal if statement.

Here for a 5 days event: http://jsfiddle.net/IrvinDominin/z27a2/6/ the script build an array of calendar events by checking if the starting day and following days are in the same week, if not split the event in two different element of the array. At the end the code loop this array and create the event on the calendar.

I'm minding about a better solution, but for now this is it

Code:

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

Demo: http://jsfiddle.net/IrvinDominin/z27a2/5/

回答2:

There is no built in solution to do what you want and a multiple day event can't skip days inside of the interval; so I enjoy to find one, here is my solution!

The script work like this; for the given start date I find the correct following two days according to weekends and set three variables with the single dates. For every date I find the number of week and using it I find if I have to create a multiple day event or more events.

The most relevant code is:

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

to check the week of the date and check if weeks dates are the same I use the function:

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

every range is added to an object array ad used to fill the calendar using:

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

Final code:

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

Working demo:

来源：https://stackoverflow.com/questions/17814762/skipping-weekends-and-splitting-days-with-an-event-block-of-3-days-using-fullcal