本文介绍了每天，每月和每年重复fullcalendar事件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我希望每天，每个月和每周都重复我的活动。根据fullcalendar文档，可以在渲染事件时使用dow参数每周重复进行一次事件。所以，我也用它来每天重复使用下面的代码。 [[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'，网址：'google/'，开始：'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 =cdnjs.cloudflare/ajax/libs/fullcalendar/3.1.0/fullcalendar.css/>< / head>< body><脚本src =cdn.jsdelivr/momentjs/2.14.1/moment-with-locales.min.js>< / script>< script src =https：//code.jquery。 com / jquery-2.1.4.js>< / script>< script src =cdnjs.cloudflare/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: 'google/', 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="cdnjs.cloudflare/ajax/libs/fullcalendar/3.1.0/fullcalendar.css" /> </head> <body> <script src="cdn.jsdelivr/momentjs/2.14.1/moment-with-locales.min.js"></script> <script src="code.jquery/jquery-2.1.4.js"></script> <script src="cdnjs.cloudflare/ajax/libs/fullcalendar/3.1.0/fullcalendar.js"></script> <div id='calendar'></div> </body> </html>
更多推荐
每天,每月和每年重复fullcalendar事件
发布评论