| |
|
.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;">
<%# 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;">
<%# 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コントロールに反映させるなど入力支援機能も容易に作成できる。
|
|
generated by
|
|
Insider.NET 記事ランキング
本日
月間
