バージョン

WebMonthCalendar でカスタム日を作成

始める前に

WebMonthCalendar™ によって、外観をカスタマイズしたり、カレンダーの特定の日にユーザー独自のテキストを定義することができます。 ユーザー独自のカスタム CSS クラスは、カレンダーの任意の日のテキストをスタイルするために使用できます。 コントロールの CustomDays プロパティを設定することによって達成できます。

達成すること

WebMonthCalendar でカスタム日を作成する方法を学習します。

次の手順を実行します

  1. Microsoft® Visual Studio® ツールボックスから、ScriptManager コンポーネントと WebMonthCalendar コントロールをフォームにドラッグ アンド ドロップします。

  2. カスタム日に CSS クラスを定義するために ASPX ソースに以下のコードを含めます。この CSS クラスが WebMonthCalendar コントロールに関連づけられると、カスタム日のテキストは赤色に変わります。

HTML の場合:

<style type="text/css">
     .myCustomDay
     {
        color : Red;
     }
    </style>

  1. プロパティ ウィンドウで、CustomDays プロパティを指定して、省略記号 (…​) ボタンをクリックし、CalendarCustomDay コレクション エディタを起動します。

  2. [追加] ボタンをクリックしてカスタム日を追加します。 CalendarCustomDay コレクション エディタは以下の画像のようになります。

WebMonthCalendar Using Custom Days in WebMonthCalendar 01.png

  1. 赤色の「H」を付けて June 26th, 2009 を表示するために、CalendarCustomDay コレクション エディタの右側のペインで以下の CalendarCustomDay プロパティを設定します。

プロパティ Value

CssClass

myCustomDay

日:

26

月

6

テキスト

H

年

2009

  1. アプリケーションを保存して実行します。 WebMonthCalendar は以下の画像のようになるはずです。

コード ビハインドからカスタム日を作成

// CalendarCustomDay のインスタンスを作成します
CalendarCustomDay myCustomDay = new CalendarCustomDay();
//ユーザー独自の Css クラスをカスタム日の CssClass プロパティに設定します
myCustomDay.CssClass = "myCustomDay";
//Text プロパティをユーザーが表示したいテキストに設定します
myCustomDay.Text = "H";
//ユーザーがカスタマイズしたい月の日を設定します
myCustomDay.Day = 26;
//月を設定します
myCustomDay.Month = 6;
//年を設定します
myCustomDay.Year = 2009;
// WebMonthCalendar の CustomDays コレクションにユーザーが作成したカスタム日を追加します
WebMonthCalendar1.CustomDays.Add(myCustomDay);