1

I have this problem with the AngularJS Ui-Calendar:

Inside the select callback function from fullcalendar, I create the events by dragging and the event is after that added to my events array.

After the events are created I want to delete some of them and for that reason I prepended a button, delete, that is calling the remove function from Ui-CalendarCalendar. The function is below:

function eventRenderFn(event, element, view) {
    element.find(".fc-content").prepend("<button class='closeon btn btn-danger pull-right'>Delete</button>");
    element.find(".closeon").on('click', function() {
        removeEventById(event);
    });
 }

The problem is that after I delete an event, that event is still displayed on the calendar even if the event was removed from the events array.

I have tried adding the following code in the remove function to rerender the events but that wasn't solving my problem either because it was rerendering just the first time an event was deleted. The code is below:

uiCalendarConfig.calendars.myCalendar.fullCalendar('removeEvents');             
uiCalendarConfig.calendars.myCalendar.fullCalendar('addEventSource', $scope.events);

The calendar looks like bellow: enter image description here

I have been trying to find a solution for that problem for 2 days now.

Thank you for your time.

EDIT:

My remove function is:

function removeEventById(event) {
    angular.forEach($scope.events, function (value, key) {
        if (event._id === value._id) {
            $scope.remove(key);
        }
    });
}

Where $scope.remove(key) is :

$scope.remove = function(index) {
    $scope.events.splice(index, 1);
};
Simina Alin
  • 133
  • 2
  • 10
  • what exactly does the "removeEvent" function do? We need to see that really. – ADyson Aug 22 '17 at 08:18
  • @ADyson I added the remove function. – Simina Alin Aug 22 '17 at 09:02
  • that appears to remove the event from an array called "events", but not from the calendar. I don't see how that array is linked to the calendar. Even if you assigned that array originally as the "events" parameter to fullCalendar, fullCalendar copied at that moment, but does not keep in sync with it. You'd need to call https://fullcalendar.io/docs/event_data/removeEvents/ I think. You might also need to update your server / database, if event data is normally loaded from there. – ADyson Aug 22 '17 at 09:45
  • @ADyson Ui-calenar library has an eventsWatcher impelented, and when $scope.remove is triggerd eventsWatcher.onRemoved is triggered. The function onRemoved has this inside calendar.fullCalendar('removeEvents', event._id); – Simina Alin Aug 22 '17 at 10:17
  • I wrapped removeEventById with a timeout and suddenly the calendar is working properly. I have done this $timeout(removeEventById(event)) inside my evendReaderFn function. – Simina Alin Aug 22 '17 at 10:21
  • how strange. I've no idea why it would need a timeout (how long, by the way?). I'm not familiar with angular so perhaps it's a quirk of that, but there's really no reason I can see why fullCalendar would need that. – ADyson Aug 22 '17 at 10:29
  • @ADyson I don't know why it's happening this. I am quite new to angular and I've been trying to understand this comportment. I found that if i don't use timeout the ui-calendar's `eventsWatcher` won't trigger, and this would cause the problem. – Simina Alin Aug 22 '17 at 10:49
  • how strange. Like I said I don't really know anything about angular, so unfortunately I can't help you with that one – ADyson Aug 22 '17 at 10:59
  • @ADyson Thank you anyway. – Simina Alin Aug 22 '17 at 11:07

0 Answers0