.NET TIPS ［ASP.NET］Calendarコントロールのセルに任意のデータを埋め込むには？ - C# VB.NET Webフォーム

.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コントロール上で選択された日付について処理を行うには？」で紹介している。

カテゴリ：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 記事ランキング

本日月間

＠IT

［ASP.NET］Calendarコントロールのセルに任意のデータを埋め込むには？

注目のテーマ

Insider.NET 記事ランキング

転職／派遣情報を探す

年収６００万円！エンジニア向けの求人満載。転職希望者必見

エンジニアの転職なら【転職サーチ】