Saltando i fine settimana e dividendo i giorni con un blocco di eventi di 3 giorni usando fullcalender

Ho una domanda relativa al plugin chiamato “fullcalender” che può essere visualizzato qui http://arshaw.com/fullcalendar/docs/event_data/

Quello che mi piacerebbe ottenere è una modifica al mio script attuale che si trova qui sotto sul mio jsfiddle link. Il che equivale a creare un blocco di suddivisione di eventi quando l’evento esterno viene trascinato vicino ad esempio venerdì, il blocco di eventi di 3 giorni si divide e salta sabato e domenica e posiziona il resto del blocco di eventi lunedì e martedì.

Il mio script in basso posiziona l’evento esterno di tre giorni ogni tre giorni dopo il giorno in cui collochi l’evento.

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

Per creare il blocco di 3 giorni ho aggiunto quanto segue

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

Grazie per aver dedicato del tempo a leggere questa domanda e qualsiasi aiuto sarebbe molto apprezzato!

La risposta è simile alla precedente https://stackoverflow.com/a/17868692/975520 , ma estendila supportando gli four days events richiesti (e può essere semplicemente passata a cinque, sto pensando a una soluzione senza i if , lavorando su di esso …) e migliorando la dichiarazione principale se.

Qui per un evento di 5 giorni: http://jsfiddle.net/IrvinDominin/z27a2/6/ lo script crea una serie di eventi del calendario controllando se il giorno di inizio e i giorni successivi sono nella stessa settimana, se non si divide l’evento in due diversi elementi dell’array. Alla fine il codice esegue il loop di questo array e crea l’evento sul calendario.

Sto pensando ad una soluzione migliore, ma per ora è così

Codice:

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

Non esiste una soluzione integrata per fare ciò che si desidera e un evento di più giorni non può saltare i giorni all’interno dell’intervallo; quindi mi diverto a trovarne uno, ecco la mia soluzione!

La sceneggiatura funziona così; per la data di inizio indicata trovo i seguenti due giorni corretti in base ai fine settimana e imposta tre variabili con le singole date. Per ogni data trovo il numero della settimana e usandolo trovo se devo creare un evento di più giorni o più eventi.

Il codice più pertinente è:

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

per controllare la settimana della data e controllare se le date delle settimane sono le stesse uso la funzione:

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

ogni intervallo viene aggiunto a un annuncio di matrice di oggetti utilizzato per riempire il calendario utilizzando:

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

Codice finale:

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

Demo di lavoro: jsFiddle