Repeat fullcalendar events daily, monthly and yearly

Question

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.

Answer 1

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>

Answer 2

Well... sadly, you need to use viewRender event and assign current year to the date. This is a functionality that has been awaited for an long time ;'-( If you discovery another way, please, tell me! Same in this another question: link.