每天，每月和每年重复fullcalendar事件 [英] Repeat fullcalendar events daily, monthly and yearly
本文介绍了每天，每月和每年重复fullcalendar事件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
[[id：7718，type：null，
resourceIds：[13]，
标题：Kas，
开始：2016-08-10T07：00：00.000 + 05：45，
结束于：2016-08-10T22：00： 00.000 + 05：45，
allDay：false，
注：dsadsa，
会员：，
dow：[0,1,2,3,4,5,6] ，
范围：[[start：2016-08-10T07：00：00.000 + 05：45，end：2021-08-10T07：00：00.000 + 05：45]]，
]]
是否有办法让他们每个月和每年重复一次？任何帮助，将不胜感激。
解决方案
我会在这里留给那些对这个问题感兴趣的新人）
A
'生日聚会'是一年一度的活动，
'会议'是每月活动，
'重复事件'是自定义事件，重复两次，
'Click for Google'是一个事件，每个星期一和星期五重复
var defaultEvents = [{//只是一个活动标题：'Long Event'，开始：'2017-02-07'，结束：'2017-02-10 '，className：'scheduler_basic_event'}，{//自定义重复事件ID：999，标题：'重复事件'，开始：'2017-02-09T16：00：00'，className：'scheduler_basic_event'}， {//自定义重复事件ID：999，标题：'重复事件'，开始：'2017-02-16T16：00：00'，className：'scheduler_basic_event'}，{//只是一个事件标题：'午餐'，开始：'2017-02-12T12：00：00'，className：'scheduler_basic_event'，}，{//只是一个活动标题：'欢乐时光'，开始：'2017-02-12T17：30：00'，className ：'scheduler_basic_event'}，{//月度事件ID：111，标题：'Meeting'，开始：'2000-01-01T00：00：00'，className：'scheduler_basic_event'，重复：1}，{// Annual avent id：222，title：'Birthday Party'，start：'2017-02-04T07：00：00'，description：'This is a cool event'，className：'scheduler_basic_event'，repeat：2}，{//平日活动标题：'Click for Google'，网址：'http://google.com/'，开始：'2017-02-28'，className：'scheduler_basic_event'，dow：[1,5]}]; / /任何价值莫言nthly重复flagvar REPEAT_MONTHLY = 1; //任何值represanting每年重复flagvar REPEAT_YEARLY = 2; $（'＃calendar'）。fullCalendar（{header：{left：'prev，next today'，center：'title'，right：'month，agendaWeek，agendaDay'}，editable：true，defaultDate：'2017-02 -16'，eventSources：[defaultEvents]，dayRender：function（date，cell）{//获取所有事件var events = $（'＃calendar'）。fullCalendar（'clientEvents'）。length？$（'＃calendar' ）.fullCalendar（'clientEvents'）：defaultEvents; //开始一天的时间戳记var dateTimestamp = date.hour（0）.minutes（0）; var recurringEvents = new Array（）; //找到每月重复标志的所有事件，有id，在几个月前的那一天重复var monthlyEvents = events.filter（function（event）{return event.repeat === REPEAT_MONTHLY&& event.id&& moment（event.start）.hour （0）.minutes（0）.diff（dateTimestamp，'months'，true）％1 == 0}）; //找到每月重复标志的所有事件，有id，在几年前的那一天重复var年度Events = events.filter（function（event）{return event.repeat === REPEAT_YEARLY&& event.id&& moment（event.start）.hour（0）.minutes（0）.diff（dateTimestamp，'years'，true）％1 == 0}）; recurringEvents = monthlyEvents.concat（yearlyEvents）; $ .each（recurringEvents，function（key，event）{var timeStart = moment（event.start）; //为事件渲染重新指定事件字段var eventData = {id：event.id，allDay：event.allDay，title：event .title，description：event.description，start：date.hour（timeStart.hour（））。minutes（timeStart.minutes（））.format（YYYY-MM-DD），end：event.end？event。 end.format（YYYY-MM-DD）：，url：event.url，className：'scheduler_basic_event'，repeat：event.repeat}; //移除事件以避免重复$（'＃calendar'）。 fullCalendar（'removeEvents'，function（event）{return eventData.id === event.id&& moment（event.start）.isSame（date，'day'）;}）; //渲染事件$（ '#calendar'）。fullCalendar（'renderEvent'，eventData，true）;}）; }}）;
#calendar {width：100％; margin：0 auto;}
<！DOCTYPE html> < HTML>< HEAD> < meta charset =utf-8> < meta name =viewportcontent =width = device-width> < title> JS Bin< / title> < link rel =stylesheethref =https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.css/>< / head>< body><脚本src =https://cdn.jsdelivr.net/momentjs/2.14.1/moment-with-locales.min.js>< / script>< script src =https：//code.jquery。 com / jquery-2.1.4.js>< / script>< script src =https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.js>< ; /脚本> < div id ='calendar'>< / div>< / body>< / html>
I want to make my events repeat every day, every month and every week. According to fullcalendar documentation events can be repeated weekly using dow parameters while rendering events. So, I also used this as to repeat daily with following code.
[[id:7718, type:null,
resourceIds:[13],
title:Kas,
start:2016-08-10T07:00:00.000+05:45,
end:2016-08-10T22:00:00.000+05:45,
allDay:false,
note:dsadsa,
member:,
dow:[0,1,2,3,4,5,6],
ranges:[[start:2016-08-10T07:00:00.000+05:45, end:2021-08-10T07:00:00.000+05:45]],
]]
Is there a way to make them repeat every month and every year? Any help would be appreciated.
解决方案
I will leave that here for new people, interested in this question ) A little trick for adding recurring events without duplicating records in db.
'Birthday Party' is an annual event, 'Meeting' is monthly event, 'Repeating Event' is custom event, repeating twice, 'Click for Google' is an event, repeating every monday and friday
var defaultEvents = [
{
// Just an event
title: 'Long Event',
start: '2017-02-07',
end: '2017-02-10',
className: 'scheduler_basic_event'
},
{
// Custom repeating event
id: 999,
title: 'Repeating Event',
start: '2017-02-09T16:00:00',
className: 'scheduler_basic_event'
},
{
// Custom repeating event
id: 999,
title: 'Repeating Event',
start: '2017-02-16T16:00:00',
className: 'scheduler_basic_event'
},
{
// Just an event
title: 'Lunch',
start: '2017-02-12T12:00:00',
className: 'scheduler_basic_event',
},
{
// Just an event
title: 'Happy Hour',
start: '2017-02-12T17:30:00',
className: 'scheduler_basic_event'
},
{
// Monthly event
id: 111,
title: 'Meeting',
start: '2000-01-01T00:00:00',
className: 'scheduler_basic_event',
repeat: 1
},
{
// Annual avent
id: 222,
title: 'Birthday Party',
start: '2017-02-04T07:00:00',
description: 'This is a cool event',
className: 'scheduler_basic_event',
repeat: 2
},
{
// Weekday event
title: 'Click for Google',
url: 'http://google.com/',
start: '2017-02-28',
className: 'scheduler_basic_event',
dow: [1,5]
}
];
// Any value represanting monthly repeat flag
var REPEAT_MONTHLY = 1;
// Any value represanting yearly repeat flag
var REPEAT_YEARLY = 2;
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
defaultDate: '2017-02-16',
eventSources: [defaultEvents],
dayRender: function( date, cell ) {
// Get all events
var events = $('#calendar').fullCalendar('clientEvents').length ? $('#calendar').fullCalendar('clientEvents') : defaultEvents;
// Start of a day timestamp
var dateTimestamp = date.hour(0).minutes(0);
var recurringEvents = new Array();
// find all events with monthly repeating flag, having id, repeating at that day few months ago
var monthlyEvents = events.filter(function (event) {
return event.repeat === REPEAT_MONTHLY &&
event.id &&
moment(event.start).hour(0).minutes(0).diff(dateTimestamp, 'months', true) % 1 == 0
});
// find all events with monthly repeating flag, having id, repeating at that day few years ago
var yearlyEvents = events.filter(function (event) {
return event.repeat === REPEAT_YEARLY &&
event.id &&
moment(event.start).hour(0).minutes(0).diff(dateTimestamp, 'years', true) % 1 == 0
});
recurringEvents = monthlyEvents.concat(yearlyEvents);
$.each(recurringEvents, function(key, event) {
var timeStart = moment(event.start);
// Refething event fields for event rendering
var eventData = {
id: event.id,
allDay: event.allDay,
title: event.title,
description: event.description,
start: date.hour(timeStart.hour()).minutes(timeStart.minutes()).format("YYYY-MM-DD"),
end: event.end ? event.end.format("YYYY-MM-DD") : "",
url: event.url,
className: 'scheduler_basic_event',
repeat: event.repeat
};
// Removing events to avoid duplication
$('#calendar').fullCalendar( 'removeEvents', function (event) {
return eventData.id === event.id &&
moment(event.start).isSame(date, 'day');
});
// Render event
$('#calendar').fullCalendar('renderEvent', eventData, true);
});
}
});
#calendar {
width: 100%;
margin: 0 auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.css" />
</head>
<body>
<script src="https://cdn.jsdelivr.net/momentjs/2.14.1/moment-with-locales.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.js"></script>
<div id='calendar'></div>
</body>
</html>
这篇关于每天，每月和每年重复fullcalendar事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
