Fullcalendar recurring event exclusion

0
votes

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.

1
javascriptfullcalendar
You can use the removeEvents function (fullcalendar.io/docs/event_data/removeEvents). I believe the last line might be what you are looking for. Assuming you know at this point which event object is to be deleted. – Slyvain
Unfortunately Different instances of repeating events should all have the same id @Slyvain, so these events are virtually indistinguishable and using them with removeEvents wouldn't be possible I believe. – Zaxter
It states that idOrFilter can also be a function that returns true for a given event object. If the user clicks on an event, you know the instance of this object and can therefore send it to the "idOrFilter function". I never tried it, but that's how I would implement it. – Slyvain
Thanks, I get it now. I'll give it a try. Any idea how I could get rid of the event from the data source? I'm currently saving all events I get from clientEvents, but I believe that would still reflect the event deleted this way. – Zaxter
I'm now looking into the slicetoad's answer to this question. Looks like a viable solution, but this will require considerable work server side. – Zaxter

1 Answers

2
votes

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