RadCalendar API Questions

[Dan Cornish]

Greetings,

I know it's not "officially" released yet but I see a lot of potential with this control.  So I'm wondering when the API for the RadCalendar be more mature?

For example, I can't find it anywhere in the documentation how to:

1. How do I programmatically select a date on the calendar?

2. How do I get the selected date on the calendar when not in the dateSelected event handler?  I see from the example on using args.date within the event handler, but I'm wondering how to get the selected date when not in dateSelected.

3. How do I default the viewMode to Week?  I can change the view mode in the page loaded event. However I can see the calendar shrink down to Week mode from month view when the page is loaded, which is not desirable.

 

Thanks,
Dan

[Nick]

Hi Dan,

Setting a selected date should be done by setting the selectedDate property of RadCalendar. You can do that at any given moment once the Calendar has been initialized. 

As to the view mode, this is a bug. I have logged it and we will fix it as soon as possible.

Hope this helps. 

Regards,
Nick
Telerik

[Dan Cornish]

Thanks.  I can indeed set the selected date using selectedDate.

However, what about my second question, how do I get the selected date?  I've tried the same code but it doesn't work.  For example, the following code: 

 

exports.dateSelection = function (args) {
    console.log("args.date = " + args.date);
    console.log("selectedDate  = " + page.getViewById("calendar").selectedDate);
    console.log("another try = " + view.getViewById(page, "calendar").selectedDate);
}

When I select a date using the calendar, the following is output to the console.  Why don't the lines in bold return the selected date?

JS: args.date = Fri Feb 05 2016 00:00:00 GMT-0500 (EST)
JS: selectedDate  = undefined
JS: another try = undefined

 

Thanks

PS: Those lines don't return the selected date in any other function either.

 

[Bulent]

Hello Dan,

From the snippet of code I can guess only that the calendar view you use doesn't have an "id" property set to "calendar" string. Could you check the id you use for calendar view in xml. 
Another way to get the selected date in event handler is to use args.object that points to RadClendar instance. You will have an access to all exposed properties.

I hope this helps. The calendar control is under development, stay tuned for official release.

Regards,
Bulent
Telerik

[Dan Cornish]

Hi Bulent,

When is the official release of the calendar control?

Thanks,
Dan

[Bulent]

Hi Dan,

We are going to release officially Telerik NativeScript UI suite at the end of this month.
It will include calendar control with many new features like styling, transitions, inline events etc.

Please, stay tuned and follow our releases on npmjs.com

Regards,
Bulent
Telerik

[Brian]

Could you please push another release before the end of the month? I really need to work on RadCalendar now and cant reallly wait that long. I dont mind updating my code once official release is out without any breaking changes but at the moment that isnt much to work with.

[Nikolay]

Hi Brian,

Please find the answer to your inquiry in the other forum thread where the same topic is concerned: NativeScript UI Component.

Regards,
Nikolay
Telerik

[Cesar]

Hi @Nick I have been trying to set up the initial data on angualar-nativescript radcalendar but is not working do you now why ?

 

this.selectedDate = new Date("Wed Aug 02 2017 06:00:00");// .TS

 

.HTML

<RadCalendar #appointmentCalendar [transitionMode]="'Slide'" [selectedDate]="selectedDate" [eventSource]="eventSource" [eventsViewMode]="eventsViewMode" row="0"></RadCalendar>

 

But my date is not initially set up , I can change it later with goToDate(date); but I want to custom set the initial date , do you know how to do this?

[Nick Iliev]

Hi Dan,

You should be able to set your selectedDate value through Angular binding just as you did. Keep in mind that the selectedDate is different from the date shown as today.
In your case, the selectedDate is set to August which means that you will have to scroll manually to August to see the selection or provide logic for your calendar to start with August loaded initially. This is expected behavior and you will need to use method.

For example, I have tested the binding of selectedDate property sing this sample.

<RadCalendar [selectedDate]="selectedDate"></RadCalendar>

and in the component file

public selectedDate: Date;

constructor() {
    this.selectedDate = new Date("Wed Oct 02 2017 06:00:00"); ;
}

I have changed to selected date to October so it will be shown initially with the current month loaded. In your case, the month is August which means that you will have to manually load August with the respective method.

Regards,
Nikolay Iliev
Progress Telerik