How to get specific RadCalendar Day Cell on a cellTap Event and add custom style to it

Question

I'm using RadCalendar in my NativeScript Project, the problem is I want to add custom styling on specific day cell from a cellTap Event.

So I started with listening to the Event

<RadCalendar (cellTap)="onCellTap($event)"></RadCalendar>

in my component.ts file:

onCellTap(args: CalendarCellTapEventData) {

 // here, it return the whole RadCalendar Object
 console.log(args.object);

 // and in the line below it returns the native cell Element
 console.log(args.cell)
}

I tried to change directly the CSS properties like this:

args.object.style.backgroundColor = new Color('#ff0000')

but it doesn't work.

Is there a way to perform the required behaviour ?

Answer 1

I don't think adjusting cell style upon tap is supported but it should be possible. To adjust background color of cell,

import { CalendarCellTapEventData } from "nativescript-ui-calendar";
import { Color } from "tns-core-modules/color";

onCellTap(event: CalendarCellTapEventData) {
        const color = new Color('#ff0000');
        if (color.android) {
            // https://docs.telerik.com/devtools/android/AndroidControlsDoc/com/telerik/widget/calendar/CalendarDayCell.html
            event.cell.setBackgroundColor(color.android);
        } else {
            // https://docs.telerik.com/devtools/ios/api/Classes/TKCalendarDayCell.html
            event.cell.style().backgroundColor = color.ios;
        }
    }