自定义dijit.calendar中的gridcell着色并保持持久性

时间:2011-12-29 19:50:47

标签: dojo

我正在使用dojo 1.6并在项目中使用dijit.calendar,除了为选定的网格单元着色的目标外,它的工作正常。我有三个由日历点击操纵的innerHTML。没问题。

dijit.calendar的行为是在点击时将网格单元格(日历日)突出显示为蓝色,当单击另一个网格单元格时,它会变为蓝色。 我想要做的是在单击时将单元格着色为自定义颜色并使其具有持久性。

具体而言,日历适用于具有正式日期(蓝色),开始日期(绿色)和结束日期(红色)的项目。

我甚至不知道有一种方法可以在dijit.calendar中着色特定的网格单元。有没有人成功地做过这个或者有一个指针让我朝着正确的方向发送?

编辑如下:..

好的伙计们,由于下面的菲利普,我有很好的领先优势。 Philippe的解决方案将按照预期的方式对单元格进行着色(因此他得到了答案业力)。事实证明,如果选定的网格单元格为红色并且我切换到月份以选择后续日期,则单元格保持红色。

我已经弄明白了。比方说,我可以得到成功着色的前几个日期,但如果我必须在下个月做第三次约会并更改日历,那么细胞会保持颜色。因此,必须有一种方法可以将我的颜色变化更改为与实际日期相对应的独特值。

我知道onChange返回的唯一参数是Date本身就像这样(在Firebug中使用debug.console).....

[Date {Wed Jan 18 2012 00:00:00 GMT-0500 (EST)}]

我通过Firebug检查了代码,并在同一个单元格中注意到代码看起来像这样......

<td role="gridcell" class="dijitCalendarSelectedDate dijitCalendarCurrentMonth    dijitCalendarDateTemplate" dijitdatevalue="1326866400000" style="background-color: green;" tabindex="0"><span class="dijitCalendarDateLabel">18</span></td>

这个明显的价值似乎是“dijitdatevalue”。

我想我可以跟随一连串......

单击

,将第一个日期的“dijitdatevalue”存储在隐藏字段(以及第二个和第三个日期)中 然后返回并将相应dijitdatevalue的背景颜色设置为蓝色,绿色或红色。

现在的问题是如何将dijitdatevalue字符串返回到隐藏字段。当我找到答案时,我会再次更新这篇文章。

珍妮

1 个答案:

答案 0 :(得分:2)

如果查看窗口小部件代码,您将看到一个名为_onDayMouseDown的私有方法,它负责将单元格变为蓝色... 您可以通过dojo.connect将自定义代码添加到该函数,如下所示:

dojo.connect(dijit.byId('calendar1'), "_onDayMouseDown", function(/*Event*/ evt){
   var node = evt.target.parentNode;
   dojo.style(node, "backgroundColor", "green");
});

否则,如果您使用dojo 1.7,则可以尝试MultiSelectCalendar