ASP.NET DataGrid3のホームへ戻る

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

 

 

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

 

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

 

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

 

 

 

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

 

 

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

 

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

 

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

 

 

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

 

祝祭日や、会社の休業日などをカスタマイズするには、CalendarOnRenderDayイベントを登録します。たとえば、祝祭日を赤色で表示するには、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では、LabelTextBoxを定義して社員の入社日を表示しています。行295-301ImageButtonでは、カレンダーボタンを定義しています。この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では、TextBoxTextプロパティから入社日を取得しています。ここで取得した入社日は、ポップアップウィンドウに渡します。行40-42では、JavaScriptwindow.open()メソッドに指定するオプションを生成しています。行43では、window.open()に指定するurlを生成しています。

 

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

 

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

 

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-128With…End Withでは、StringBuilderAppend()メソッドで以下のJavaScriptを生成しています。

 

<script language='javascript'>
window.open('PopupCalendar.aspx?src=txtHireDate&date=yyyy/mm/dd','_blank'," features ");

</script>

 

JavaScriptwindow.open()メソッドは、新規ウィンドウを開きます。Open()メソッドの引数には、urltargetfeaturesを指定します。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>では、bodyCSSを定義しています。このCSSでは、filterプロパティの値にGradient()を指定してHTMLbodyにグラデーション(色調を段階的に変化させる)を適用しています。

 

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

 

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

 

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

 

8-9では、CalendarVisibleDateSelectedDateプロパティにデフォルトの日付を設定しています。これで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では、QueryStringsrc=から日付を転記するTextBoxIDを取得しています。行15では、Calendarから選択した日付を取得しています。CalendarSelectedDateプロパティには、選択した日付が格納されています。

 

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

 

<script language='javascript'>
   window.opener.frmPopupEmployee.txtHireDate.value = 'yyyy/mm/dd';

window.close();

</script>

 

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

 

24Page.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>

 

ASP.NET DataGrid3のホームへ戻る