如何为Ipad网站制作更大尺寸的Ajax Calendar控件？

Question

我希望通过覆盖默认ajax Calender的风格来制作更大尺寸的ajax Calander控件。

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

这里我附上了截图我想用ajax日历控件做什么。

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

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

由于 阿布舍克巴克

Answer 1

我自己刚刚经历过这个。你需要做三件事。

首先 - 为您的控件添加一个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：）

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

Answer 2

我知道我的答案很晚。我知道你在询问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;
}

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