ポップアップカレンダーを表示するサンプル

図ポップアップカレンダーを表示するサンプル

このサンプルは、Webページに表示されている社員を編集するとき、ポップアップカレンダーから日付を選択することができます。DataGridから社員を選択して、編集ボタンをクリックすると、新規ウィンドウに社員のデータが表示されます。社員の入社日を変更するときは、入社日の右側に表示されているカレンダーボタンをクリックします。

カレンダーボタンをクリックすると、新規ウィンドウが開いてカレンダーが表示されます。カレンダーから入社日を選択したら、[選択]ボタンをクリックして確定します。[閉じる]ボタンをクリックすると、ウィンドウを閉じます。

◆プログラムPopupCalendar.aspxのポイント

¶ポイント１　Calendarコントロールをカスタマイズするには

Calendarを見栄えよくカスタマイズするには、Web Matrixの「カレンダーの自動フォーマット」を利用すると便利です。自動フォーマットを利用すると、7種類のテンプレートからお好みのレイアウトを選択することができます。テンプレートのカラフル１とカラフル２がお勧めです。

図 Web Matrixの「カレンダーの自動フォーマット」

¶ポイント２社内カレンダーを表示するには

祝祭日や、会社の休業日などをカスタマイズするには、CalendarにOnRenderDayイベントを登録します。たとえば、祝祭日を赤色で表示するには、OnRenderDayイベントからIsHoliday()関数を呼んで戻り値がTrueなら日付の前景色を赤色(Red)に設定します。IsHoliday()関数は、カレンダーデータベースを検索して引数で渡された日付が祝祭日か調べてTrue/Falseを返します。

Sub calPopup_RenderDay(s As Object, e As DayRenderEventArgs)

Dim dtDate As DateTime = e.Day.Date

Dim tc As TableCell = e.Cell

If IsHoliday(dtDate) Then

tc.ForeColor = Color.Red

End If

End Sub

◆プログラムPopupEmployee.aspxの解説(HTML編)

PopupEmployee.aspxでは、DataGridから選択した社員をTextBoxに表示します。行287-294では、LabelとTextBoxを定義して社員の入社日を表示しています。行295-301のImageButtonでは、カレンダーボタンを定義しています。このImageButtonには、OnClickイベントを登録しています。OnClickイベントでは、新規ウィンドウを開いてカレンダーを表示します。

図 ImageButtonでカレンダーボタンを表示した例

リスト PopupEmployee.aspxのソースコード(HTML編)

219: <html>
225: <body>
226: <form id="frmPopupEmployee" runat="server">
・・・

287: <asp:Label id="lblHireDate" runat="server"
288:   CssClass="label"
289:   Text="入社日" />
292: <asp:TextBox id="txtHireDate" runat="server"
293:   CssClass="textBox"
294:   Columns="13" />
295: <asp:ImageButton id="ibtnCalendar" runat="server"
296:   OnClick="ibtnCalendar_Click"
297:   ImageUrl="../img/calendar.gif"
298:   Title="Popup Calendar"
299:   CssClass="imageOn"
300:   Enabled="True"
301:   ImageAlign="Middle" />
      ・・・

376: </form>
377: </body>
377: </html>

◆プログラムPopupEmployee.aspxの解説(コード編)

PopupEmployee.aspxでは、カレンダーボタンをクリックしたとき、新規ウィンドウを開いてポップアップカレンダーを表示します。

Sub ibtnCalendar_Click()イベントの処理

このイベントは、カレンダーボタンをクリックしたときに発生します。このイベントでは、新規ウィンドウを開くJavaScriptを生成して登録します。

行39では、TextBoxのTextプロパティから入社日を取得しています。ここで取得した入社日は、ポップアップウィンドウに渡します。行40-42では、JavaScriptのwindow.open()メソッドに指定するオプションを生成しています。行43では、window.open()に指定するurlを生成しています。

このurlには、QueryStringにsrc=とdate=を指定しています。src=には、入社日のTextBoxのIDを指定します。src=で指定したIDは、ポップアップカレンダーから選択した入社日を転記するときに使用します。date=には、TextBoxに表示されている入社日を指定します。date=に指定した日付は、カレンダーを表示するときデフォルトの日付とします。

行45では、OpenWindow()を呼び出して新規ウィンドウを開くJavaScriptを登録します。OpenWindowの引数には、url、target、featuresを指定します。

38: Sub ibtnCalendar_Click(s As Object, e As ImageClickEventArgs)
39:   Dim strSelectedDate As String = txtHireDate.Text
40:   Dim strFeatures As String = "height=250,width=165,left=50,top=50," & _
41:     "dependent=yes,location=no,menubar=no,resizable=yes,scrollbars=no," & _
42:     "status=no,titlebar=yes,toolbar=no"
43:   Dim strUrl As String = "PopupCalendar.aspx?src=txtHireDate&date=" & strSelectedDate
44:

45: OpenWindow(strUrl, "_blank", strFeatures)
46: End Sub

Sub OpenWindow()の処理

このサブプロシージャでは、新規ウィンドウを開くJavaScriptを生成して登録します。OpenWindowは、カレンダーボタンをクリックしたときにOnClickイベントから呼ばれます。

行124-128のWith…End Withでは、StringBuilderのAppend()メソッドで以下のJavaScriptを生成しています。

</script>

JavaScriptのwindow.open()メソッドは、新規ウィンドウを開きます。Open()メソッドの引数には、url、target、featuresを指定します。urlには、新規ウィンドウに表示するファイルPopupCalendar.aspxを指定しています。このurlには、QueryStringとしてsrc=とdate=を指定しています。

行129では、Page.RegisterClientScriptBlock()メソッドでJavaScriptを登録しています。ここで登録したJavaScriptは、Webページがロードされたときにブラウザから実行されます。

122: Sub OpenWindow(strUrl As String, strTarget As String, strFeatures As String)
123:   Dim sbScript As New StringBuilder()
124:   With sbScript
125:     .Append("<script language='javascript'>" & vbCrLf)
126:     .Append(vbTab & "window.open('" & strUrl & "','" &

strTarget & "','" & strFeatures & "');" & vbCrLf)
127:     .Append("</" & "script>")
128:   End With
129:   RegisterClientScriptBlock("openWindow", sbScript.ToString)
130: End Sub

リスト PopupEmployee.aspxのソースコード(コード編)

1: <%@ Page language="vb" SmartNavigation="False" %>
2: <%@ Import Namespace="System.Data" %>
3: <%@ Import Namespace="System.Data.OleDb" %>
4:
5: <script language="vb" runat="server">
6: Private mdt As DataTable
7:
38: Sub ibtnCalendar_Click(s As Object, e As ImageClickEventArgs)
46: End Sub
47:
122: Sub OpenWindow(strUrl As String, strTarget As String, strFeatures As String)
130: End Sub
217: </script>

◆プログラムPopupCalendar.aspxの解説(HTML編)

PopupCalendar.aspxでは、Calendarコントロールを使用してカレンダーを表示します。行31-37の<style>…</style>では、bodyにCSSを定義しています。このCSSでは、filterプロパティの値にGradient()を指定してHTMLのbodyにグラデーション（色調を段階的に変化させる）を適用しています。

32: body {

33: filter: progid:DXImageTransform.Microsoft.Gradient(
34: gradientType=1,
35: startColorStr=#FFFFFFF, endColorStr=#66FFFF00)
36: }

行41-47では、Calendarコントロールを定義しています。このCalendarには、DayStyle-ForeColorプロパティにBlueを設定して平日を青色で表示します。また、WeekendDayStyle-ForeColorプロパティにGreenを設定して、週末の日付を緑色で表示します。さらに、SelectedDayStyle-BackColorプロパティにPinkを設定して、選択した日付の背景色をピンク色にしています。

図 Calendarコントロールをカスタマイズしてグラデーションを適用した例

行49-56では、「選択」と「閉じる」のButtonを定義しています。選択ボタンには、OnClickイベントを登録しています。このOnClickイベントでは、カレンダーから選択した日付を入社日のTextBoxに転記します。閉じるのボタンには、クライアント側で動作するonClickイベントを登録します。クライアント側で実行されるonClickイベントでは、JavaScriptのwindow.close()メソッドを実行してウィンドウを閉じます。

図「選択」と「閉じる」のボタンを表示した例

リスト PopupCalendar.aspxのソースコード(HTML編)

28: <html>
29: <head>
31: <style>
32: body {
33: filter: progid:DXImageTransform.Microsoft.Gradient(
34:   gradientType=1,
35:   startColorStr=#FFFFFFF, endColorStr=#66FFFF00)
36: }
37: </style>
38: </head>
39: <body>
40: <form id="frmPopupCalendar" runat="server">
41: <asp:Calendar id="calPopup" runat="server"
42:   Width="0%"
43:   Height="0%"
44:   ShowGridLines="True"
45:   DayStyle-ForeColor="Blue"
46:   WeekendDayStyle-ForeColor="Green"
47:   SelectedDayStyle-BackColor="Pink" />
48: <p>
49: <asp:button id="btnSelect" runat="server"
50:   Text="選択"
52:   OnClick="btnSelect_Click" />
53: <asp:button id="btnClose" runat="server"
54: Text="閉じる"
56:   />
57: </form>
58: </body>
59: </html>

◆プログラムPopupCalendar.aspxの解説(コード編)

PopupCalendar.aspxでは、Calendarから選択した日付を親ウィンドウに転記します。

Sub Page_Load()イベントの処理

このイベントは、ページがロードされたときに実行されます。このイベントでは、Calendarのデフォルトの日付を設定します。

行5-10のIf…End Ifでは、ページが最初にロードされたか調べています。ページが最初にロードされたときは、閉じるボタンにクライアント側で動作するonClickイベントを追加します。Buttonにクライアント側で動作するイベントを追加するには、AttributesコレクションのAdd()メソッドを使用します。Add()メソッドの引数には、イベント名とイベント処理を記述します。

行7では、QueryStringのdate=からデフォルトで表示する日付を取得しています。QueryStringには、文字型で格納されていますので、ConvertToDateTime()で日付型に変換します。

Request.QueryString("date") è yyyy/mm/dd

行8-9では、CalendarのVisibleDate、SelectedDateプロパティにデフォルトの日付を設定しています。これでCalendarには、QueryStringに指定された日付が選択された状態で表示されます。

4: Sub Page_Load()
5:   If Not IsPostBack Then
6:     btnClose.Attributes.Add("onclick", "window.close();")
7:     Dim dtmSelectedDate As DateTime = Convert.ToDateTime( Request.QueryString("date") )
8:     calPopup.VisibleDate = dtmSelectedDate
9:     calPopup.SelectedDate = dtmSelectedDate
10:   End If
11: End Sub

Sub btnSelect_Click()イベントの処理

このイベントは、Webページから選択ボタンをクリックしたときに発生します。このイベントでは、Calendarから選択した日付を、親ウィンドウに転記するJavaScriptを生成して登録します。

行14では、QueryStringのsrc=から日付を転記するTextBoxのIDを取得しています。行15では、Calendarから選択した日付を取得しています。CalendarのSelectedDateプロパティには、選択した日付が格納されています。

行17-23のWith…End Withでは、StringBuilderのAppend()メソッドで以下のJavaScriptを生成しています。

window.close();

</script>

JavaScriptのwindow.opener.frmPopupEmployee.txtHireDate.value=では、Calendarから選択した日付を親ウィンドウのTextBoxに転記します。window.close()メソッドは、ウィンドウを閉じます。

行24のPage.RegisterClientScriptBlock()メソッドでは、JavaScriptを登録します。ここで登録したJavaScriptは、Webページがロードされたときにブラウザから実行されます。

13: Sub btnSelect_Click(s As Object, e As EventArgs)
14:   Dim strSource As String = Request.QueryString("src")
15:   Dim dtmDate As DateTime = calPopup.SelectedDate
16:   Dim sbScript As New StringBuilder()
17:   With sbScript
18:     .Append("<script language='javascript'>" & vbCrLf)
19:     .Append(vbTab & "window.opener.frmPopupEmployee." & strSource & ".value = '" & _
20:       dtmDate.ToString("d") & "';" & vbCrLf)
21:     .Append(vbTab & "window.close();" & vbCrLf)
22:     .Append("</" & "script>")
23:   End With
24:   RegisterClientScriptBlock("closeWin", sbScript.ToString)
25: End Sub

リスト PopupCalendar.aspxのソースコード(コード編)

1: <%@ Page language="vb" SmartNavigation="False" %>
2:
3: <script runat="server">
4: Sub Page_Load()
11: End Sub
12:
13: Sub btnSelect_Click(s As Object, e As EventArgs)
25: End Sub
26: </script>