次の方法で共有

方法 : Calendar Web サーバー コントロールにおける日単位のカスタマイズ

更新 : 2007 年 11 月

既定では、Calendar コントロールの日付は数字で表示されます。日付選択が有効になっている場合、数字はリンクとして表示されます。詳細については、「方法 : Calendar Web サーバー コントロールにおけるユーザーの日付選択を制御する」を参照してください。

それぞれの日単位で表示と内容を次のようにカスタマイズできます。

  • 特定の日をプログラムで強調できます。たとえば、休日をほかの色で表示できます。

  • 日単位での選択ができるかどうかをプログラムで指定できます。

  • 予約や行事などの情報を日の表示に追加できます。

  • ユーザーがクリックして日を選択できるリンク テキストをカスタマイズできます。

Calendar コントロールはブラウザに送信する出力を作成するときに、DayRender イベントを発生させます。このコントロールは、日の表示を準備するときに、日単位でイベントを発生させます。そのため、プログラムによってどの日付を表示するかをチェックし、その表示をカスタマイズできます。

DayRender イベントのメソッドは、イベントを発生させるコントロール (Calendar コントロール) への参照と DayRenderEventArgs 型のオブジェクトを引数として使用します。DayRenderEventArgs オブジェクトを使用すると、次の 2 つのオブジェクトにアクセスできます。

  • Cell オブジェクト。TableCell オブジェクトの 1 種です。このオブジェクトを使用して、それぞれの日の表示形式を設定できます。

  • Day オブジェクト。このオブジェクトを使用して、表示する日の情報の問い合わせ、日付選択の制御、および内容の登録を行うことができます。Day オブジェクトは、日の情報を知るために使用できる多数のプロパティをサポートしています (IsSelected や IsToday など)。また、日の内容の登録に使用できる Controls コレクションもサポートしています。

日単位で表示をカスタマイズするには

  1. Calendar コントロールの DayRender イベントを処理するメソッドを作成します。

  2. このメソッドでは、DayRenderEventArgs 引数でアクセスできる Cell オブジェクトのプロパティを設定します。

    日単位で表示を変更する方法を次の例に示します。このメソッドでは、休日を黄色で表示し、週末を緑色で表示します。この例では、休日は 2005 年の 11 月 23 日から 11 月 30 日です。

    Protected Sub Calendar1_DayRender(ByVal sender As Object, _
        ByVal e As DayRenderEventArgs) Handles Calendar1.DayRender
    ' Display vacation dates in yellow boxes with purple borders.
    Dim vacationStyle As New Style()
    With vacationStyle
        .BackColor = System.Drawing.Color.Yellow
        .BorderColor = System.Drawing.Color.Purple
        .BorderWidth = New Unit(3)
    End With

    ' Display weekend dates in green boxes.
    Dim weekendStyle As New Style()
    weekendStyle.BackColor = System.Drawing.Color.Green

    ' Vacation is from Nov 23, 2005 to Nov 30, 2005.
    If ((e.Day.Date >= New Date(2005, 11, 23)) _
            And (e.Day.Date <= New Date(2005, 11, 30))) Then
        e.Cell.ApplyStyle(vacationStyle)
    ElseIf (e.Day.IsWeekend) Then
        e.Cell.ApplyStyle(weekendStyle)
    End If
End Sub

protected void Calendar1_DayRender(object sender, 
    DayRenderEventArgs e)
{
    // Display vacation dates in yellow boxes with purple borders.
    Style vacationStyle = new Style();
    vacationStyle.BackColor = System.Drawing.Color.Yellow;
    vacationStyle.BorderColor = System.Drawing.Color.Purple;
    vacationStyle.BorderWidth = 3;

    // Display weekend dates in green boxes.
    Style weekendStyle = new Style();
    weekendStyle.BackColor = System.Drawing.Color.Green;

    if ((e.Day.Date >= new DateTime(2000,11,23)) &&
        (e.Day.Date <= new DateTime(2000,11,30)))
    {
        // Apply the vacation style to the vacation dates.
        e.Cell.ApplyStyle(vacationStyle);
    }
    else if (e.Day.IsWeekend)
    {
        // Apply the weekend style to the weekend dates.
        e.Cell.ApplyStyle(weekendStyle);
    }

日単位で選択できるように指定するには

  1. Calendar コントロールの DayRender イベントのメソッドで、Day オブジェクトの Date プロパティから情報を取得することで表示する日を決定します。

  2. その日の IsSelectable プロパティを true に設定します。

    2005 年 10 月 1 日を選択できるように設定し、その他の日付は選択できないように設定する方法を次の例に示します。

    Protected Sub Calendar1_DayRender(ByVal sender As Object, _
        ByVal e As DayRenderEventArgs) Handles Calendar1.DayRender
    Dim myAppointment As Date = New Date(2005, 10, 1)
    If (e.Day.Date = myAppointment) Then
        e.Day.IsSelectable = True
    Else
        e.Day.IsSelectable = False
    End If
End Sub

    protected void Calendar1_DayRender(object sender, 
    DayRenderEventArgs e)
{
    DateTime myAppointment = new DateTime(2005, 10, 1);
    if (e.Day.Date == myAppointment)
    {
        e.Day.IsSelectable = true;
    }
    else
    {
        e.Day.IsSelectable = false; 
    }
}

日単位で内容を登録するには

  • Calendar コントロールの DayRender イベントのハンドラで、HTML または ASP.NET Web コントロールを DayRenderEventArgs 引数から Day オブジェクトの Controls コレクションに追加します。

    休日を表示する例を次に示します。休日の一覧は、ページを読み込む間に 2 次元の配列として作成されます。休日の説明は、それぞれの日付に対応した要素に読み込まれます。DayRender イベントを処理するメソッドでは、それぞれの日が休日配列と比較されます。対応する休日配列要素に値が格納されている場合は、休日の説明文で Label コントロールが作成され、その日の Controls コレクションに登録されます。

    Dim holidays(13, 32) As String

Protected Sub Page_Load(ByVal sender As Object, _
        ByVal e As System.EventArgs) Handles Me.Load
    holidays(1, 1) = "Birthday"
    holidays(2, 14) = "Anniversary"
End Sub

Protected Sub Calendar1_DayRender(ByVal sender As Object, _
        ByVal e As DayRenderEventArgs) Handles Calendar1.DayRender
    If e.Day.IsOtherMonth Then
        e.Cell.Controls.Clear()
    Else
        Dim aDate As Date = e.Day.Date
        Dim aHoliday As String = holidays(aDate.Month, aDate.Day)
        If (Not aHoliday Is Nothing) Then
            Dim aLabel As Label = New Label()
            aLabel.Text = "<br>" & aHoliday
            e.Cell.Controls.Add(aLabel)
        End If
    End If
End Sub

    string[,] holidays = new String[13, 32];

protected void Calendar1_DayRender(object sender, DayRenderEventArgs e)
{
    string aHoliday;
    DateTime theDate = e.Day.Date;
    aHoliday = holidays[theDate.Month, theDate.Day];
    if (aHoliday != null)
    {
        Label aLabel = new Label();
        aLabel.Text = " <br>" + aHoliday;
        e.Cell.Controls.Add(aLabel);
    }

}

protected void Page_Load(object sender, EventArgs e)
{
    holidays[1, 1] = "Birthday";
    holidays[2, 14] = "Anniversary";
}

日単位でリンク テキストをカスタマイズするには

  1. Calendar コントロールの DayRender イベントのメソッドで、DayRenderEventArgs 引数の SelectUrl プロパティを取得します。SelectUrl プロパティは、その日に通常表示される JavaScript を返し、日付選択を示すポストバックを発生させます。

  2. 連結を使用することで、SelectUrl プロパティの値を href 属性として使用する HTML ハイパーリンクを作成します。

  3. このハイパーリンクを Cell オブジェクトの Text プロパティとして追加します。

    休日を表示する例を次に示します。休日の一覧は、ページを読み込む間に 2 次元の配列として作成されます。休日の説明は、それぞれの日付に対応した要素に読み込まれます。DayRender イベントを処理するメソッドでは、それぞれの日が休日配列と比較されます。休日配列の対応する要素が値を含む場合、コードは日付数字ではなく休日名を表示するリンク テキストを作成します。

    Dim holidays(13, 32) As String

Protected Sub Page_Load(ByVal sender As Object, _
        ByVal e As System.EventArgs) Handles Me.Load
    holidays(1, 1) = "Birthday"
    holidays(2, 14) = "Anniversary"
End Sub

Protected Sub Calendar1_DayRender(ByVal sender As Object, _
        ByVal e As DayRenderEventArgs) Handles Calendar1.DayRender
    If e.Day.IsOtherMonth Then
        e.Cell.Controls.Clear()
    Else
        Dim aDate As Date = e.Day.Date
        Dim aHoliday As String = holidays(aDate.Month, aDate.Day)
        If (Not aHoliday Is Nothing) Then
            e.Cell.Text = _
                "<a href=" & e.SelectUrl & ">" & aHoliday & "</a>"
        End If
    End If
End Sub

    string[,] holidays = new String[13, 32];

protected void Calendar1_DayRender(object sender, DayRenderEventArgs e)
{
    string aHoliday;
    DateTime theDate = e.Day.Date;
    aHoliday = holidays[theDate.Month, theDate.Day];
    if (aHoliday != null)
    {
        e.Cell.Text = "<a href=" + e.SelectUrl + ">" + 
           aHoliday + "</a>";
    }
}

protected void Page_Load(object sender, EventArgs e)
{
    holidays[1, 1] = "Birthday";
    holidays[2, 14] = "Anniversary";
}

参照

処理手順

方法 : データベースで選択した日付を Calendar コントロールに表示する

概念

Calendar Web サーバー コントロールの概要