events/eventSources is not updating

[mattoliver]

I have tried every solution I have found, including rerenderEvents, refetchEvents, etc. I even spliced the array to empty it and then pushed each event back on the array to no success. Here is my code for updating eventSources (shortCalendar is the source array that is updated via factory):

  $scope.$watch(function () { return Events.shortCalendar }, function (newVal, oldVal) {
    if (typeof newVal !== 'undefined') {
        $scope.eventsSource.splice(0, $scope.eventsSource.length);
        for(var i = 0; i < Events.shortCalendar.length; i++)
        {
          $scope.eventsSource.push(Events.shortCalendar[i]);
          console.log('add 1');
        }
    }
});

  $scope.update = function() {
        uiCalendarConfig.calendars['calendar'].fullCalendar('rerenderEvents');
        uiCalendarConfig.calendars['calendar'].fullCalendar('render');
  };

Thanks so much for any help, really appreciated.

[alexjoverm]

Same here, I've been trying out as well. Also tried out rerenderEvents and refetchEvents, in my case event they are rendered twice (the events on the day are duplicated)

[dboundz]

Same here @mattoliver

[Sefriol]

Try to identify the problem by using ng-inspector -tool for Firefox / Chrome or Batarang 0.4.3 for Chrome.

I just took a quick look at my calendar, and it seems that eventSources are saved to 2 different scopes. Try to identify which scope you are splicing and look if both eventsources have changed.

If not, there lies the problem. EventSources needs to be changed for both scopes.

Edit: Ofc, problem might be something else entirely, but I just gave an idea.

[mattoliver]

hey @Sefriol , thanks for your help with this! I checked and both the $scope as well as the uiCalendar object both have the updated eventSources object, but are still not updating on the calendar itself. Here is what the object looks like:

[Object]
     0: Object
            __id: 1
            allDay: true
            color: "#9DED6C"
            editable: false
            end: Mon May 25 2015 06:00:00 GMT-0700 (Pacific Daylight Time)
            id: 104
            start: Mon May 25 2015 06:00:00 GMT-0700 (Pacific Daylight Time)
            title: "test"
            url: "#/events/104"
            __proto__: Object
            length: 1
            __proto__: Array[0]

[mattoliver]

I honestly don't know what fixed it for me, unfortunately I was changing a lot at the same time. But here is the code that finally works for me (its pretty ugly since I've been changing/playing with so many different solutions):

angular.module('vendor').controller('CalendarCtrl', ['$scope', '$rootScope', 'Events', 'User', 'loadCalendar', 'uiCalendarConfig', function($scope, $rootScope, Events, User, loadCalendar, uiCalendarConfig)
{


  $rootScope.alerts = [];

  /* config object */
  $scope.uiConfig = {
    calendar:{
      height: "auto",
      editable: true,
      timezone: "local",
      eventLimit: 2,
     // defaultView: "basicWeek",
      header: {
        left: 'month,basicWeek,basicDay',
        center: 'title',
        right: 'prev,next'
      },
      dayClick: $scope.alertEventOnClick,
      eventDrop: $scope.alertOnDrop,
      eventResize: $scope.alertOnResize
    }
  };

$scope.events = [loadCalendar];    //loadCalendar is the initial calendar array passed in from the resolve function in my router
$scope.eventSources = [$scope.events];

$scope.$watch(function () { return Events.shortCalendar }, function (newVal, oldVal) {
    if (typeof newVal !== 'undefined') {
        $scope.events.splice(0, $scope.events.length);
        for(var i = 0; i < Events.shortCalendar.length; i++)
        {
          $scope.events.push(angular.copy(Events.shortCalendar[i]));
        }
        if(uiCalendarConfig.calendars['calendar'] != undefined) // had to add this if statement because it was running this code before the calendars array was initialized
        {
          uiCalendarConfig.calendars['calendar'].fullCalendar('rerenderEvents');
          console.log('events:');
          console.log($scope.eventSources);
          console.log('shortCalendar:');
          console.log(Events.shortCalendar)
        }
    }
});


}]);

[antoinepairet]

I believe this is a duplicate of #275
Please see my comments there.
Regards

[EsteBusta]

Any updates?

[Sefriol]

At least some of the problems were fixed when I last time tried to use it with the latest version. I honestly don't have time for this project atm, but I think it would help others to figure this out, if you tell when this problem occurs and how to replicate it now. @EsteBusta

[EsteBusta]

You're right @Sefriol, i did some manually using to handle this issue (some ng -if and timeout) , it is not the best way , but if i will try to make it better to Contribute !

Greetings !

[uzigula]

Hi Guys, I solved this forcing to refresh the calendar directive in this way

in my controller when update the arrays of the calendar I put somthing like this

//before perform operation
vm.refreshCalendar=false;
// code that update the array

// at the end
$timeout(function() { vm.refreshCalendar=true;}, 1);

I get a little flicker due to refreshing the directive but works

I hope this help somebody

regards

[davidetrapani]

Hi! It's been a long time since this issue was opened, any news?
+1

[jdnichollsc]

My solution:
uiCalendarConfig.calendars.myCalendar.fullCalendar('removeEvents');
uiCalendarConfig.calendars.myCalendar.fullCalendar('addEventSource', events);

Regards, Nicholls

[Maskime]

👍 Did @jdnichollsc solution,
I guess you could add that the uiCalendarConfig is available through dependency injection:

angular.module('myApplication').module('modWithCalendar').controller('CalendarController', ['uiCalendarConfig', function(uiCalendarConfig){...}]);

[jvnicholson]

+1 for @jdnichollsc solution. Thx!

[HashtagPurvi]

+1 for @jdnichollsc solution. Thanks a lot.
Finally able to get through it !!

[mariohmol]

+1 for @jdnichollsc solution.

[qidaneix]

@jdnichollsc cloud you explain it more clear? I don't know where to add it, thank you

[HashtagPurvi]

@qidaneix Hey.. To answer your question, I added these two lines in my controller where you are initializing the eventSource. And I did it right after I assigned values to my eventSource Array.
I hope this helps !

[qidaneix]

@HashtagPurvi Hey. I did it the same way, but it does not work yet. I added them after the eventSource gets data from ajax request, The events added from ajax request would not show in the calendar when I switch the month(prev and next). Do you know how to solute it? Thank you anyway!

[HashtagPurvi]

I suggest debugging through the code and see if your date is coming in right format.
This can sometimes be an issue.
Apart from that sending your code might help everyone to c what the real issue is !

[qidaneix]

Oh, my problem is more like #99 , but I did find a good solution. Here is my code

    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();
    $scope.events = [
        {title: 'All Day Event',start: new Date(y, m, 1)},
        {title: 'Long Event',start: new Date(y, m, d - 5),end: new Date(y, m, d - 2)},
        {id: 999,title: 'Repeating Event',start: new Date(y, m, d - 3, 16, 0),allDay: false},
        {id: 999,title: 'Repeating Event',start: new Date(y, m, d + 4, 16, 0),allDay: false},
        {title: 'Birthday Party',start: new Date(y, m, d + 1, 19, 0),end: new Date(y, m, d + 1, 22, 30),allDay: false},
        {title: 'Click for Google',start: new Date(y, m, 28),end: new Date(y, m, 29),url: 'http://google.com/'}
    ];

    /* event sources array*/
    $scope.eventSources = [$scope.events];

    $scope.$on('EventResComplete', function(){      //an ajax request response success
        for(var i=0; i < resEvents.length; i++){  //Events from ajax request has saved in service 'resEvents'
                var event = {};
                event.title = resEvents[i].title;
                event.start = resEvents[i].endTimeObj.toDate();
                console.log(event);
                $scope.events.push(event);
            }
        }

        $scope.eventSources = [$scope.events];
        uiCalendarConfig.calendars['myCalendar'].fullCalendar('removeEvents');
        uiCalendarConfig.calendars['myCalendar'].fullCalendar('addEventSource', $scope.eventSources);
    });

    /* config object */
    $scope.uiConfig = {
        calendar:{
            //height: 450,
            firstDay: 0,
            lang: 'zh-cn',
            editable: true,
            header:{
                //left: 'month basicWeek basicDay agendaWeek agendaDay',
                left: 'title',
                right: 'today prev,next'
            },
            eventClick: $scope.alertOnEventClick,
            eventDrop: $scope.alertOnDrop,
            eventResize: $scope.alertOnResize,
            eventRender: $scope.eventRender
        }
    };

When I get the resEvents at first, it can showed on calendar. When I switching month, the events from resEvents wouldn't show any more, others are there still. I don't know why it happened

[qidaneix]

@HashtagPurvi I got it!
Just add

event.stick = true;

for every event.
Thank you anyway!

[cglane]

$('#my-calendar').fullCalendar('removeEvents')
$('#my-calendar').fullCalendar('addEventSource',$scope.events)
this did it for me,

[elgambet]

+1 for @jdnichollsc solution.

[iain17]

I got the same problem. However, I think I might've found the real answer why it's not working.
Using parts qidaneix his code example I'll try and explain:
Defining:
$scope.events = [ {title: 'All Day Event',start: new Date(y, m, 1)}, {title: 'Long Event',start: new Date(y, m, d - 5),end: new Date(y, m, d - 2)} ];
And then defining:
$scope.eventSources = [$scope.events];
With as html:
<div ui-calendar="calendarOptions" ng-model="eventSources"></div>

Then most of you expect that once you change $scope.events the calendar changes.
But of course it doesn't! $scope.eventSources is defined once with the initial contents, the contents of this variable stays the same even if you change $scope.events
When changing
$scope.events[0][0].title = "test123";

To make a long story short. What fixed it for me was actually changing $scope.eventSources[0]. That'll trigger a update in full calendar.

Code example from what I've got running:

$scope._days = [
        {title: 'All Day Event',start: new Date()},
        {title: 'Long Event',start: new Date(),end: new Date()},
        {id: 999,title: 'Repeating Event',start: new Date(),allDay: false}
    ];

    $scope.$watch('days', function(days) {
        var events = [];
        for(var i in days) {
            var day = days[i];
            if(!day.times)
                continue;
            console.log('times', day.times);
            for(var ii in day.times) {
                var time = day.times[ii];
                events.push({
                    title: time.description,
                    start: new Date(time.started),
                    end: new Date(time.ended),
                    allDay: false
                    // className: []
                });
            }
        }
        $scope.eventSources[0] = events;
    });
    $scope.eventSources = [$scope._days];

I intentionally left $scope._days defined to make it easier to understand what is going on.

The real problem lies with this ridiculous ng-model. I suggest just having a that contains ng-model="days" instead of this ng-model="eventSources" thing.

Hope it helps.

[JalalSordo]

This is how i do it :

function refreshCalendar(events){
    uiCalendarConfig.calendars.myCalendar.fullCalendar('gotoDate', $scope.aWeekStart);
    uiCalendarConfig.calendars.myCalendar.fullCalendar('removeEvents');
    uiCalendarConfig.calendars.myCalendar.fullCalendar('addEventSource', events);
 }

[DarkNami]

This is my solution:

$scope.$on('eventChanged', function(event, data) {
	console.log('eventChanged');
	$timeout(function () {
		// Event update
		$scope.events.push({
			title: 'New event',
			start: new Date(y, m, 24)
		});
	}, 1);
});

[olivia-alexa]

Hi,
No need to do anything, Just add this line to the "New Event".
stick = true;

Ex;
var event = {
title : 'New event',
start : new Date(2017, 03, 27),
stick : true;
};

I hope, it works.Thanks..

[Yim-Sekny]

Hi
if you want to update calendar source first you need to remove event then add new eventSource into that calendar

function refreshCalendar(data){ uiCalendarConfig.calendars['calendar'].fullCalendar('removeEvents');// for remove event uiCalendarConfig.calendars['calendar'].fullCalendar('addEventSource', data);//data = new source that you want insert into calendar }

[rabierAmbroise]

yimseknyCorarl solution work for me, btw i'm using Angular2 with full calendar, thx!

[borellaster]

Hi,

This works for me

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

<div id="myCalendar" calendar="myCalendar" ui-calendar="vm.uiConfig.calendar" ng-model="vm.eventSources"></div>

VERY IMPORTANT
SchedulesListCtrl.$inject = [..., 'uiCalendarConfig'];
function SchedulesListCtrl(..., uiCalendarConfig) { //your code }

Thanks,
Felipe

[jdnichollsc]

I'm glad that my solution has been useful, @mattoliver I think you can close this issue