.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コントロールで日付入力ボックスを定義するには?
[ASP.NET AJAX]PopupControlコントロールで標準コントロールにポップアップ機能を追加するには?
[ASP.NET]GridViewコントロールに選択ボタンを追加するには?
[ASP.NET]GridView+DetailsViewコントロールで一覧/明細画面を作成するには?
このリストは、(株)デジタルアドバンテージが開発した
自動関連記事探索システム Jigsaw(ジグソー) により自動抽出したものです。
generated by

「.NET TIPS」


Insider.NET フォーラム 新着記事
  • 第2回 簡潔なコーディングのために (2017/7/26)
     ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている
  • 第1回 Visual Studio Codeデバッグの基礎知識 (2017/7/21)
     Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう
  • 第1回 明瞭なコーディングのために (2017/7/19)
     C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える
  • Presentation Translator (2017/7/18)
     Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)
- PR -

注目のテーマ

Insider.NET 記事ランキング

本日 月間
ソリューションFLASH