jquery FullCalendar custom recurring events

Question

Im using FullCalendar jquery library for creating events. The requirement here is to create recurring events every x days. For example create an event that is recurring on each second Monday (every 14 days in this case).

Currently the library supports weekly or monthly recurring events. How can I achieve this?

Don’t know if that library is extensible, so that you could add your own logic for recurring events; if not, maybe write your own code that calculates the event dates and adds an event for each one individually. (If you don’t want to do this for the next x years upfront, then maybe it could be added when an event such as the user switching to a different month occurs.) — CBroe
Thanks for that! I just want to use the same logic, that is already in place for the weekly recurring and just add a flag to the event (such as the existing dow: [ 1 ] which indicates a recurring event on each monday i.e. dow2: [1], recurring on each second monday) that will be processed from the library accordingly. Can't find actually the current weekly implementation in the code :) — Antonis Polychroniou

DNKROZ DNKROZ · Accepted Answer · 2017-12-01T12:31:14

I think @CBroe is correct, you could achive this using your own logic.

To add events to the calendar you must first populate an array of events, this can then be bound to the calendars events property.

For example:

 var events = getEvents();

$('#myCalendar').fullCalendar({
                    themeSystem: 'bootstrap3',
                    header: {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'month,agendaWeek,agendaDay,listMonth'
                    },
                    weekNumbers: true,
                    weekends: false,
                    navLinks: true, // can click day/week names to navigate views
                    editable: true,
                    eventStartEditable: false,
                    height: 'auto',
                    eventLimit: true, // allow "more" link when too many events
                    events: events,
                    viewRender: function (view, element) {
                        events = getEvents();
                        $('#myCalendar').fullCalendar('removeEvents');
                        $('#myCalendar').fullCalendar('addEventSource', events);
                    },
                });

function getEvents(){
 var events = [];
 var arrayOfDates; //Populate dates at intervals of 14 days

  $.each(arrayOfDates, function () {
                    var date = this;
                        //Create event
                        events.push({
                            title: 'myEvent',
                            start: date,
                            end: date,
                            allDay: true,
                            color: '#228B22',
                            stick: true
                        });

                });
    }

   return events;
}

Well something like that anyway.. this should give you a good starting point

jquery FullCalendar custom recurring events

1 Answers