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

发布于 2024-08-22 20:41:54 字数 756 浏览 7 评论 0原文

基于 CalendarExtender 的 AjaxControlToolkit API 我可以控制所选日期的样式使用:

.ajax__calendar_active { background-color:red }

根据 API,我希望 .ajax__calendar_today 能够让我控制今天表格单元格的样式(如果显示)。不幸的是,这个 .ajax__calendar_today 控制日历底部较大的“Today: XYZ”按钮的样式。

有谁知道如何设置今天的表格单元格的样式(如果/当显示时)?

更新:

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

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

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

Based on the AjaxControlToolkit API for the CalendarExtender I can control the style of the selected date using:

.ajax__calendar_active { background-color:red }

And according to the API, I was hoping, that .ajax__calendar_today would allow me to control the style of today's table cell, if show. Unfortunately, this .ajax__calendar_today controls the style of the bigger "Today: XYZ" button at the bottom of the calendar.

Does anyone know how to style today's table cell, if/when displayed?

Update:

I inspected the HTML using Firebug and see that there is no special css class or other indicator for today's day cell. I guess that makes sense from a server side perspective... how to know what day it is on the user's machine, without adding code to capture GMT offset and such.

So know I think that i am stuck creating some javascript to get today's date client side and comparing to each cell's title attribute, which is set to something like "Friday, February 11, 2011".

Update:Sept 2011
The latest AjaxControlToolkit release has added the .ajax__calendar_today css class to control this.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

养猫人 2024-08-29 20:41:54

我相信你可以使用以下 CSS 类:

.ajax__calendar_today .ajax__calendar_day { background-color:red;}

I believe you could use the following CSS class:

.ajax__calendar_today .ajax__calendar_day { background-color:red;}

流云如水 2024-08-29 20:41:54

找不到为此的特殊类,所以我最终在我的 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>

Couldn't find a special class for this, so I wound up putting a style in my site.master.
FYI, the padding 0 is because the border takes 2px, which is what default padding is set for.

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

我找到的最佳解决方案是这篇文章

我刚刚删除了函数的前 2 行(设置当前日期),并将 dayDIVs[i].style.bordercolor 中的拼写错误修复为 dayDIVs[i].style.borderC 颜色(大写 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" />

The best solution I found is this post.

I just removed the first 2 lines of the function (set current day) and fixed typo error in dayDIVs[i].style.bordercolor to dayDIVs[i].style.borderColor (uppercase C for color). You can also add dayDIVs[i].style.borderStyle = "dotted";

So here is the transcript of it (with my modifications):

/* 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" />
谁许谁一生繁华 2024-08-29 20:41:54

您需要以下 css 类:
.ajax_日历 .ajax_calendar_active .ajax__calendar_day {背景颜色:红色;}

You need the following css class:
.ajax_calendar .ajax_calendar_active .ajax__calendar_day {background-color:red;}

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文