全日历重复事件排除

Question

I'm using fullcalendar with drag-drop external events and json data source. These events repeat weekly by default.

I want to now add functionality that enables a user to delete a single instance of this repeating event (like in google calendar). I believe this will require some sort of mechanism to exclude a certain event date from a repeating event.

I wasn't able to find anything in the fullcalendar documentation that would support this sort of behaviour out-of-the-box.

I would prefer a client-side only solution to this.

Answer 1

I have created a jsfiddle that shows how to display a daily concurrent event with the exception of one date. I have included a custom property (excludedDate). In your solution, you will need to include a property called, say, excludedDates which contains an array of dates, and every time you want to delete a single instance you just add the date to this property array. Then, at the eventRender you will loop through this array to see if you need to exclude the event for any given day.

eventRender: function(event, element, view) {

    var theDate = event.start
    var excludedDate = event.excludedDate;
    var excludedTomorrrow = new Date(excludedDate);
     //if the date is in between August 29th at 00:00 and August 30th at 00:00 DO NOT RENDER
    if( theDate >= excludedDate && theDate < excludedTomorrrow.setDate(excludedTomorrrow.getDate() + 1) ) {
        return false;
    }
    }