使用fullcalender跳过3天的事件块，周末和分割日 [英] Skipping weekends and splitting days with an event block of 3 days using fullcalender
问题描述
我有一个与名为fullcalender的插件有关的问题，可以在这里查看 http：// arshaw.com/fullcalendar/docs/event_data/
我想实现的是对我的jsfiddle链接下面的当前脚本的修改。当外部事件被拖放到附近（例如星期五）时，将创建一个事件拆分块，3天的事件块将分割，并且将跳过星期六和星期日，而将其余事件块放置在星期一和星期二。 / p>
下面的脚本目前在放置事件的当天之后的任何三天内放置了三天的外部事件。
JSFiddle链接 http://jsfiddle.net/rayshinn / G3VTa /
要创建3天块，我添加了以下内容：
var threeDayBlock = new Date（date.getTime（））;
threeDayBlock.setDate（threeDayBlock.getDate（）+ 2）;
copiedEventObject.end = threeDayBlock;
感谢您花时间阅读此问题，我们将非常感谢您的帮助！
答案与之前的 https ：//stackoverflow.com/a/17868692/975520 ，但通过支持所需的四天事件来扩展它（并且可以简单地切换为五个，I想着一个没有ifs的解决方案，对它进行研究......）并改进了主要的if语句。
这里有一个5天的事件： http://jsfiddle.net/IrvinDominin/z27a2/6/ 该脚本通过以下方式构建日历事件数组：检查开始日期和接下来的日期是否在同一周，如果没有将事件分成两个不同的数组元素。最后，代码循环这个数组，并在日历上创建事件。
我正在考虑一个更好的解决方案，但现在就是这样了
Code：
$（'＃calendar'）。fullCalendar（{
header：{
left：'prev，next today'，
center：'title'，
right：'month，agendaweek，agendaDay'
}，
可编辑：true，
droppable：true，//这可以将东西放到日历上!!!
drop：function（date，allDay）{//当某些东西被删除时调用此函数
//检索已删除元素的存储事件对象
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（f irstDay.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（）; （getWeekNr（firstDay）== getWeekNr（fourthDay））{
var copiedEventObject = $ .extend（{}，originalEventObject）;
if
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）;
}）;
//是否勾选删除后删除复选框？
if（$（'＃drop-remove'）。is（'：checked'））{
//如果是，从Draggable Events列表中删除元素
$（此）卸下摆臂（）;
}
}
}）;
演示： http://jsfiddle.net/IrvinDominin/z27a2/5/
I have a question relating to the plugin called "fullcalender" that can be viewed here http://arshaw.com/fullcalendar/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;
Thank you for taking your time to read this question and any help would be greatly appreciated!
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/
这篇关于使用fullcalender跳过3天的事件块，周末和分割日的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
