顯示單一月份日曆，讓使用者能夠選取日期，並移動至下個或上個月份。
<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 控制項是用來顯示單一月份日曆，讓使用者能夠選取日期，並移動至下個或上個月份。
您可以藉由設定 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 控制項不支援繫結至資料來源，不過您可以修改個別日期儲存格的內容和格式。在 Web 網頁上顯示 Calendar 控制項之前，會先建立並組合構成控制項的元件。建立 Calendar 控制項中的每個日期儲存格時，都會引發 DayRender 事件。當藉由將事件處理嘗試中的程式碼提供給給 DayRender 事件的而建立日期儲存格時，您可以控制它的內容和格式。
****注意 Calendar 控制項會在用戶端瀏覽器中呈現 JavaScript。用戶端瀏覽器必須啟用 JavaScript，這個控制項才能正確運作。如需用戶端指令碼的詳細資訊，請參閱 Web Form 網頁中的用戶端指令碼。
如需每種樣式類別所支援之屬性的詳細資訊，請參閱樣式物件屬性。
如需 Calendar 控制項之屬性和事件的詳細資訊，請參閱 Calendar 類別文件。
範例
下列範例所示為 .aspx 檔案中 Calendar 控制項的範例宣告。這個宣告包括了一些樣式物件屬性，並且建立了 Date_Selected 方法作為 SelectionChanged 事件的處理常式。
<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;
}
}