Search code examples
androidangularcalendarnativescriptnativescript-angular

Close selected day in Nativescript RadCalendar


In my Nativescript + Angular application I'm using RadCalendar component. I have a custom button that go to current day. With an android phone I have an issue: if I swipe 2 months and click a day cell, it opens a section with the list of events. But when I click my custom button to go back to current day, the section with events is still open. I'm trying to force closing that but the following code doesn't work.

HTML:

<ActionItem (tap)="onGoToDateTap()" verticalAlignment="center"
    horizontalAlignment="center">
    <Label height="25" class="link text-uppercase cold" color="#000000" text="Now"></Label>
</ActionItem>
... 
<RadCalendar [eventSource]="calendarEvents" id="calendar" #calendar (inlineEventSelected)="inlineEventSelected($event)"
(navigatingToDateStarted)="onNavigatingToDateStarted($event)" locale="en-EN" viewMode="month" eventsViewMode="Inline">
</RadCalendar>

Typescript:

onGoToDateTap() {
    this.calendar.nativeElement.selectedDate = undefined;
    this.calendar.nativeElement.resetNativeView();
    this.calendar.nativeElement.reload();
    const date = new Date();
    setTimeout(() => {
        this.calendar.nativeElement.goToDate(date);
        this.cdr.detectChanges();
    }, 400)
}

Solution

  • To close events on android use EventManager

     this.calendar.nativeElement.nativeView.eventsManager().closeEvents();