Calendar Web サーバー コントロール
ユーザーが日付を選択したり、次の月または前の月に移動したりできる 1 か月分の予定表を表示します。
<asp:Calendar id="Calendar1"
CellPadding="pixels"
CellSpacing="pixels"
DayNameFormat="FirstLetter|FirstTwoLetters|Full|Short"
FirstDayOfWeek="Default|Monday|Tuesday|Wednesday|
Thursday|Friday|Saturday|Sunday"
NextMonthText="HTML text"
NextPrevFormat="ShortMonth|FullMonth|CustomText"
PrevMonthText="HTML text"
SelectedDate="date"
SelectionMode="None|Day|DayWeek|DayWeekMonth"
SelectMonthText="HTML text"
SelectWeekText="HTML text"
ShowDayHeader="True|False"
ShowGridLines="True|False"
ShowNextPrevMonth="True|False"
ShowTitle="True|False"
TitleFormat="Month|MonthYear"
TodaysDate="date"
VisibleDate="date"
OnDayRender="OnDayRenderMethod"
OnSelectionChanged="OnSelectionChangedMethod"
OnVisibleMonthChanged="OnVisibleMonthChangedMethod"
runat="server">
<TodayDayStyle property="value"/>
<DayHeaderStyle property="value"/>
<DayStyle property="value"/>
<NextPrevStyle property="value"/>
<OtherMonthDayStyle property="value"/>
<SelectedDayStyle property="value"/>
<SelectorStyle property="value"/>
<TitleStyle property="value"/>
<TodayDayStyle property="value"/>
<WeekendDayStyle property="value"/>
</asp:Calendar>
解説
Calendar コントロールを使用して、ユーザーが日付を選択したり、次の月および前の月に移動したりできる 1 か月分の予定表を表示できます。
SelectionMode プロパティを設定することによって、ユーザーが単一の日、週、または月を選択できるかどうかや、日付を選択できないようにするかを指定できます。
コントロールのさまざまな部分のスタイル プロパティを設定することによって、Calendar コントロールの外観をカスタマイズできます。Calendar コントロールのさまざまなスタイル プロパティを次の表に一覧表示します。
| スタイル オブジェクト | 説明 | スタイル クラス |
|---|---|---|
| DayHeaderStyle | 予定表の曜日名が表示される部分のスタイル。 | TableItemStyle |
| DayStyle | 表示中の月に含まれる個別の日付のスタイル。
メモ 週末、現在の日付、選択されている日付には、それぞれ WeekendDayStyle、TodayDayStyle、SelectedDayStyle の各プロパティを設定することによって、異なるスタイルを適用できます。 |
TableItemStyle |
| NextPrevStyle | 前後の月に移動するための LinkButton コントロールが配置される、タイトル バーの左端と右端の部分のスタイル。 | TableItemStyle |
| OtherMonthDayStyle | 現在の月のビューに表示される前の月と次の月の日付のスタイル。 | TableItemStyle |
| SelectedDayStyle | 選択されている日付のスタイル。
メモ このプロパティが設定されていない場合は、選択されている日付は、DayStyle プロパティで指定されたスタイルで表示されます。 |
TableItemStyle |
| SelectorStyle | 週または月全体を選択するためのリンクが含まれている、Calendar コントロールの左側の列のスタイル。 | TableItemStyle |
| TitleStyle | 月の名前と、前後の月を移動するためのリンクが含まれている、予定表の上部のタイトル バーのスタイル。
メモ NextPrevStyle が設定されている場合は、その値によって、タイトル バーの両端に配置される前後の月への移動コントロールのスタイルがオーバーライドされます。 |
TableItemStyle |
| TodayDayStyle | 現在の日付のスタイル。
メモ このプロパティが設定されていない場合は、現在の日付は、DayStyle プロパティで指定されたスタイルで表示されます。 |
TableItemStyle |
| WeekendDayStyle | 週末のスタイル。
メモ このプロパティが設定されていない場合は、DayStyle プロパティで指定されたスタイルで週末が表示されます。 |
TableItemStyle |
コントロールのさまざまな部分を表示または非表示にすることによっても、Calendar コントロールの外観を制御できます。Calendar コントロールの表示したり非表示にしたりできる部分について次の表に示します。
| プロパティ | 説明 |
|---|---|
| ShowDayHeader | 曜日を表示する部分を表示または非表示にします。 |
| ShowGridLines | 月に含まれる日の間を区切るグリッド線を表示または非表示にします。 |
| ShowNextPrevMonth | 前後の月に移動するためのコントロールを表示または非表示にします。 |
| ShowTitle | タイトル部分を表示または非表示にします。 |
Calendar コントロールではデータ ソースへの連結はサポートされていませんが、日付セルの内容と書式を個別に変更できます。Calendar コントロールが Web ページに表示される前に、このコントロールを構成するコンポーネントが作成され、組み立てられます。Calendar コントロールの各日付セルが作成されるたびに、DayRender イベントが発生します。この DayRender イベントのイベント ハンドラのコードを記述して、日付セルが作成されるときに、その内容と書式を制御できます。
メモ Calendar コントロールは、JavaScript をクライアント ブラウザに描画します。このコントロールが正常に動作するには、クライアント ブラウザで JavaScript が有効になっている必要があります。クライアント スクリプトの詳細については、「Web フォーム ページのクライアント スクリプト」を参照してください。
各スタイル クラスでサポートされているプロパティについては、「スタイル プロパティ」を参照してください。
Calendar コントロールのプロパティとイベントの詳細については、Calendar クラスのドキュメントを参照してください。
例
.aspx ファイルで Calendar コントロールを宣言する方法を次の例に示します。この宣言には、多数のスタイル オブジェクト プロパティが含まれており、SelectionChanged イベントのハンドラとして Date_Selected メソッドが構築されます。
<asp:Calendar id="Calendar2"
OnSelectionChanged="Date_Selected"
SelectionMode="DayWeekMonth"
Font-Name="Verdana"
Font-Size="12px"
NextPrevFormat="ShortMonth"
SelectWeekText="week"
SelectMonthText="month"
runat="server">
<TodayDayStyle Font-Bold="True"/>
<DayHeaderStyle Font-Bold="True"/>
<OtherMonthDayStyle ForeColor="gray"/>
<TitleStyle BackColor="#3366ff"
ForeColor="white"
Font-Bold="True"/>
<SelectedDayStyle BackColor="#ffcc66"
Font-Bold="True"/>
<NextPrevStyle ForeColor="white"
Font-Size="10px"/>
<SelectorStyle BackColor="#99ccff"
ForeColor="navy"
Font-Size="9px"/>
</asp:Calendar>
Calendar コントロールの SelectionChanged イベントのイベント処理メソッドを次の例に示します。Calendar コントロールの SelectedDates パラメータを照会することによって、選択されている日数を判断できるため、ユーザーが日、週、月のどれを選択したかを判断できます。選択に関する情報は、Label Web サーバー コントロールに表示されます。
Sub Date_Selected(sender as Object sender, e As EventArgs)
Select (Calendar1.SelectedDates.Count)
Case 0: 'None
Label1.Text = "No dates are currently selected"
Case 1: 'Day
Label1.Text = "The selected date is " & _
Calendar1.SelectedDate.ToShortDateString
Case 7: 'Week
Label1.Text = "The selection is a week beginning " & _
Calendar1.SelectedDate.ToShortDateString
Case Else: 'Month
Label1.Text = "The selection is a month beginning " & _
Calendar1.SelectedDate.ToShortDateString
End Select
End Sub
[C#]
protected void Date_Selected(object sender, EventArgs e)
{
switch (Calendar1.SelectedDates.Count)
{
case (0): //None
{
Label1.Text = "No dates are currently selected";
break;
}
case (1): //Day
{
Label1.Text = "The selected date is " +
Calendar1.SelectedDate.ToShortDateString();
break;
}
case (7): //Week
{
Label1.Text = "The selection is a week beginning " +
Calendar1.SelectedDate.ToShortDateString();
break;
}
default: //Month
Label1.Text = "The selection is a month beginning " +
Calendar1.SelectedDate.ToShortDateString();
break;
}
}