如何在 sencha touch 中使用 Ext.ux.touchcalendar 中的 css 更改特定单元格的颜色

Question

我已经使用 Ext.ux.touchcalendar https://github.com/SwarmOnline/Ext.ux.TouchCalendar 实现了日历。我想将一些单元格的颜色更改为绿色，将一些单元格的颜色更改为红色，将一些单元格的颜色更改为蓝色谁能告诉我该怎么做吗？

当我尝试在 skin.css

中添加以下 css

.touch-calendar-view table.day tr :nth-child(3) td:nth-child(5).time-block  { /* Selects third row, then select fifth cell. */
   background-color: green!important;
}

谢谢

Answer 1

日历单元格被分成多个 table 单元格，分为多个 table 行。

您可以通过对 table 行和包含 table 的单元格使用 nth-child 来定位特定元素。下面的代码是一个模板，最好附加一些 类 而不是 tr 和 td 这样它就不会影响其他 tables.

tr:nth-child(3) td:nth-child(5) { /* Selects third row, then select fifth cell. */
  background: lightblue;
}

示例输出：