Question

我希望每天，每个月和每周重复我的活动。根据fullcalendar文档，事件可以在渲染事件时使用dow参数每周重复一次。所以，我也用这个来重复日常代码。

 [[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]],
 ]]

有没有办法让它们每个月和每年重复一次？任何帮助将不胜感激。

Answer 1

我会在这里留给新人，对这个问题感兴趣）添加重复事件而不在db中重复记录的一个小技巧。

＆＃39;生日派对＆＃39;是一年一度的活动，＆＃39;会议＆＃39;是每月活动，＆＃39;重复赛事＆＃39;是自定义事件，重复两次，＆＃39;点击Google＆＃39;是一个事件，每个星期一和星期五重复

＆＃13;

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);

    });

  }
});

＆＃13;

#calendar {
	width: 100%;
	margin: 0 auto;
}

＆＃13;

<!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>

＆＃13;

Answer 2

嗯......遗憾的是，您需要使用viewRender事件并将当前年份分配给日期。这是一个已经等待了很长时间的功能;＆＃39 ;-（如果您发现另一种方式，请告诉我！在另一个问题中也是如此：link。

每天，每月和每年重复fullcalendar事件

2 个答案: