Skip weekends and split days with a 3-day event block using fullcalendar

Question

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

What I would like to achieve is a modification of my current script, located below my link to jsfiddle. That is, to create an event separation block, when an external event is dragged and dropped around, for example, Fridays, the 3-day event block will be split and skip Saturday and Sunday, and instead will place the rest of the event block on Monday and Tuesday.

My script below currently hosts an external event of three days on any three days following the day you host the event.

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

To create a 3 day block, I added the following

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

Answer 1

The answer is similar to the previous fooobar.com/questions/950099 / ... , but expand it by supporting the required four days events (and you can simply switch it to five, I'm thinking of a solution without ifs, working on it ...) and improving the instruction Principal if.

Here for an event of 5 days: http://jsfiddle.net/IrvinDominin/z27a2/6/ script build an array of calendar events, setting that the start day and the next days in the same week, if you do not divide the event into two different elements of the array. At the end of the code, encode this array and create an event on the calendar.

I mean the best solution, but at the moment it's him

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 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/

Answer 2

There is no built-in solution to do what you want, and a multi-day event cannot skip days within an interval; so I like looking for him, here is my solution!

The script works as follows; for a given start date, I find the correct next two days depending on the weekend and set three variables with single dates. For each date, I find the number of the week and use it, I find if I need to create an event for several days or more events.

Most suitable code:

  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 dates and to check if the dates of the week are the same, I use this 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; } 

each range is added to the object array declaration used to populate the calendar using:

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

End 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 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: