.NET TIPS

[ASP.NET]Calendarコントロールのセルに任意のデータを埋め込むには?

山田 祥寛
2005/03/18

 Calendarコントロールは、<table>や<a>などのHTMLタグを複合的に出力することで「月ごとのカレンダー」を生成する、ASP.NETの代表的なサーバ・コントロールの1つだ。Webアプリケーションを構築する際に、日付入力用のインターフェイスとして、あるいは最終的な処理結果の出力用として、カレンダーを利用したいケースは多々あるはずだ。そのような場合、従来のASP 3.0では自前で作りこむ必要があったわけだが、ASP.NETではCalendarコントロールを利用することで、同じことをするにもはるかに簡単に実現できるようになった。

 本稿では、このCalendarコントロールを利用して、データベースで管理されたスケジュール情報を該当する日付セルに出力する方法を紹介する。なお、本サンプル・プログラムを利用する場合には、あらかじめデータベース上に以下のような「schedule」テーブルを作成しておく必要がある。

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

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

<%@ Page Language="C#" ContentType="text/html" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.SqlClient" %>
<script runat="Server">
// それぞれの日付セルをレンダリングするタイミングで実行
void cal_DayRender(Object sender, DayRenderEventArgs e) {
  SqlConnection objDb=new SqlConnection("Data Source=(local);User ID=sa;Password=sa;Persist Security Info=True;Initial Catalog=dotnet");
  // 出力する日付セルに対応するスケジュール情報を抽出
  SqlCommand objCom = new SqlCommand("SELECT sid,title,sdate,stime,etime FROM schedule WHERE sdate=@sdate ORDER BY stime ASC",objDb);
  objCom.Parameters.Add("@sdate",e.Day.Date);
  objDb.Open();
  SqlDataReader objDr = objCom.ExecuteReader();
  // 取得したスケジュール情報を基に
  // LiteralControl(固定文字列)を生成し、
 
// 日付セル(e.Call)配下のコントロールとして追加
  while (objDr.Read()) {
    e.Cell.Controls.Add(new LiteralControl("<br />" + String.Format("{0}〜{1}:{2}", objDr.GetString(3), objDr.GetString(4), objDr.GetString(1))));
  }
  objDb.Close();
}
</script>
<html>
<head>
<title>スケジュールをカレンダー上に表示する</title>
</head>
<body>
<form runat="Server">
  <asp:Calendar id="cal" runat="server"
    DayHeaderStyle-BackColor="#FFCC66"
    onDayRender="cal_DayRender" 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" DayStyle-Height="50px"
    DayStyle-Width="14%" SelectedDayStyle-BackColor="Navy"
    ShowNextPrev="True" NextPrevFormat="FullMonth">
    <SelectedDayStyle BackColor="#CC5533" />
  </asp:Calendar>
</form>
</body>
</html>
Calendarコントロールの日付セルにスケジュール情報を出力するサンプル・プログラム(C#:calendar_cs.aspx)
 
<%@ Page Language="VB" ContentType="text/html" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.SqlClient" %>
<script runat="Server">
' それぞれの日付セルをレンダリングするタイミングで実行
Sub cal_DayRender(sender As Object, e As DayRenderEventArgs)
  Dim objDb As New SqlConnection("Data Source=(local);User ID=sa;Password=sa;Persist Security Info=True;Initial Catalog=dotnet")
  ' 出力する日付セルに対応するスケジュール情報を抽出
  Dim objCom As New SqlCommand("SELECT sid,title,sdate,stime,etime FROM schedule WHERE sdate=@sdate ORDER BY stime ASC",objDb)
  objCom.Parameters.Add("@sdate",e.Day.Date)
  objDb.Open()
  Dim objDr As SqlDataReader=objCom.ExecuteReader()
  ' 取得したスケジュール情報を基に
  ' LiteralControl(固定文字列)を生成し、
 
' 日付セル(e.Call)配下のコントロールとして追加
  Do While objDr.Read()
    e.Cell.Controls.Add(New LiteralControl("<br />" & String.Format("{0}〜{1}:{2}",objDr.GetString(3),objDr.GetString(4),objDr.GetString(1))))
  Loop
  objDb.Close()
End Sub
</script>
<html>
<head>
<title>スケジュールをカレンダー上に表示する</title>
</head>
<body>
<form runat="Server">
  <asp:Calendar id="cal" runat="server"
    DayHeaderStyle-BackColor="#FFCC66"
    onDayRender="cal_DayRender" 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" DayStyle-Height="50px"
    DayStyle-Width="14%" SelectedDayStyle-BackColor="Navy"
    ShowNextPrev="True" NextPrevFormat="FullMonth">
    <SelectedDayStyle BackColor="#CC5533" />
  </asp:Calendar>
</form>
</body>
</html>
Calendarコントロールの日付セルにスケジュール情報を出力するサンプル・プログラム(VB.NET:calendar_vb.aspx)

 上記のコードでポイントとなるのは、スケジュール情報の出力をDayRenderイベントの発生タイミングで行っているという点だ。

 Calendarコントロールでは、カレンダー配下のそれぞれの日付セルをレンダリング(出力)するタイミングでDayRenderイベントを発生する。本サンプルでは、DayRenderイベントに対応するイベント・ハンドラはcal_DayRenderメソッドだ。

 cal_DayRenderメソッドでは、第2パラメータに引き渡されるDayRenderEventArgsオブジェクト(System.Web.UI.WebControls名前空間)のDay.Dateプロパティ(詳細後述)から現在出力しようとしている日付情報を取得し、データベースから対応するスケジュール情報を取得しているというわけだ。

 以下、DayRenderEventArgsオブジェクトから利用可能な主なプロパティを示しておこう。

プロパティ 概要
Cell 日付セルを表すTableCellオブジェクト(System.Web.UI.WebControls名前空間)
Day 出力日付を表すCalendarDayオブジェクト(System.Web.UI.WebControls名前空間)(CalendarDayで利用可能なプロパティは別表のとおり)
DayRenderEventArgsクラスの主なプロパティ

 また、CalendarDayクラスで利用可能なプロパティについても列挙しておく。

プロパティ 概要
Date 日付
DayNumberText 日付文字列
IsOtherMonth カレンダーで表示している月以外の月か
IsSelectable 日付が選択可能か
IsSelected 日付が選択状態か
IsToday 日付が今日か
IsWeekend 日付が週末(土・日)か
CalendarDayオブジェクトの主なプロパティ

 cal_DayRenderメソッドでは単にDateプロパティを利用して日付情報を取得しているだけであるが、CalendarDayオブジェクトを利用することで、例えば今日の日付セルにだけ詳細なスケジュール情報を出力するであるとか、今月以外の日付についてはスケジュール表示を除外する、というような細かな制御が可能になるはずだ。

 以上が理解できたら、scheduleテーブルに適当なスケジュール情報を入力したうえで、サンプル・プログラムを起動してみよう。以下のようにデータベースに入力したスケジュール情報がカレンダー上に表示されていれば成功だ。

calendar_cs.aspx/calendar_vb.aspxの実行結果

 さらにこの機能を応用すれば、カレンダー上にはスケジュールの有無だけを表示しておき、日付を選択したタイミングで詳細なスケジュール情報を表示する、というような処理も実現できる。これについては、「TIPS:[ASP.NET]Calendarコントロール上で選択された日付について処理を行うには?」で紹介している。End of Article

カテゴリ:Webフォーム 処理対象:カレンダー
使用ライブラリ:DayRenderEventArgsクラス(System.Web.UI.WebControls名前空間)
使用ライブラリ:TableCellクラス(System.Web.UI.WebControls名前空間)
使用ライブラリ:CalendarDayクラス(System.Web.UI.WebControls名前空間)
関連TIPS:[ASP.NET]Calendarコントロール上で選択された日付について処理を行うには?
 
この記事と関連性の高い別の.NET TIPS
[ASP.NET]Calendarコントロール上で選択された日付について処理を行うには?
[ASP.NET AJAX]Calendarコントロールで日付入力ボックスを定義するには?
[ASP.NET AJAX]PopupControlコントロールで標準コントロールにポップアップ機能を追加するには?
[ASP.NET]メンバシップAPIでユーザー情報の編集を行うには?
[ASP.NET]TreeViewコントロールで深階層のツリー情報を効率よく読み込むには?
このリストは、(株)デジタルアドバンテージが開発した
自動関連記事探索システム 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メールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

Insider.NET 記事ランキング

本日 月間