Selected Date

9 posts, 0 answers
  1. Robert
    Robert avatar
    3 posts
    Member since:
    Sep 2016

    Posted 17 Jan Link to this post

    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

  2. Petya
    Admin
    Petya avatar
    983 posts

    Posted 20 Jan Link to this post

    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
    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.
  3. Robert
    Robert avatar
    3 posts
    Member since:
    Sep 2016

    Posted 21 Jan in reply to Petya Link to this post

    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

  4. Petya
    Admin
    Petya avatar
    983 posts

    Posted 26 Jan Link to this post

    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 under 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
    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.
  5. Robert
    Robert avatar
    3 posts
    Member since:
    Sep 2016

    Posted 26 Jan in reply to Petya Link to this post

    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

  6. Petya
    Admin
    Petya avatar
    983 posts

    Posted 30 Jan Link to this post

    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
    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.
  7. christo
    christo avatar
    11 posts
    Member since:
    Feb 2017

    Posted 28 Feb in reply to Petya Link to this post

    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_

  8. Petya
    Admin
    Petya avatar
    983 posts

    Posted 02 Mar Link to this post

    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
    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.
  9. Petya
    Admin
    Petya avatar
    983 posts

    Posted 08 Mar Link to this post

    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
    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.
Back to Top