Fullcalendar Recurring Events

by Shin Okada

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>
<div id='calendar'></div>

JavaScript

var repeatingEvents = [{
    title:"My repeating event",
    id: 1,
    start: '10:00', // a start time (10am in this example)
    end: '14:00', // an end time (6pm in this example)
    dow: [ 1, 3,5 ], // Repeat monday and thursday
    ranges: [{ //repeating events are only displayed if they are within one of the following ranges.
        start: moment().startOf('week'), //next two weeks
        end: moment().endOf('week').add(7,'d'),
    },{
        start: moment('2017-07-20','YYYY-MM-DD'), //all of february
        end: moment('2017-07-05','YYYY-MM-DD').endOf('month'),
    }],
}];

//emulate server
var getEvents = function( start, end ){
    return repeatingEvents;
}

$('#calendar').fullCalendar({
    defaultDate: moment(),
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    defaultView: 'month',
    editable: true,
    selectable: true,
    timezone: 'local',
    eventRender: function(event, element, view){
        console.log(event.start.format());
        return (event.ranges.filter(function(range){
            return (event.start.isBefore(range.end) &&
                    event.end.isAfter(range.start));
        }).length)>0;
    },
    events: function( start, end, timezone, callback ){
        var events = getEvents(start,end); //this should be a JSON request
        
        callback(events);
    },
});