Having trouble updating events for radCalendar in NativeScript (Angular)

Question

I am currently having trouble adding new events to a radCalendar. I created a service to update the eventSource which is bound to the radCalendar in the html but adding a new event to that array doesn't seem to update the radCalendar events at all.

html:

  <RadCalendar #calendar class="{{dialogShown ? 'content' : ''}}" [eventSource]="eventSource" (dateSelected)="onDateSelected($event)" [eventsViewMode]="eventsViewMode"></RadCalendar>

service:

import { Injectable } from '@angular/core';
import { Color } from '@nativescript/core';
import { CalendarEvent } from 'nativescript-ui-calendar';

@Injectable()

export class CalendarEventsService {

    public events: Array<CalendarEvent> = new Array<CalendarEvent>();;

    createCalendarEvent(startDate, endDate, color, type) {
        endDate.setHours(endDate.getHours() + 2)
        const event = new CalendarEvent(type, startDate, endDate, false, color);
        this.events.push(event);
        return event;
    }

    getCalendarEvents(): Array<CalendarEvent> {
        return this.events;
    }
}
          

component call to add an event:

  saveEvent(inputType) {
        this.selectedCalendarDate.setHours(this.timePicker.hour);
        this.selectedCalendarDate.setMinutes(this.timePicker.minute);
        const event = this.calendarService.createCalendarEvent(this.selectedCalendarDate, this.selectedCalendarDate, 'blue', this.medicineType)
        this.dialogShown = false;
        this.eventSource.push(event);
    }

I'd really appreciate any guidance.

Answer 1

Just in case anyone else needs to do this in the future:

I followed this playground example https://play.nativescript.org/?template=play-tsc&id=eiHg8a and created the observable property decorator as suggested. My html looks a little different:

html

<RadCalendar [eventSource]="eventSource" (dateSelected)="onDateSelected($event)" [eventsViewMode]="eventsViewMode" row="0"></RadCalendar>

and my service to create a new event looks like this now

service:

import { Injectable } from '@angular/core';
import { Color } from '@nativescript/core';
import { CalendarEvent } from 'nativescript-ui-calendar';

@Injectable()
export class CalendarEventsService {

    public allEvents: Array<CalendarEvent> = new Array<CalendarEvent>();

    createCalendarEvent(startDate, endDate, color, type): Array<CalendarEvent> {
        let events = new Array<CalendarEvent>();
        endDate.setMinutes(endDate.getMinutes() + 1)
        const event = new CalendarEvent("Event " + type, startDate, endDate, false, new Color("#3bd5af"));
        events.push(event);

        for( const event of this.allEvents) {
            events.push(event);
        }

        this.allEvents.push(event);

        return events;
    }

    getCalendarEvents(): Array<CalendarEvent> {
        return this.allEvents;
    }
}
      

Inside the component, I just set the eventSource to the events returned from the service and the radCalendar updates. Hopefully this helps someone.