CodeZine(コードジン)

特集ページ一覧

カレンダーで日付を簡単に入力するWebページを作る

WebCalendar for .NETのC1WebCalendarコントロールをWebページに実装する

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2007/12/21 14:00
目次

ポップアップカレンダーの作成

 今度は、普段はカレンダーは表示されず、ボタンを押すとカレンダーがポップアップする機能を持ったWebページを作成します。

Webフォームとクライアント側で実行するメソッドの作成

 C1WebCalendarコントロールのポップアップ機能を使う場合は、HTMLフォーム用のコントロールを使用して処理を行います。

1

 新しいWebフォームをプロジェクトに追加し、ツールボックスの「HTML」タブをクリックして、HTMLフォーム用の「Input(Text)」「Input(Button)」を配置します。その下に、C1WebCalendarコントロールを配置し、タスクトレイの「オートフォーマット」で「Professional」を選びます。

 なお、今度はAutoPostBackOnSelectプロパティをTrueにしないでください。Trueにしてしまうと、C1WebCalendarコントロールで選択した値がサーバにポストされてしまい、WebページのHTMLコントロールが受け取れなくなってしまいます。

HTMLフォームの「Input(Text)」「Input(Button)」とC1WebCalendarコントロールを配置する
HTMLフォームの「Input(Text)」「Input(Button)」とC1WebCalendarコントロールを配置する
2

 aspxファイルの「ソース」タブをクリックし、HTMLのソースコードを表示します。そして、Buttonの<input>タグにonclick="Popup()"を追加します。

<input id="Button1" type="button" value="入力..." onclick="Popup()" />
<br />
3

 その下に<script>タグを作成し、Popupというクライアント側で実行するメソッドを作成します。Popupは、Buttonがクリックされた時に呼び出されて実行するメソッドで、2つの処理を行います。

 1つは、C1WebCalendarコントロールのPopupSettingクラスのDockプロパティを使って、Buttonの下にポップアップさせます。PopupSettingクラスは、カレンダーをポップアップする際の設定を保存するクラスです。

 もう1つは、C1WebCalendarクライアントクラスのPopupBesideメソッドを実行し、HTMLコントロールの隣にカレンダーをポップアップさせます。引数は1つで、HTMLコントロールのidを設定します。ここでは、Buttonの隣に表示するので、Buttonのid「Button1」を指定しています。

C#
function Popup()
{
    C1WebCalendar1_Client.PopupSetting.Dock = c1_dock_bottomleft;
    C1WebCalendar1_Client.PopupBeside(
                                document.getElementById("Button1"));
}
4

 もう1つクライアント側で実行するメソッドCalendar_Selectを作成します。

 このメソッドは、カレンダーで選択された値を返すメソッドです。このメソッドで、選択された日時をテキストボックスに設定する式を実行します。

C#
function Calendar_Select(calendar)
{
    if (calendar)
        document.all("Text1").value = calendar.SelectedDate;
}
5

 作成したCalendar_Selectメソッドを、C1WebCalendarコントロールに結合します。コードウィンドウの「デザイン」タブをクリックし、フォームデザイナに戻ります。C1WebCalendarコントロールをクリックし、プロパティウィンドウの「PopupMode」プロパティをTrueにします。また、「ClientOnSelChange」プロパティに、メソッド名Calendar_Selectを設定します。

 これで、カレンダーがクリックされると、このメソッドが呼び出されて選択された日付がテキストボックスに転送されます。

「ClientOnSelChange」プロパティにメソッド名「Calendar_Select」を設定
「ClientOnSelChange」プロパティにメソッド名「Calendar_Select」を設定

まとめ

 C1WebCalendarコントロールをはじめ、Webページ作成に優れたコンポーネントはまだまだあります。

 スタンドアローンのWindowsアプリケーションに比べ、Webアプリケーションの作成は環境が今一歩であったり、制約が多かったりしていますが、こういう時こそコンポーネントを使うと開発効率や製品の性能がアップします。

 今後も、これはいい!と思ったWebコンポーネントを使っていきたいと思います。



  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:ComponentZine(ComponentOne)

もっと読む

著者プロフィール

  • 瀬戸 遥(セト ハルカ)

    8ビットコンピュータの時代からBASICを使い、C言語を独習で学びWindows 3.1のフリーソフトを作成、NiftyServeのフォーラムなどで配布。Excel VBAとVisual Basic関連の解説書を中心に現在まで40冊以上の書籍を出版。近著に、「ExcelユーザーのためのAccess再...

あなたにオススメ

All contents copyright © 2005-2022 Shoeisha Co., Ltd. All rights reserved. ver.1.5