0

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.

Cœur
  • 37,241
  • 25
  • 195
  • 267
Zaxter
  • 2,939
  • 3
  • 31
  • 48
  • You can use the `removeEvents` function (http://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 Oct 01 '15 at 08:50
  • Unfortunately [Different instances of repeating events should all have the same id](http://fullcalendar.io/docs/event_data/Event_Object/) @Slyvain, so these events are virtually indistinguishable and using them with `removeEvents` wouldn't be possible I believe. – Zaxter Oct 01 '15 at 08:59
  • 1
    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 Oct 01 '15 at 09:06
  • 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 Oct 01 '15 at 09:12
  • I'm now looking into the slicetoad's answer to [this question](http://stackoverflow.com/questions/15161654/recurring-events-in-fullcalendar). Looks like a viable solution, but this will require considerable work server side. – Zaxter Oct 01 '15 at 09:18
  • Indeed, it is clean, but looks like heavy processing. – Slyvain Oct 01 '15 at 10:41

1 Answers1

2

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;
    }
    }
Alejandro Lasebnik
  • 816
  • 8
  • 10