Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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;
like image 372
BaconJuice Avatar asked Jul 23 '13 15:07

BaconJuice


1 Answers

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/

like image 141
Irvin Dominin Avatar answered Nov 15 '22 00:11

Irvin Dominin