如何在asp.net ajax CalendarExtender中控制今天单元格的样式？答案

【问题标题】：How to control style of today's cell in asp.net ajax CalendarExtender?如何在asp.net ajax CalendarExtender中控制今天单元格的样式？
【发布时间】：2010-02-25 00:25:26
【问题描述】：

基于CalendarExtender 的 AjaxControlToolkit API，我可以使用以下方法控制所选日期的样式：

.ajax__calendar_active { background-color:red }

根据 API，我希望 .ajax__calendar_today 可以让我控制今天表格单元格的样式（如果显示）。不幸的是，这个 .ajax__calendar_today 控制日历底部较大的“今天：XYZ”按钮的样式。

有谁知道如果/何时显示今天的表格单元格样式？

更新：

我使用 Firebug 检查了 HTML，发现今天的单元格没有特殊的 css 类或其他指示符。我想从服务器端的角度来看这是有道理的......如何知道用户机器上的今天是哪一天，而不添加代码来捕获 GMT 偏移量等。

所以知道我认为我被困在创建一些 javascript 来获取今天的日期客户端并与每个单元格的标题属性进行比较，该属性设置为“2011 年 2 月 11 日星期五”。

更新：2011 年 9 月 最新的 AjaxControlToolkit 版本添加了 .ajax__calendar_today css 类来控制它。

【问题讨论】：

标签： calendarextender

【解决方案1】：

我相信您可以使用以下 CSS 类：

.ajax__calendar_today .ajax__calendar_day { 背景颜色：红色；}

【讨论】：

是的，似乎 2011 年 9 月发布的 AjaxControlToolkit 已将 ajax__calendar_today css 类添加到今天的日期。很酷！

【解决方案2】：

找不到专门的类，所以我最终在我的 site.master 中添加了一个样式。仅供参考，填充 0 是因为边框采用 2px，这是设置的默认填充。

<style type="text/css">
    div.ajax__calendar_day[title='<%=DateTime.Now.ToString("dddd, MMMM dd, yyyy")%>']
    {
    border: 1px solid #F00;
    padding-right: 0px;
    }
</style>

【讨论】：

【解决方案3】：

我找到的最佳解决方案是this post。

我刚刚删除了函数的前 2 行（设置当前日期）并修复了 dayDIVs[i].style.bordercolor 中的拼写错误到 dayDIVs[i].style.borderColor（大写 C 表示颜色）。也可以添加 dayDIVs[i].style.borderStyle = "dotted";

所以这是它的抄本（经过我的修改）：

/* In HEAD section */

<script type="text/javascript">
    function clientShown(sender, args) {
        var today = new Date();
        var currentTitle = today.localeFormat("D");
        //Find all the Day DIVs in the Calendar's daysBody
        var dayDIVs = sender._daysBody.getElementsByTagName("DIV");
        for (i = 0; i < dayDIVs.length; i++) {
            if (dayDIVs[i].title == currentTitle) {
                //Change the current day's style
                dayDIVs[i].style.borderColor = "#0066cc";
                dayDIVs[i].style.borderStyle = "dotted";
            }
        }
    }
</script>

/* and then in your BODY: */

<cc1:CalendarExtender ID="CE" runat="server" Enabled="True" TargetControlID="CalendarDateTextBox"
                        OnClientShown="clientShown" />

【讨论】：

【解决方案4】：

您需要以下 css 类： .ajax_日历 .ajax_calendar_active .ajax__calendar_day {background-color:red;}

【讨论】：

这似乎在所选日期单元格之前，而不是今天的日期。