Selected Date

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