使用fullcalendar跳过周末和使用3天事件块拆分日期 [英] Skipping weekends and splitting days with an event block of 3 days using fullcalendar
问题描述
我有一个关于插件的问题，名为fullcalendar，可以在这里查看 https：// fullcalendar.io/docs/event-data
我想要实现的是对位于我的jsfiddle链接下方的当前脚本的修改。当外部事件被拖放到例如星期五附近时创建一个事件拆分块，3天的事件块将分开并将跳过星期六和星期日，并将其余的事件块放在星期一和星期二。 / p>
下面的我的脚本目前在发布活动的那一天后的任何三天内放置三天的外部事件。
JSFiddle Link 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 ，但通过支持所需的四天活动来扩展它（可以简单地切换到5，我正在考虑没有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，//这允许把东西放到日历上!!!
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（）;
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）;
}）;
//选中删除后删除复选框？
if（$（'＃drop-remove'）。is（'：checked'））{
//如果是这样，请从可拖动事件列表中删除元素
$（此）卸下摆臂（）;
}
}
}）;
演示： http://jsfiddle.net/IrvinDominin/z27a2/5/
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;
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/
这篇关于使用fullcalendar跳过周末和使用3天事件块拆分日期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
