1

我想通过覆盖默认 ajax Calender 的样式来制作更大尺寸的 ajax Calander 控件。

它应该在更大的视野中工作。我尝试过，但当我尝试选择月/年视图时效果不佳..

在这里，我附上了屏幕截图，我到底想用 ajax 日历控件做什么。

在此处输入图像描述



是否可以为 iPad 网站提供更大的视图？

或建议我为 Ipad 网站提供良好的日历控制，我想使用 asp.net 网站。

谢谢阿布舍克

4

2 回答 2

-1

我自己也刚刚经历过。您需要做 3 件事。

首先- 向您的控件添加一个 CSS 类。但是请注意，如果您这样做，它会擦除​​现有的 ajax__calendar 类，因此它的大部分现有样式都将被添加到 CalendarExtender

 CssClass="ajax__calendar bigcal"

bigcal 是你的新课程。

第二- 使用 bigcal 类为样式添加你的 CSS - 例如

.bigcal .ajax__calendar_container { width: 220px; font-size:14px;}
.bigcal .ajax__calendar .ajax__calendar_container {border: 3px solid #646464;}
.bigcal .ajax__calendar_days, .bigcal .ajax__calendar_months, .bigcal .ajax__calendar_years, .bigcal .ajax__calendar_body
{width:220px;height:200px}
.bigcal .ajax__calendar_month, .bigcal .ajax__calendar_year{height:55px;padding-top:4px}
.bigcal .ajax__calendar_container table, .bigcal .ajax__calendar_container TD {font-size:14px}
.bigcal .ajax__calendar_days td div{padding:4px 5px 4px 4px}

请注意，我已将其大小重置为 220 宽和 200 高 - 相应调整

第三- 您需要在 javascript 中更改它的大小，因为它默认为滚动等工作的设定大小。所以

将以下内容添加到 CalendarExtender

OnClientShown="setBigCal"

然后是下面的js函数

function setBigCal(sender, e) {
    sender._height = 200;
    sender._width = 220;
}

HTH :)

编辑 - 抱歉 - 刚刚看到这个问题的日期，所以我假设你已经排序。但我会留下答案，以防其他人遇到同样的问题。

于 2014-01-03T15:20:08.327 回答
-1

我知道我的回答迟到了。我知道你在问 ajax 日历。但它可能会帮助其他人。几个程序员问如何格式化asp.net 日历。您可以使用以下样式格式化 asp.net 日历：

.calander {
    background-color: whitesmoke;
    border: 1px solid;
    height: 305px;
    width: 280px;
}

    .calander table tr td {
        padding: 10px;
    }

        .calander table tr td:hover {
            background-color:rgb(200, 255, 0);
        }

.ajax__calendar_today {
    background-color: rgb(209, 233, 255) !important;
    border-radius: 3px;
}

.ajax__calendar_footer {
    background-color: rgb(209, 233, 255) !important;
    width: 100% !important;
    margin: 0px !important;
    padding: 0px !important;
    position: relative !important;
    height: auto !important;
}

.ajax__calendar_active {
    background-color: rgb(200, 255, 0) !important;
    border-radius: 3px;
}

.ajax__calendar_day {
    height: 20px !important;
    width: 20px !important;
    padding: 0px;
    text-align: center;
    margin-top: -8px;
    margin-left: -5px;
}

.ajax__calendar_body {
    width: 270px !important;
    height: 245px !important;
}

.ajax__calendar_container {
    width: auto !important;
}

这些样式可以按照您想要的任何方式进行定制。

于 2015-04-08T20:00:19.443 回答