CalendarExtenderメモ

Textboxにカレンダーを表示する便利なやつ。

AJAX Control Toolkitを導入しましょう。
http://www45.atwiki.jp/lyokun/pages/41.html

つかいかた

ふつうのエクステンダーの追加と同じなので簡単に

• ScriptManagerを置きます
• TextBoxを置きます
• デザインから「エクステンダーの追加」で追加

設定

• ScriptManagerのEnableScriptGlobalizationをTrueに
  • 曜日が日本語になるだけなので好みで。他のエクステンダーとの兼ね合いも注意。
• DaysModeTitleFormat
  • カレンダーのヘッダ部分の表示。"yyyy年MM月"にすると、○○○○年××月という表記に。
• TodaysDateFormat
  • カレンダー下部の今日の日付の書式。
• Format
  • TextBoxに入る日付の書式。

CSS周り

Tableに対してCSSを設定していると、表示がはみ出たりして変なことになっている場合が多いと思います。
特にフォーム周りだと、

 <table>
  <tr>
   <th>カラム</th>
   <td>
    <asp:TextBox ID="TextBox1" runat="server" />
    <asp:CalendarExtender ID="TextBox1_CalendarExtender" runat="server" ～>
   </td>
  </tr>
 </table>

 table td {
   padding: 3px;
   border: solid 1px #999999;
 }

こんなようなHTMLとCSSを書いている場合があると思いますが、CalendarExtenderは内部にTable構造を持っていて、更にそのTableの上位コンテナで幅をpxで固定しているために、上の指定だとカレンダーのtdの幅が伸びて、コンテナから中身がはみ出る為に、表示しきれなくなります。

これを手っ取り早く解決する方法は、

 div.ajax__calendar_container td {
   padding: 0 !important;
   border: none !important;
 }

こんな感じで、とにかく幅と高さに関係するCSSのプロパティを消していきます。

これをやると、非常に殺風景な感じのカレンダーになってしまうので、ほかの表との兼ね合いで似た雰囲気にしたい場合があると思うのですが、それを困難にしているのが、CalendarExtenderのAnimatedプロパティです。

Animatedプロパティの挙動

CalendarExtenderにはDays、Months、Yearsと3つの画面の切り替えがありますが、これはそれぞれDIVで囲まれていて、普段はdisplay:noneになっています。構造は以下のような感じ。

 <div class="ajax__calendar">
   <div class="ajax__calendar_container">
     <div class="ajax__calendar_header"></div>
     <div class="ajax__calendar_body">
       <div class="ajax__ calendar_days">
       <div class="ajax__ calendar_months" style="display: none">
       <div class="ajax__ calendar_months" style="display: none">
     </div>
   </div>
 </div>

最初にアクセスしたデフォルトは上の状態ですが、カレンダーがMonthsになると以下のように変化します。

 <div class="ajax__calendar">
   <div class="ajax__calendar_container">
     <div class="ajax__calendar_header"></div>
     <div class="ajax__calendar_body">
       <div class="ajax__ calendar_days" style="position: absolute; left: 0px; top: 139px;">
       <div class="ajax__ calendar_months" style="positon: absolute; left: 0ppx; top: 0px;">
       <div class="ajax__ calendar_months" style="display: none">
     </div>
   </div>
 </div>

CSSのPositionプロパティにより、Daysは139px下に移動し、MonthsがDaysの表示されていた位置に移動しています。
この139pxというのは、div.ajax__calendar_bodyのheightと同じ値で、つまりこの機能を使うためには高さを固定しなければならないということです。

AnimatedプロパティをFalseにする

CalendarExtenderのAnimatedプロパティをFalseにすると、Positionで移動はしないようになり、単にDisplayがnoneになります。
この状態では高さの固定はする必要がないので、以下のCSSを指定すれば、Tableの内容に相当して幅と高さが広がるようになります。

 div.ajax__calendar_container,
 div.ajax__calendar_body,
 div.ajax__calendar_days,
 div.ajax__calendar_months,
 div.ajax__calendar_years {
   width: auto !important;
   height: auto !important;
 }

 .ajax__calendar_body
 .ajax__calendar_days,
 .ajax__calendar_months,
 .ajax__calendar_years {
   position: static !important;
   top: auto !important;
   left: auto !important;
 }