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 がそれを処理するように見える方法は、.ajax__calendar_days に top:139px を適用してカレンダー ビューから切り離すことです。

しかし、私のビューはそれぞれ 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;}
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 に答える