This is a migrated thread and some comments may be shown as answers.

RadCalendar API Questions

9 Answers 59 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Dan Cornish
Top achievements
Rank 1
Dan Cornish asked on 27 Jan 2016, 01:28 PM

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

9 Answers, 1 is accepted

Sort by
0
Nick
Telerik team
answered on 28 Jan 2016, 01:17 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Dan Cornish
Top achievements
Rank 1
answered on 31 Jan 2016, 07:43 PM

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.

 

0
Bulent
Telerik team
answered on 03 Feb 2016, 04:41 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Dan Cornish
Top achievements
Rank 1
answered on 04 Mar 2016, 09:46 PM

Hi Bulent,

When is the official release of the calendar control?

Thanks,
Dan

0
Bulent
Telerik team
answered on 07 Mar 2016, 07:40 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Brian
Top achievements
Rank 1
answered on 14 Mar 2016, 03:29 AM
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.
0
Nikolay
Telerik team
answered on 15 Mar 2016, 07:35 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Cesar
Top achievements
Rank 1
answered on 20 Oct 2017, 07:54 PM

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?

0
Nick Iliev
Telerik team
answered on 23 Oct 2017, 07:48 AM
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
Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
Tags
Calendar
Asked by
Dan Cornish
Top achievements
Rank 1
Answers by
Nick
Telerik team
Dan Cornish
Top achievements
Rank 1
Bulent
Telerik team
Brian
Top achievements
Rank 1
Nikolay
Telerik team
Cesar
Top achievements
Rank 1
Nick Iliev
Telerik team
Share this question
or