CODEWITHSUNDEEP
javascriptangularfullcalendar
Coach
Coach

Reputation: 521

ap-angular2-fullcalendar & external API

I´d like to add the ap-angular2-fullcalendar to my application. The birthdays from my users and other events should be displayed in the calendar. This is my template:

<angular2-fullcalendar *ngIf="isInitialized; else loadingTemplate"
                       #calendar
                       id="calendar"
                       (onDateChanged)="onDateChanged($event)"
                       [options]="calendarOptions">
</angular2-fullcalendar>

Then, I tried to add the events in the component like so:

ngOnInit() {
    let e = this.memberService.members$;
    e.subscribe((members: IMember[]) => {
    this.loadBirthdays(members).then((events: ICalendarEvent[]) =>      
       this.setEvents(events));
    });
 }

loadBirthdays(members: IMember[]): Promise<ICalendarEvent[]> {
   let years = [];
   years.push(moment().subtract('1', 'year').format('YYYY'));
   years.push(moment().format('YYYY'));
   years.push(moment().add('1', 'year').format('YYYY'));

   members.forEach((member: IMember) => {
      if (member.mainData.birthday) {
         for (let i in years) {
            let event: ICalendarEvent = {
               title: 'Birthday ' + member.firstName + ' ' + member.lastName,
               start: moment(member.birthday).set('year', years[i]).format('YYYY-MM-DD')
            };
            this.events.push(event);
         }
      }
   });
   return Promise.resolve(this.events);
 }

 setEvents(events: ICalendarEvent[]) {
    const cal = $('calendar');
    if (events && events.length > 0) {
       events.forEach(el => {
          cal.fullCalendar('renderEvent', el);
       });
       cal.fullCalendar('rerenderEvents');
    }
    this.isInitialized = true;
 }

When I now try to open the calendar, no events are displayed and no errors are show. when I do a console.log for the "el" in the foreach I get an object with the name and birthday in format YYYY-MM-DD

What is wrong with my code?

Upvotes: 0

Views: 590

Answers (1)

ADyson
ADyson

Reputation: 61904

The issue you've got is quite simple - fullCalendar is not preserving your event when the view or date range is changed.

The renderEvent method (https://fullcalendar.io/docs/renderEvent) has a 3rd optional parameter "stick", which is false by default. The documentation states

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 in other words, since your example event is in December, and presumably your calendar is initially displaying the current month (March at the time of writing this), when you try to navigate to December, every press of "next" causes the event source to be refreshed, and your manually inserted event is lot.

All you need to do is change your renderEvent line to this to set the "stick" option to true:

call.fullCalendar('renderEvent', el, true);

You also should not need cal.fullCalendar('rerenderEvents'); at all, this can be removed.

P.S. You may be able to make your code a little more efficient. For instance instead of looping through events, you could use "renderEvents" (https://fullcalendar.io/docs/renderEvents) to add them all to the calendar at once:

if (events && events.length > 0) {
  cal.fullCalendar('renderEvents', events, true);
}

You may also want to consider whether you need to use renderEvent(s) at all - the more normal way to set events on your calendar is to use the events option in the calendar initialisation options. You can either set it as a static array of event objects (https://fullcalendar.io/docs/events-array), or a JSON or other custom feed from a URL (https://fullcalendar.io/docs/events-json-feed or https://fullcalendar.io/docs/events-function). The latter two also have the advantage that the calendar dynamically updates itself from the remote data source when navigating between views and dates.

Upvotes: 1

Related Questions