Event disappear after switching months

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.

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

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.

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.

Hi joshkurz,

I followed your suggestion but it didn't work.

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?

I do not think there is an official issue.
On Jun 5, 2014 5:52 AM, "vanHuntsman" notifications@github.com 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)
.

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.

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 notifications@github.com
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

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 jkurz25@gmail.com 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 notifications@github.com
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

@joshkurz

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 notifications@github.com
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

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

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

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)

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

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

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

setting stick to true, is solved my problem

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

stick solved my problem too.

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

stick as true solved my problem too.

@angelix

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

@linkolen

@linkolen thanks... worked for me too

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

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

when using dow and stick together it causes duplicated events

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

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

Navigation Menu

Repository navigation

Event disappear after switching months #99

15 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Event disappear after switching months #99

Description

Activity

joshkurz commented on Apr 13, 2014

hzhou1-godaddy commented on Apr 14, 2014

joshkurz commented on Apr 27, 2014

henyana commented on Apr 30, 2014

M0nter0 commented on Jun 5, 2014

joshkurz commented on Jun 5, 2014

M0nter0 commented on Jun 5, 2014

joshkurz commented on Jun 5, 2014

joshkurz commented on Jun 5, 2014

M0nter0 commented on Jun 5, 2014

joshkurz commented on Jun 5, 2014

dannydinges commented on Jul 25, 2014

ctesene commented on Aug 8, 2014

Unitiser commented on Sep 27, 2014

linkolen commented on Oct 12, 2014

15 remaining items

ggondim commented on Aug 24, 2015

ShortlyMAB commented on Sep 30, 2015

kelvinlogic commented on Apr 21, 2016

maffelbaffel commented on Apr 22, 2016

martin-langhoff commented on Apr 22, 2016

ovarunendra commented on Jun 23, 2016

olefrank commented on Nov 17, 2016

MaxKolle commented on Sep 21, 2017

voloKh28 commented on Apr 13, 2018

jebberwocky commented on May 28, 2018

nikollaih commented on Jan 30, 2019

syamprasadreddy commented on Jan 27, 2020

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions