[Solved] Selected Date

[Robert]

Hi,

I would like to use the same style as in the example for the selected date (i.e. black round dot and white text).

I am using the style calendar-styles.service.ts in my typescript/angular 2 project, but I can't get the selected date to display correctly, the background keeps display as a square background colour and not the rounded dot.

Could someone please provide me with the style properties to replicate the "black rounded dot" of the selected date for the month view.

Thanks. Robert

[Petya]

Hello Robert,

Thanks for your interest in UI for NativeScript.

I'm not sure if I properly understand your scenario, so please send out a link to the example you're referring to and the code you've tried in case this next bit is not useful.

In case you're looking for a way to customize the selected date with a circle decorator, this is a feature that is currently not available for RadCalendar. I'd suggest submitting the idea in this repository for future consideration. 

In the meantime, one of NativeScript's greatest strengths is that you have access to the native APIs, so you could try implementing the desired result yourself. The following snippet demonstrates how you can go about this task and takes advantage of the selection API of our Android RadCalendar:

export function calendarLoaded(args) {
   var calendarView = args.object.android;

   calendarView.getAdapter().setDateTextPosition(com.telerik.widget.calendar.CalendarElement.CENTER);
   calendarView.getAdapter().setDateCellBackgroundColor(android.graphics.Color.WHITE, android.graphics.Color.WHITE);
   calendarView.getAdapter().setSelectedCellBackgroundColor(android.graphics.Color.WHITE);

   var decorator = new com.telerik.widget.calendar.decorations.CircularCellDecorator(calendarView);
   decorator.setColor(android.graphics.Color.parseColor("#ed742c"));
   decorator.setStrokeWidth(com.telerik.android.common.Util.getDimen(android.util.TypedValue.COMPLEX_UNIT_DIP, 2));
   decorator.setScale(0.75);

   calendarView.setCellDecorator(decorator);
}

Hope this helps.

Regards,
Petya
Telerik by Progress

[Robert]

Hi Petya,

I will look into, I just find it strange that the default styles allow for a circular decorator but yet when I want to apply the style service to it, then I can't achieve the same thing.

Thanks. Robert

[Petya]

Hello Robert,

I understand your concern and indeed the default appearance for the today date in the calendar is the desired one. 

I noticed you posted your request in the feedback repository and we will take it consideration in our future planning. Right now, the only solution I can suggest in order to apply these styles for the selected date is the one I mentioned in my previous post. 

Regards,
Petya
Telerik by Progress

[Robert]

Hi Petya,

I understand thanks. The android code will work, but I need this to work on iOS as well - but I can't find any documentation that shows how to accomplish it.

 

Do you have iOS code or know where I can find information about it to achieve the same desired effect as with Android?

 

Thanks. Robert

[Petya]

Hi again Robert,

A black dot with white text is the default style for the selected date in iOS so you shouldn't have to add additional code to achieve that. In case you're experiencing other behavior it would greatly help to share your code so I can test this locally and advise you further.

Regards,
Petya
Telerik by Progress

[christo]

Hi Petya,

I was having the very same issue: can't set selection style like the default in a customized calendar view, but I am also deploying on iOS. Since the feature is not directly available, is it possibile to achieve the result accessing the native APIs in iOS too? (like you suggested above for Android)

Thank you,
Christo_

[Petya]

Hi Christo,

I'm assuming you're talking about modifying the month view by applying a different day cell style as per this article. If that is the case, I have to unfortunately confirm that I reproduced an issue in this scenario and so far I haven't found a suitable workaround that would allow you to both modify some of the style properties and keep the default selection style. I'll try to find a solution through the native API and will get back to you when I have more information to share. Meanwhile, if applicable to you, I would suggest not modifying the styles.

Apologies for the inconvenience.

Regards,
Petya
Telerik by Progress

[Petya]

I wanted to follow up on this after discussing it with the development team. It turns out that if you specify any of the styling options for the calendar, the default selection on iOS is stripped. 

This is currently a limitation in the implementation of the styling that is not convenient for users which is why we included in the planning the implementation of the feature initially discussed in this thread. For anyone else that might encounter this issue, the feature is logged in this issue which will be updated once the feature is ready. We're hoping we will be able to release this with our next major version.

Regards,
Petya
Telerik by Progress