1

我有一个日历扩展器，它附加到一个隐藏的文本框和一个按钮上。

<cc2:CalendarExtender ID="TextBox2_CalendarExtender" CssClass="custom-calendar" runat="server" TargetControlID="f_BookingDate" PopupButtonID="f_BookingDateButton"
    Format="dd/MM/yyyy" PopupPosition="BottomRight" FirstDayOfWeek="Monday" OnClientDateSelectionChanged="UpdateAvailability">
</cc2:CalendarExtender>

我正在创建一个单独的样式表，当它是访问页面的移动设备时，它将应用于我的页面。

我的问题是我的老板觉得日历的标准尺寸有点小。我正在使用其他人在其他地方建议的，但它仍然太小。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />

因此，正如我在其他地方看到的那样，这不是缩放的问题。

我正在修补 css，到目前为止已经提出了以下内容。

这很棒，因为它使每一天都变得更大，更容易用手指选择。

然而，当涉及到切换到月份和年份时，ajax 似乎处理它的方式是将 top:139px 应用于 .ajax__calendar_days 以将其从日历视图中分流。

但是因为我的每个视图现在都是 200 像素（只是一个测试大小可能会改变这一点），当你在它们之间滑动时，视图现在在顶部和底部重叠，看起来非常混乱。

是否有某种方式可以控制日历如何为动态更改定义它的大小？

/* Ajax Control Toolkit Calendar */

.ajax__calendar_container       
{
    left:5% !important;
    width:90% !important;
    background-color:#fff; 
    border:solid 1px #a6c9e2 !important;
}

.ajax__calendar_header      {background-color:#87b6d9; margin-bottom:5px; height: 26px !important;}
.ajax__calendar_prev    {}

.ajax__calendar_title   {height:26px; color:#fff; line-height:26px;}
.ajax__calendar_hover .ajax__calendar_title {color:#eee !important;}

.ajax__calendar_next    {}

.ajax__calendar_prev,.ajax__calendar_next{background-color:#dce6f4;width:26px !important; height:26px !important; color:#fff !important;}

.ajax__calendar_body        {width:100% !important; height:200px !important;}

.ajax__calendar_days    {width:100% !important; height:200px !important}
.ajax__calendar_months  {width:100% !important; height:200px !important}
.ajax__calendar_years   {width:100% !important; height:200px !important}

.ajax__calendar_months  table {height:200px !important}

.ajax__calendar_days table thead tr td {background-color:#fff; color:#000; font-weight:bold;}

.ajax__calendar_dayname {width:100% !important; text-align:center !important; border:0 !important;}

.ajax__calendar_day {text-align:center !important; border:1px solid #c5dbec !important; background:#eaf4fd; margin:1px !important; height:26px !important; width:90% !important;}

.ajax__calendar_month {text-align:center !important; width:100% !important;vertical-align:middle !important}

.ajax__calendar_month, .ajax__calendar_day {color:#2e6e9e; font-weight:bold; }

.ajax__calendar_year {text-align:center !important; }

.ajax__calendar_footer          {border-top:1px solid #c5dbec !important; line-height:1.2em;}

.ajax__calendar_today       {border:1px solid #c5dbec; background-color:#e1effb;}

.ajax__calendar_hover           {}
td.ajax__calendar_hover div     {background:#d2e6f5 !important; border:1px solid #79b7e7 !important;}

.ajax__calendar_active          {}
td.ajax__calendar_active div    {background:#fbec88 !important; border:1px solid #fad42e !important;}

.ajax__calendar_other           {}

.ajax__calendar_other .ajax__calendar_day {text-align:center !important; font-weight:normal !important; color:#bbb !important; border:1px solid #eee !important;}

.ajax__calendar_hover.ajax__calendar_other .ajax__calendar_day {background:#efefef !important; color:#aaa !important; border:1px solid #ddd !important;}
4

1 回答 1

2

我找到了解决方案。我使用了 OnClientShown 属性

<cc2:CalendarExtender ID="TextBox2_CalendarExtender" CssClass="custom-calendar" runat="server" TargetControlID="f_BookingDate" PopupButtonID="f_BookingDateButton"
    Format="dd/MM/yyyy" PopupPosition="BottomRight" FirstDayOfWeek="Monday" OnClientDateSelectionChanged="UpdateAvailability" OnClientShown="onClientShown">
</cc2:CalendarExtender>

然后在我的脚本中

<asp:ScriptManager ID="f_WebBookingScriptManager" runat="server">
</asp:ScriptManager>
<script type="text/javascript" language="javascript">
    function onClientShown(sender, e) {
        sender._height = 200;
    }
</script>

这将设置容器的动态高度。它被认为是日历行为的一部分

于 2013-06-28T11:09:26.880 回答