NativeScript Angular RadCalendar Android не показывает события

Question

Я пытаюсь создать страницу календаря, на которой пользователь может войти в ВОМ (оплачиваемое время).При инициализации я запускаю API и извлекаю даты, создаю события календаря для каждой даты и помещаю их в массив, который привязывается к тегу Radcalendars [eventSource].

На этом этапе пользователь увидит существующиеeods, ptos и log / cancel по мере необходимости.На Android не отображаются ни существующие события, ни события, выдвинутые пользователем после загрузки.

Страница в IOS: EodPtoPage-Ios

Страница в Android: EodPage-Android

EODPTO.COMPONENT.TS

 import { Component, OnInit } from "@angular/core";
import { CalendarEvent, CalendarMonthViewStyle, CellStyle, DayCellStyle } from "nativescript-ui-calendar";
import { finalize } from "rxjs/operators";
import { Color } from "tns-core-modules/color/color";
import { isAndroid, isIOS } from "tns-core-modules/platform";
import { confirm } from "tns-core-modules/ui/dialogs";
import { AppComponent } from "~/app.component";
import { Constants } from "~/shared/constants";
import { ReportsService } from "~/shared/services/reports.service";

interface IEod {
    IsPTO: number;
    PTODate: Date;
}

@Component({
    selector: "eodptocalendar",
    moduleId: module.id,
    templateUrl: "./eodpto.component.html",
    styleUrls: ["./eodpto.component.css"]
})
export class EodPtoComponent implements OnInit {
    calendarEvents = [];
    heading: string;
    private _selectedCalendarItem: CalendarEvent;
    private _minDate: Date;
    private _maxDate: Date;
    private _selectedDate: Date;
    private _monthViewStyle: CalendarMonthViewStyle;

    constructor(private _reportsService: ReportsService, private _app: AppComponent) {  }

    ngOnInit() {
        // Double Tapping in Android shows years so we only double tap log in Ios.
        this.heading = isAndroid ? "Tap" : "Double Tap";
        this._monthViewStyle = this.getMonthViewStyle();

        const date = new Date();
        this._minDate = new Date();
        this._maxDate = new Date();
        this._minDate.setDate(date.getDate() - 7);
        this._maxDate.setDate(date.getDate() + 14);
        this._reportsService.getPTODates(this._minDate, this._maxDate)
        .subscribe(
            (result: Array<IEod>) => {
                for (const item of result) {
                    if (item.IsPTO) {
                        const event = new CalendarEvent("PTO", new Date(item.PTODate), new Date(item.PTODate), true, new Color("Green"));
                        this.calendarEvents.push(event);
                    } else {
                        const event = new CalendarEvent("EOD (No PTO)", new Date(item.PTODate), new Date(item.PTODate), true, new Color("Purple"));
                        this.calendarEvents.push(event);
                    }
                }
            },
            () => {
                this._app.ShowErrorAlert(Constants.e_GETPTO_ERROR, "Error Retrieving PTO Data");
            }
        );
    }

    get monthViewStyle(): CalendarMonthViewStyle {
        return this._monthViewStyle;
    }

    onDateSelected(args) {
        this._selectedDate = args.date;
        this._selectedCalendarItem = this.calendarEvents.find((x) => x.startDate.toString() === args.date.toString());
        if (isAndroid) {
            this.showMessage();
        }
    }

    onDoubleTap() {
        if (isIOS) {
            this.showMessage();
        }
    }

    showMessage(): void {
        if (this._selectedDate > this._minDate && this._selectedDate < this._maxDate) {

            if (!!this._selectedCalendarItem) {
                if (this._selectedCalendarItem.title === "PTO") {
                    this.EodLogPrompt("Cancel"); // If a PTO already exists on selected date
                }
            } else {
                this.EodLogPrompt("Log"); // If No event(pto OR eod) exists on selected date
            }

        }
    }

    EodLogPrompt(logOrcancel?: string): void {
        confirm({
            title: `${logOrcancel} PTO`,
            message: `${logOrcancel} PTO for ${this._reportsService.GetDateFormat(this._selectedDate)} ?`,
            okButtonText: "Yes",
            cancelButtonText: "Cancel"
        }).then((result) => {
            if (result) {
                if (this._app.isNetworkAvailable) this.LogOrCancelPTO();
            }
        });
    }

    LogOrCancelPTO(): void {
        this._app.isLoading = true;
        this._reportsService.logPTODate(this._selectedDate)
        .pipe(finalize(() => this._app.isLoading = false))
        .subscribe(
            (result) => {
                if (result.IsSuccess && result.IsUpdated) {
                    if (result.IsPTO === 1) {
                        const newe = new CalendarEvent("PTO", this._selectedDate, this._selectedDate, true, new Color("Green"));
                        this.calendarEvents.push(newe);
                        alert(`Your PTO is logged for ${this._reportsService.GetDateFormat(this._selectedDate)}.`);
                    } else {
                        this.calendarEvents.splice(this.calendarEvents.indexOf(this._selectedCalendarItem), 1);
                        alert(`Your PTO is cancelled for ${this._reportsService.GetDateFormat(this._selectedDate)}.`);
                    }
                } else {
                    if (result.ErrorMsg.isNullOrEmpty) {
                        if (result.ErrorMsg.toLowerCase() === "none") {
                            this._app.ShowErrorAlert("The PTO cannot be logged because you do not belong to any EOD distribution list. ");
                        } else if (result.ErrorMsg.toLowerCase() === "multiple") {
                            this._app.ShowErrorAlert("The PTO cannot be logged because you belong to multiple EOD distribution lists. ");
                        } else {
                            this._app.ShowErrorAlert(result.ErrorMsg);
                        }
                    }
                }
            },
            (error: Response | any) => {
                this._app.ShowErrorAlert(Constants.e_LOGPTO_ERROR);
                console.log(error);
            }
         );
    }

    getMonthViewStyle(): CalendarMonthViewStyle {
        const monthViewStyle = new CalendarMonthViewStyle();
        monthViewStyle.backgroundColor = "White";
        monthViewStyle.showTitle = true;
        monthViewStyle.showDayNames = true;

        const todayCellStyle = new DayCellStyle();
        todayCellStyle.cellBackgroundColor = "Yellow";
        todayCellStyle.cellTextColor = "Black";
        monthViewStyle.todayCellStyle = todayCellStyle;

        const dayNameCellStyle = new CellStyle(); // The Day Name Texts
        dayNameCellStyle.cellBackgroundColor = "#c3d3d3";
        dayNameCellStyle.cellBorderWidth = 1;
        dayNameCellStyle.cellBorderColor = "Black";
        dayNameCellStyle.cellTextColor = "Black";
        dayNameCellStyle.cellTextFontStyle = "Bold";
        dayNameCellStyle.cellTextSize = 14;
        monthViewStyle.dayNameCellStyle = dayNameCellStyle;

        const titleCellStyle = new DayCellStyle(); // The Month Text
        titleCellStyle.cellBackgroundColor = "#568BB2";
        titleCellStyle.cellBorderWidth = 1;
        titleCellStyle.cellBorderColor = "Black";
        titleCellStyle.cellTextColor = "Black";
        titleCellStyle.cellTextFontStyle = "Bold";
        titleCellStyle.cellTextSize = 18;
        monthViewStyle.titleCellStyle = titleCellStyle;

        return monthViewStyle;
    }
}

EOD.COMPONENT.HTML

<Shared-ActionBar pageTitle="EOD PTO"></Shared-ActionBar>

<GridLayout rows="auto, *">
    <StackLayout row="0" >
            <StackLayout class="instructions m-x-auto p-5">
                <StackLayout orientation="horizontal">
                        <StackLayout id="EOD">
                            </StackLayout>
                            <Label class="m-x-5">
                                    <FormattedString>
                                        <Span text="Purple " fontWeight="bold" ></Span>
                                        <Span text="indicates EOD logged." ></Span>                            
                                    </FormattedString>
                                </Label>
                </StackLayout>
                    <StackLayout orientation="horizontal">
                            <StackLayout id="PTO">
                                </StackLayout>
                                <Label class="m-x-5">
                                        <FormattedString>
                                            <Span text="Green " fontWeight="bold" ></Span>
                                            <Span text="indicates PTO logged." ></Span>                            
                                        </FormattedString>
                                    </Label>
                    </StackLayout>
                    <StackLayout orientation="horizontal">
                            <StackLayout id="Today">
                                </StackLayout>
                                <Label class="m-x-5">
                                        <FormattedString>
                                            <Span text="Yellow " fontWeight="bold" ></Span>
                                            <Span text="indicates todays date." ></Span>                            
                                        </FormattedString>
                                    </Label>
                    </StackLayout>

                </StackLayout>
                <Label [text]='heading + " on a date to log PTO"' class="h3 text-center" textWrap="true"></Label>    
    </StackLayout>
    <StackLayout row="1"> 
        <RadCalendar 
        [eventSource]="calendarEvents" 
        eventsViewMode="Inline" 
        [minDate]="_minDate" 
        [maxDate]="_maxDate" 
        [monthViewStyle]="monthViewStyle"
        (dateSelected)="onDateSelected($event)" 
        (doubleTap)="onDoubleTap($event)" ></RadCalendar> 
    </StackLayout>
    <ActivityIndicator [busy]="_app.isLoading" *ngIf="_app.isLoading" horizontalAlignment="center"
         verticalAlignment="center" class="activity-indicator" row="1"></ActivityIndicator>
</GridLayout>

Я могу предоставить все, что вы захотитепо запросу.Я пытался изменить стили, изменить тип источника событий, изменить модули, изменить размеры экрана и т. Д. Ничего не работает. Я не могу отобразить события в Android.