RadCalendar: Getting Calendar object in OnInit method


Hi guys, this is a probably a dumb question, but I am trying to get the Calendar object in ngOnInit funciton but its not picking it up, I am doing something like this:

@ViewChild("calendar") calendarComponent: RadCalendarComponent;
ngOnInit() : void {
    let cal = this.calendarComponent.calendar;
    cal.selectedDateRange.startDate = this.fromDate;
    cal.selectedDateRange.endDate = this.toDate;

Any help?



Your Calendar view with id #calendar is probably not loaded at the time ngOnInit fired.

Probably the best approach is updating the calendar when the loaded event fires (typing from memory, so there’s probably a mistake here):


<RadCalendar #calendar (loaded)="calendarLoaded($event)">


calendarLoaded(args: EventData) {
    const cal = <RadCalendarComponent>args.object;
    cal.selectedDateRange.startDate = this.fromDate;
    cal.selectedDateRange.endDate = this.toDate;  


Hey @Eddy, thanks for your reply. The loaded event is being fired but the args.object returns an Observable object and can not be casted into a RadCalendarComponent, doing more tests but no luck so far :frowning:

If you get it working let me know. Thanks!


Here’s a playground you can deploy on your device: https://play.nativescript.org/?template=play-ng&id=fMByYD


Hey @Eddy thanks for the playground, I was importing EventData from the wrong place.



Hi @relez, I’m having the same issue; could you please more specific? Which EventData did you specify?

I’ve tried the solution above but the class RadCalendarComponent does not have selectedDateRange; in my calendarLoaded function I did something like this:

calendarLoaded(args: CalendarSelectionEventData) {
    console.log("*** calendarLoaded fired...!");

    let cal: RadCalendar = args.object;
    cal.selectedDateRange.startDate = this.shared.fromDateFmsDataTotals;
    cal.selectedDateRange.endDate = this.shared.toDateFmsDataTotals;

But the selectedDateRange is undefined!

The strange thing is that I do this when I select the range and it’s working:

onDateSelected(args: CalendarSelectionEventData) {
    let calendar: RadCalendar = args.object;
    this.dateStartSelected = calendar.selectedDateRange.startDate;
    this.dateEndSelected = calendar.selectedDateRange.endDate;
    console.log("onDateSelected start " + this.dateStartSelected + " | end " + this.dateEndSelected);

Do you have any suggestions?