.NET TIPS

［ASP.NET］Calendarコントロール上で選択された日付について処理を行うには？

山田 祥寛
2005/08/12

　「TIPS：［ASP.NET］Calendarコントロールのセルに任意のデータを埋め込むには？」では、Calendarコントロールを利用して、あらかじめデータベース上に登録されたスケジュール情報をカレンダー上に表示する方法について紹介した。本稿では、その応用編として、カレンダー上にはスケジュールの有無のみを表示しておき、個々の日付を選択したタイミングで詳細なスケジュールを表示する方法を解説する。

　なお、本稿のサンプル・プログラムを実行するには、あらかじめデータベース上に以下のようなscheduleテーブルを作成しておく必要がある（前掲のTIPSで作成したものにmemoフィールドを追加したレイアウトになっている）。

フィールド名 データ型 概要
sid INT スケジュールID（主キー。連番）
title VARCHAR(100) スケジュールの件名
sDate VARCHAR(10) 日付（YYYY/MM/DD）
sTime VARCHAR(5) 開始時刻（HH:MM）
eTime VARCHAR(5) 終了時刻（HH:MM）
memo VARCHAR(255) スケジュールに関する詳細メモ
scheduleテーブルのフィールド・レイアウト

　それではまず、具体的なコードを眺めてみよう。

<%@ Page ContentType="text/html" Language="C#" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.SqlClient" %>
<%@ Import Namespace="System.Drawing" %>
<script runat="Server">
SqlDataReader scheInfo=null;

// それぞれの日付セルをレンダリングするタイミングで実行
void cal_DayRender(Object sender, DayRenderEventArgs e) {
  SqlConnection db = new SqlConnection("Data Source=(local);User ID=sa;Password=sa;Persist Security Info=True;Initial Catalog=dotnet");
  // 出力する日付で登録されたスケジュール情報が存在するかをチェック
  SqlCommand comm = new SqlCommand("SELECT sid FROM schedule WHERE sdate=@sdate", db);
  comm.Parameters.Add("@sdate", e.Day.Date);
  db.Open();
  SqlDataReader reader = comm.ExecuteReader();
  // スケジュールが存在する場合にのみセルの背景色をセット
  if (reader.HasRows) { e.Cell.BackColor = Color.Lavender; }
  db.Close();
}

// 選択セルが変更されたタイミングで実行
void cal_Changed(Object sender, EventArgs e) {
  SqlConnection db = new SqlConnection("Data Source=(local);User ID=sa;Password=sa;Persist Security Info=True;Initial Catalog=dotnet");
  // 選択された日付をキーにscheduleテーブルを検索
  SqlCommand comm = new SqlCommand("SELECT * FROM schedule WHERE sdate=@sdate ORDER BY stime ASC", db);
  comm.Parameters.Add("@sdate", cal.SelectedDate);
  db.Open();
  // 取得したDataReaderをRepeaterコントロールにバインド
  scheInfo = comm.ExecuteReader();
  rep.DataBind();
  db.Close();
}
</script>
<html>
<head>
<title>スケジュールの詳細を表示する</title>
</head>
<body>
<form runat="Server">
<table border="0">
<tr><td valign="top" width="230">
  <asp:Calendar id="cal" runat="Server" Width="200" Height="200"
    DayHeaderStyle-BackColor="#FFCC66"
    onDayRender="cal_DayRender" OnSelectionChanged="cal_Changed"
    ShowGridLines="true"
    BorderWidth="3" BorderColor="Black" Font-Name="Verdana"
    Font-Size="10px" TitleStyle-BackColor="#FFCC66"
    TitleStyle-Font-Size="12px" TitleStyle-Font-Bold="true"
    DayStyle-VerticalAlign="Top" SelectedDayStyle-BackColor="Navy"
    ShowNextPrev="True" NextPrevFormat="FullMonth">
    <SelectedDayStyle BackColor="#CC5533" />
  </asp:Calendar>
</td><td valign="top" width="370">
  <asp:Repeater id="rep" runat="Server" DataSource="<%# scheInfo %>">
    <HeaderTemplate>
      <table width="100%" bgcolor="#cee3f0" border="0">
      <tr>
        <td><span style="font-weight:bold;">&nbsp;&nbsp;&nbsp;
          <%# cal.SelectedDate.ToString("yyyy年MM月dd日") %>のスケジュール
          </span></td>
      </tr>
      </table>
      <dl>
    </HeaderTemplate>
    <ItemTemplate>
      <dt style="font-weight:bold;">
        <%# DataBinder.Eval(Container.DataItem, "title") %>
        （<%# DataBinder.Eval(Container.DataItem, "sTime") %>〜
        <%# DataBinder.Eval(Container.DataItem, "eTime") %>）</dt>
      <dd><%# DataBinder.Eval(Container.DataItem, "memo") %></dd>
    </ItemTemplate>
    <FooterTemplate></dl></FooterTemplate>
  </asp:Repeater>
</td></tr>
</table>
</form>
</body>
</html>
選択された日付に属するスケジュール情報を表示するWebフォーム（C#版：calendar_desc_cs.aspx）
　
<%@ Page ContentType="text/html" Language="VB" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.SqlClient" %>
<%@ Import Namespace="System.Drawing" %>
<script runat="Server">
Dim scheInfo As SqlDataReader

' それぞれの日付セルをレンダリングするタイミングで実行
Sub cal_DayRender(sender As Object, e As DayRenderEventArgs)
  Dim db As New SqlConnection("Data Source=(local);User ID=sa;Password=sa;Persist Security Info=True;Initial Catalog=dotnet")
  ' 出力する日付で登録されたスケジュール情報が存在するかをチェック
  Dim comm As New SqlCommand("SELECT sid FROM schedule WHERE sdate=@sdate", db)
  comm.Parameters.Add("@sdate", e.Day.Date)
  db.Open()
  Dim reader As SqlDataReader = comm.ExecuteReader()
  ' スケジュールが存在する場合にのみセルの背景色をセット
  If reader.HasRows Then e.Cell.BackColor=Color.Lavender
  db.Close()
End Sub

' 選択セルが変更されたタイミングで実行
Sub cal_Changed(sender As Object, e As EventArgs)
  Dim db As New SqlConnection("Data Source=(local);User ID=sa;Password=sa;Persist Security Info=True;Initial Catalog=dotnet")
  ' 選択された日付をキーにscheduleテーブルを検索
  Dim comm As New SqlCommand("SELECT * FROM schedule WHERE sdate=@sdate ORDER BY stime ASC", db)
  comm.Parameters.Add("@sdate", cal.SelectedDate)
  db.Open()
  ' 取得したDataReaderをRepeaterコントロールにバインド
  scheInfo = comm.ExecuteReader()
  rep.DataBind()
  db.Close()
End Sub
</script>
<html>
<head>
<title>スケジュールの詳細を表示する</title>
</head>
<body>
<form runat="Server">
<table border="0">
<tr><td valign="top" width="230">
  <asp:Calendar id="cal" runat="Server" Width="200" Height="200"
    DayHeaderStyle-BackColor="#FFCC66"
    onDayRender="cal_DayRender" OnSelectionChanged="cal_Changed"
    ShowGridLines="true"
    BorderWidth="3" BorderColor="Black" Font-Name="Verdana"
    Font-Size="10px" TitleStyle-BackColor="#FFCC66"
    TitleStyle-Font-Size="12px" TitleStyle-Font-Bold="true"
    DayStyle-VerticalAlign="Top" SelectedDayStyle-BackColor="Navy"
    ShowNextPrev="True" NextPrevFormat="FullMonth">
    <SelectedDayStyle BackColor="#CC5533" />
  </asp:Calendar>
</td><td valign="top" width="370">
  <asp:Repeater id="rep" runat="Server" DataSource="<%# scheInfo %>">
    <HeaderTemplate>
      <table width="100%" bgcolor="#cee3f0" border="0">
      <tr>
        <td><span style="font-weight:bold;">&nbsp;&nbsp;&nbsp;
          <%# cal.SelectedDate.ToString("yyyy年MM月dd日") %>のスケジュール
          </span></td>
      </tr>
      </table>
      <dl>
    </HeaderTemplate>
    <ItemTemplate>
      <dt style="font-weight:bold;">
        <%# DataBinder.Eval(Container.DataItem, "title") %>
        （<%# DataBinder.Eval(Container.DataItem, "sTime") %>〜
        <%# DataBinder.Eval(Container.DataItem, "eTime") %>）</dt>
      <dd><%# DataBinder.Eval(Container.DataItem, "memo") %></dd>
    </ItemTemplate>
    <FooterTemplate></dl></FooterTemplate>
  </asp:Repeater>
</td></tr>
</table>
</form>
</body>
</html>
選択された日付に属するスケジュール情報を表示するWebフォーム（VB.NET版：calendar_desc_vb.aspx）

　上記のコードでポイントとなるのは、スケジュール詳細情報の出力をCalendarコントロール選択のタイミングで行っているという点だ。

　Calendarコントロールでは、カレンダー配下の選択セルを変更したタイミングでSelectionChangedイベントが発生する。本サンプル・プログラムでは、SelectionChangedイベントに対応するイベント・ハンドラはcal_Changedメソッドだ。このcal_Changedメソッドでは、CalendarオブジェクトのSelectedDateプロパティから現在の選択日付を取得し、scheduleテーブル上のスケジュール情報を取得しているというわけだ。

　以上が理解できたら、scheduleテーブルに適当なスケジュール情報を入力したうえで、サンプル・プログラムを起動してみよう。以下の画面のように、選択された日付に対応するスケジュール情報が、カレンダー右部に表示されれば成功だ。

サンプル・プログラム（calendar_desc_cs.aspx／calendar_desc_vb.aspx）の実行結果

　このテクニックを応用すれば、例えばCalendarコントロール上で選択された日付を動的にTextBoxコントロールに反映させるなど入力支援機能も容易に作成できる。End of Article

カテゴリ：Webフォーム　処理対象：カレンダー
使用ライブラリ：Calendarコントロール
関連TIPS：［ASP.NET］Calendarコントロールのセルに任意のデータを埋め込むには？
　
この記事と関連性の高い別の.NET TIPS
［ASP.NET］Calendarコントロールのセルに任意のデータを埋め込むには？
［ASP.NET AJAX］Calendarコントロールで日付入力ボックスを定義するには？
このリストは、（株）デジタルアドバンテージが開発した
自動関連記事探索システム Jigsaw（ジグソー） により自動抽出したものです。
generated by

「.NET TIPS」

TechTargetジャパン

Insider.NET フォーラム 新着記事

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード

＠IT 新着記事

キャリアアップ

- PR -
＠IT Sepcial
→ ＠IT Special ヘ

イベントカレンダー

PickUpイベント

- PR -
もっと見る
- PR -

お勧め求人情報

ホワイトペーパー（TechTargetジャパン）

＠IT Sepcial
→ ＠IT Special ヘ
ソリューションFLASH