Event disappear after switching months

[hzhou1-godaddy]

I was using this ui-calendar and found a issue that the event will disappear after switching to different months. The same issue happens on the demo here
http://angular-ui.github.io/ui-calendar/

delete some existing event -> add new event -> move the event to a different date -> go to next month -> go back to the current month
Then the new event will disappear. Note that the event is still on the list but just not on the calendar. I have tracked the behavior in the js console, and the source is still correct, but if I do $('#Calendar').fullCalendar( 'clientEvents' ); it does not show up that newly created event.

[joshkurz]

This is an issue with the fullcalendar library itself. It is a known issue that not event v2 of the calendar.js fixes.

[hzhou1-godaddy]

Is there a workaround for this issue? This would be a pretty serious issue for me since the calendar does not display correctly even the eventsource data is correct.

[joshkurz]

I do not have a great solution for this atm. Honestly right now if this was plaguing my application I would have the renderEvent method in the calendar just do this

 eventsWatcher.onAdded = function(event) {
            scope.destroy();
            scope.init();
 };

as a simple workaround. This makes the calendar flash for a split second, but it's better than disappearing events.

[henyana]

Hi joshkurz,

I followed your suggestion but it didn't work.

[M0nter0]

henyana, for me it's working if I modify it as:

eventsWatcher.onAdded = function (event) {
            scope.calendar.fullCalendar('renderEvent', event);
            scope.destroy();
            getOptions(); //Probl. you need to take the options again.
            scope.init();
        };

Anyway, it provokes the refresh of the calendar, so if the user has move to another screen, it will return to the first one. Is the same if you click 'Hungarian' button in the demo.

When the eventsWatcher.onAdded() calls renderEvent(), the 'stick' property is always undefined.

From fullCalendar documentation:

Normally, the event will disappear once the calendar refetches its event sources (example: when prev/next is clicked). However, specifying stick as true will cause the event to be permanently fixed to the calendar.

So, Why (before deleting) the events are 'sticky' if the property is undefined?
And, if the problem comes from fullCalendar library, do you know if is any issue/bug open in its project?

[joshkurz]

I do not think there is an official issue.
On Jun 5, 2014 5:52 AM, "vanHuntsman" [email protected] wrote:

henyana, for me it's working if I modify it as:

eventsWatcher.onAdded = function (event) {
scope.calendar.fullCalendar('renderEvent', event);
scope.destroy();
getOptions(); //Probl. you need to take the options again.
scope.init();
};

Anyway, it provokes the refresh of the calendar, so if the user has move
to another screen, it will return to the first one. Is the same if you
click 'Hungarian' button in the demo.

When the eventsWatcher.onAdded() calls renderEvent(), the 'stick' property
is always undefined.

From fullCalendar documentation:

Normally, the event will disappear once the calendar refetches its event
sources (example: when prev/next is clicked). However, specifying stick as
true will cause the event to be permanently fixed to the calendar.

So, Why (before deleting) the events are 'sticky' if the property is
undefined?
And, if the problem comes from fullCalendar library, do you know if is any
issue/bug open in its project?

—
Reply to this email directly or view it on GitHub
#99 (comment)
.

[M0nter0]

Hi joshkurz, I've try to reproduce this behavior directly in fullCalendar to open an official issue.
I've create a JSFiddle you can see here: http://jsfiddle.net/vanHuntsman/KzADf/1/
If we add events with 'stick' property as undefined, as documentation says, those events disappear when the calendar refetches.

Why do you think is an issue with the fullcalendar library itself?
Should not the eventsWatcher.onAdded() set the stick property to true?
What I don't really get is why when eventsWatcher.onAdded() calls renderEvent with 'stick' undefined the events are 'sticky' (what is the opposite the doc says).

In fact, if instead of adding the event to the array that is being watched by the eventsWatcher I call

$('#myCalendar').fullCalendar('renderEvent', myEvent, true);

Then it works good.

[joshkurz]

I did add stick === true to the calendar before, but I ran into another
issue. see #85

On Thu, Jun 5, 2014 at 9:23 AM, vanHuntsman [email protected]
wrote:

Hi joshkurz, I've try to reproduce this behavior directly in fullCalendar
to open an official issue.
I've create a JSFiddle you can see here:
http://jsfiddle.net/vanHuntsman/KzADf/1/
If we add events with 'stick' property as undefined, as documentation
says, those events disappear when the calendar refetches.

Why do you think is an issue with the fullcalendar library itself?
Should not the eventsWatcher.onAdded() set the stick property to true?
What I don't really get is why when eventsWatcher.onAdded() calls
renderEvent with 'stick' undefined the events are 'sticky' (what is the
opposite the doc says).

In fact, if instead of adding the event to the array that is being watched
by the eventsWatcher I call

$('#myCalendar').fullCalendar('renderEvent', myEvent, true);

Then it works good.

—
Reply to this email directly or view it on GitHub
#99 (comment)
.

Josh Kurz
www.joshkurz.net

[joshkurz]

I want to make clear though that I am not ruling uiCalendar out of the
equation still though. Just have not found the perfect solution yet.

On Thu, Jun 5, 2014 at 10:11 AM, Josh Kurz [email protected] wrote:

I did add stick === true to the calendar before, but I ran into another
issue. see #85

On Thu, Jun 5, 2014 at 9:23 AM, vanHuntsman [email protected]
wrote:

Hi joshkurz, I've try to reproduce this behavior directly in fullCalendar
to open an official issue.
I've create a JSFiddle you can see here:
http://jsfiddle.net/vanHuntsman/KzADf/1/
If we add events with 'stick' property as undefined, as documentation
says, those events disappear when the calendar refetches.

Why do you think is an issue with the fullcalendar library itself?
Should not the eventsWatcher.onAdded() set the stick property to true?
What I don't really get is why when eventsWatcher.onAdded() calls
renderEvent with 'stick' undefined the events are 'sticky' (what is the
opposite the doc says).

In fact, if instead of adding the event to the array that is being
watched by the eventsWatcher I call

$('#myCalendar').fullCalendar('renderEvent', myEvent, true);

Then it works good.

—
Reply to this email directly or view it on GitHub
#99 (comment)
.

Josh Kurz
www.joshkurz.net

Josh Kurz
www.joshkurz.net

[M0nter0]

Thanks for the links @joshkurz
I´ve try as well adding always stick = true, but then begins to be very unstable. It seems that doubles events when the date is not in the current view. The event appear in its source, but as well in stickySource.events.

function renderEvent(event, stick) {
        normalizeEvent(event);
        if (!event.source) {
            if (stick) {
                stickySource.events.push(event); // First addition
                event.source = stickySource;
            }
            cache.push(event); // Second addition
        }
        reportEvents(cache);
    }

Although adding and removing events directly calling .fullCalendar('renderEvent'...) is working ok for me, I'm really interested in making it run with the power of angular watchs provide by uiCalendar. If I could help anyway, let me know. I've try to isolate the problem just using fullCalendar to report a bug without results.
Anyway, I'm using fullCalendar v1.6.4 and Ui.Calendar v0.8.0, and the efforts should continue to integrate uiCalendar in fullCalendar2.

[joshkurz]

Yes, what we need to do is prove where the bug lives, by creating a failing
test. fullcalendar.js has incorporated a sweet of many tests, which will be
easy to add too. If we can show a test with these results using just
fullcalendar, then we will know for sure where the real issue is.

I have checked the $scope's events array to see if items are being
duplicated or removed, but it is not the case. I figured that if the model
is correct and the view is wrong, the only reasonable explanation is what
is creating the view. The directive is only detecting what fullcalendar
method to call, so its really just the glue between the $scope.events and
how the fullcaelndar is rendering the view based on the events data model.

On Thu, Jun 5, 2014 at 11:27 AM, vanHuntsman [email protected]
wrote:

Thanks for the links @joshkurz https://github.com/joshkurz
I´ve try as well adding always stick = true, but then begins to be very
unstable. It seems that doubles events when the date is not in the current
view. The event appear in its source, but as well in stickySource.events.

function renderEvent(event, stick) {
normalizeEvent(event);
if (!event.source) {
if (stick) {
stickySource.events.push(event); // First addition
event.source = stickySource;
}
cache.push(event); // Second addition
}
reportEvents(cache);
}

Although adding and removing events directly calling
.fullCalendar('renderEvent'...) is working ok for me, I'm really interested
in making it run with the power of angular watchs provide by uiCalendar. If
I could help anyway, let me know. I've try to isolate the problem just
using fullCalendar to report a bug without results.
Anyway, I'm using fullCalendar v1.6.4 and Ui.Calendar v0.8.0, and the
efforts should continue to integrate uiCalendar in fullCalendar2.

—
Reply to this email directly or view it on GitHub
#99 (comment)
.

Josh Kurz
www.joshkurz.net

[dannydinges]

Any updates on this? Seems like a pretty major problem.

[ctesene]

I created pull request #140, this is the fix I am currently using

[Unitiser]

I'm not sure if thats related, but I just fixed a similar issue. When i modified a date than switched the calendar view (day/week/next month), the event would desapear. When i checked the object before and after, i noticed that the date object type changed from FCMoment to Moment. To fix the issue, I simply had to convert the Moment to a FCMoment using $.fullCalendar.moment(date, format). (My guess is that the same thing happens when you give it a String or a Date)

[linkolen]

just go to your calendar.js and change onAdded
eventsWatcher.onAdded = function(event) {
scope.calendar.fullCalendar('renderEvent', event,true);
};
Work's for me 👍

[M0nter0]

@Unitiser , @linkolen , in which version are those suggestions based?
@linkolen, your suggestion on Ui.Calendar v0.8.0 provokes the duplication of the slots when the date of add is not in the current window view.

[linkolen]

@vanHuntsman the last one i used this link https://github.com/angular-ui/ui-calendar/blob/master/src/calendar.js#L251

i also used this tutorial http://www.oodlestechnologies.com/blogs/Fullcalendar-Walk-through-with-AngularJS

[desertzebra]

@linkolen thanks. Your solution, worked for me. By passing the third argument as true, to fullCalendar, the events are now sticking.

[linkolen]

@desertzebra you are welcome.

[alexanderchan]

Awesome guys. @linkolen thanks and also @M0nter0 for adding the reference. Maybe we need a pr for this.

[PierreBrisorgueil]

@linkolen Thanks :) ( FullCalendar v2.1.1 && last angular ui calendar )

[anthony-foulfoin]

Same problem for me with fullcalendar 2.2.6 and latest angular ui calendar

[anphu7492]

Hi, I got this problem and then I modified the onAdded function as @linkolen suggested. It worked, but then I realized that when I dragged and dropped an event and tried to update it, I got this error: TypeError: Converting circular structure to JSON. I noticed that the event object has the "source" attribute which makes the event object have circular structure. Does anybody have the same issue? Or can you suggest a solution for this?

[Dlsqueak]

@anphu7492 I'm getting the same issue with the TypeError using @linkolen suggesting. In fact if I go in to modify the date object at all (i.e. increment the hour) I get that error. Still looking into a fix, either for the original issue that doesn't lead to this error, or a way around this.

EDIT:
It's a bit hacky, but I fixed it by doing the following in my eventDrop handler (which I define as alertOnDrop):
$scope.alertOnDrop = function(event, delta){
if (event.source){
event.source = null;
}

After doing this, works like a charm. I had to add it to the eventResize handler as well. I'm sure there's a better way, but this works for now.

[anphu7492]

Hi @Dlsqueak , Thank you for your suggestion. I also did the same thing. Actually, I deleted the 'source' property whenever I have to do something with the server. :D

[jstoddardiv]

@linkolen Your solution works awesome for me. Thanks! (FullCalendar v2.1.1)

[linkolen]

you are welcome @jstoddardiv

[erickne]

@linkolen thanks dude!

[angelix]

If you add the event with the stick flag true then the event will stick to the calendar.
CAUTION: The minified version is not working properly. Use the src/calendar.js

var event = {
            title : $scope.newSchedule.expertise.toUpperCase().replace('-','_'),
            start : date,
            end : moment(date).add($scope.newSchedule.duration | 0 , "minutes").toDate(),
            stick : true, 
            // expertise : $scope.newSchedule.expertise,
            // type : $scope.newSchedule.type,
            // repeat : $scope.newSchedule.repeat,
        };

[laving1977]

Still don't get it working properly. Is there a one complete fix on this issue?

[ggondim]

The stick property worked for me. Perhaps this issue can be closed.

[ShortlyMAB]

fullCalendar( 'renderEvent', event [, stick ] )

setting stick to true, is solved my problem

[kelvinlogic]

The calender is supposed to load monthly events. notice the event persist when switching between different days and weeks within the same month.

[maffelbaffel]

stick solved my problem too.

[martin-langhoff]

This is a bit of a FAQ of FC itself. Set event to stick. FC author explains his rationale on #353 .

[ovarunendra]

stick as true solved my problem too.

[olefrank]

Thanks @angelix and @linkolen. Both suggestions works. I prefer the one by angelix.

[MaxKolle]

@linkolen thanks... worked for me too

[voloKh28]

When you paste stick: true to your event object you also need to add option when call renderEvent

$(fullCalendar).fullCalendar('renderEvent', event, true);

[jebberwocky]

when using dow and stick together it causes duplicated events

[nikollaih]

Hi joshkurz, I've try to reproduce this behavior directly in fullCalendar to open an official issue.
I've create a JSFiddle you can see here: http://jsfiddle.net/vanHuntsman/KzADf/1/
If we add events with 'stick' property as undefined, as documentation says, those events disappear when the calendar refetches.

Why do you think is an issue with the fullcalendar library itself?
Should not the eventsWatcher.onAdded() set the stick property to true?
What I don't really get is why when eventsWatcher.onAdded() calls renderEvent with 'stick' undefined the events are 'sticky' (what is the opposite the doc says).

In fact, if instead of adding the event to the array that is being watched by the eventsWatcher I call

$('#myCalendar').fullCalendar('renderEvent', myEvent, true);

Then it works good.

$('#myCalendar').fullCalendar('renderEvent', myEvent, true); this work for me, thank you

[syamprasadreddy]

just go to your calendar.js and change onAdded
eventsWatcher.onAdded = function(event) {
scope.calendar.fullCalendar('renderEvent', event,true);
};
Work's for me 👍

yes thanks a lot u gave me correct solution

[Hasan-Mainul]

$scope.getAllTimelineByPOID = function (PurchaseOrderID) {
timelineService.getAllTimelineByPOID(PurchaseOrderID).then(function (res) {
if (res.data.length > 0) {
$scope.timelineList = formatDate(res.data, '', ["PlannedDate", 'ActualDate', 'LastModified']);
var calenderval = res.data;
//Cache= true;
angular.forEach(calenderval, /stick,/ function (value) {
$scope.events.push({
title: value.Description,
start: value.ActualDate
//Cache: true
//stick: true
//end: value.ActualDate,
//allDay: false

                });
            });
            $scope.eventSources = [$scope.events];
            console.log($scope.eventSources);

            for (var i = 0; i < $scope.timelineList.length; i++) {
                $scope.timelineList[i].ActualDate = new Date($scope.timelineList[i].ActualDate);
                $scope.timelineList[i].LastModified = new Date($scope.timelineList[i].LastModified);
            }
        }
        else {
            $scope.timelineList.push($scope.timeline);
        }
    });
}; 

i'm facing same problem , help me out
After switching month or after hitting today icon event date disappear

[Hasan-Mainul]

Still don't get it working properly. Is there a one complete fix on this issue?

i'm also looking for it