如何在cellTap事件上获取特定的RadCalendar Day Cell并为其添加自定义样式

时间:2019-07-09 12:43:40

标签: nativescript nativescript-telerik-ui

我在我的NativeScript项目中使用RadCalendar,问题是我想在cellTap事件的特定日期单元格上添加自定义样式。

所以我从听事件开始

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

在我的component.ts文件中:

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)
}

我试图像这样直接更改CSS属性:

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

但它不起作用。

是否可以执行所需的行为?

1 个答案:

答案 0 :(得分:0)

我认为不支持在点击时调整单元格样式,但应该可以。要调整单元格的背景颜色,

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;
        }
    }