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

Posted 2023-04-13

【中文标题】如何在 cellTap 事件中获取特定的 RadCalendar Day Cell 并向其添加自定义样式

【英文标题】：How to get specific RadCalendar Day Cell on a cellTap Event and add custom style to it

【发布时间】：2019-11-19 00:42:42

【问题描述】：

我在我的 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')

但它不起作用。

有没有办法执行所需的行为？

【问题讨论】：

您是否尝试为selectedDayCellStyle 设置自定义样式，这可能符合您的要求。

@Manoj 实际上，我尝试使用 DayCellStyle 类附带的样式，但不幸的是它与我需要的不匹配，我还尝试添加这样的自定义 css 类：@987654325 @ 但它不起作用。

点击时单元格被选中，因此应用selectedDayCellStyle 应该可以解决。你能否进一步解释你的问题陈述，为什么/什么时候你想改变风格？

这只是在点击时，因为您在示例中使用了单元格点击事件吗？

@Manoj 我的问题是我必须根据一个值在两种背景颜色之间交替，因此例如，如果值为 true，则背景颜色为红色，否则为绿色。使用 DayCellStyling 类中的 cellBackgroudColor 属性不仅会改变颜色，还会影响其他单元格的背景颜色，例如，如果我有一个背景颜色为红色的单元格，将新单元格的 cellBackgroundColor 更改为绿色会影响以前的单元格也是。所以基本上我想要的是在 cellTap 事件上获取特定的单元格，并找到一种方法来应用特定的样式。

【参考方案1】：

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

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;