ajax日历扩展器-自定义高度会导致视图重叠

本文关键字：视图 重叠 高度 日历 扩展器 自定义 ajax | 更新日期: 2023-09-27 18:20:05

我有一个日历扩展程序，它被映射到一个隐藏的文本框和一个按钮。

<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，以将其从日历视图中分流。

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

有没有办法控制日历如何定义动态更改的大小？

/* 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;}

ajax日历扩展器-自定义高度会导致视图重叠

我找到了解决方案。我使用了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>

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

相关文章：