Пропуск выходных и разделение дней с блоком событий 3 дней с помощью fullcalender
У меня есть вопрос, касающийся плагина под названием "fullcalender", который можно посмотреть здесьhttp://arshaw.com/fullcalendar/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;
Спасибо, что нашли время, чтобы прочитать этот вопрос, и любая помощь будет очень признательна!
2 ответов
ответ похож на предыдущий 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();
}
}
});
нет встроенного решения, чтобы сделать то, что вы хотите, и событие с несколькими днями не может пропустить дни внутри интервала; поэтому мне нравится найти его, вот мое решение!
скрипт работает следующим образом; для данной даты начала я нахожу правильные следующие два дня в соответствии с выходными и устанавливаю три переменные с одиночными датами. Для каждой даты я нахожу количество недель, и, используя его, я нахожу, нужно ли создавать событие нескольких дней или более событий.
самые актуальные код:
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();
}
}
});