Share via


Calendar Web Server Control

Displays a one-month calendar that allows the user to select dates and move to the next or previous month.

<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>

Remarks

The Calendar control is used to display a one-month calendar that allows the user to select dates and move to the next and previous months.

By setting the SelectionMode property, you can specify whether the user can select a single day, a week, or a month, or you can disable date selection entirely.

Setting the style properties for the different parts of the control customizes the appearance of the Calendar control. The following table lists the different style properties for the Calendar control.

Style object Description Style class
DayHeaderStyle The style for the section of the calendar where the names of the days of the week appear. TableItemStyle
DayStyle The style for the individual days in the displayed month.
Note   Weekends, the current date, and the selected day can have different styles by setting the WeekendDayStyle, TodayDayStyle, and SelectedDayStyle properties, respectively.
TableItemStyle
NextPrevStyle The style for the sections at the left and right ends of the title bar where the month navigation LinkButton controls are located. TableItemStyle
OtherMonthDayStyle The style for the days from the previous and next month that appear on the current month view. TableItemStyle
SelectedDayStyle The style for the selected date.
Note   If this property is not set, the style specified by the DayStyle property is used to display the selected date.
TableItemStyle
SelectorStyle The style for the column on the left of the Calendar control containing links for selecting a week or the entire month. TableItemStyle
TitleStyle The style for the title bar at the top of the calendar containing the month name and month navigation links.
Note   If NextPrevStyle is set, it overrides the style for the next and previous month navigation controls located at the ends of the title bar.
TableItemStyle
TodayDayStyle The style for the current date.
Note   If this property is not set, the style specified by the DayStyle property is used to display the current date.
TableItemStyle
WeekendDayStyle The style for the weekend days.
Note   If this property is not set, the style specified by the DayStyle property is used to display the weekend dates.
TableItemStyle

You can also control the appearance of the Calendar control by displaying or hiding different parts of the control. The following table lists the parts of the Calendar control that can be displayed or hidden.

Property Description
ShowDayHeader Displays or hides the section that displays the days of the week.
ShowGridLines Displays or hides the grid lines between the days of the month.
ShowNextPrevMonth Displays or hides the navigation controls to the next or previous month.
ShowTitle Displays or hides the title section.

Although binding to a data source is not supported in the Calendar control, you can modify the content and formatting of the individual date cells. Before the Calendar control is displayed on the Web page, it creates and assembles the components that make up the control. The DayRender event is raised when each date cell in Calendar control is created. You can control the contents and formatting of a date cell as it is created by providing code in the event handler for the DayRender event.

Note   The Calendar control renders JavaScript on the client browser. The client browser must have JavaScript enabled for this control to function properly. For more information on client script, see Client Script in Web Forms Pages

For information about the properties supported for each style class, see Style Object Properties.

For detailed information on the Calendar control's properties and events, see the Calendar Class documentation.

Example

The following example shows a sample declaration for a Calendar control in an .aspx file. The declaration includes a number of style object properties and establishes the Date_Selected method as the handler for the SelectionChanged event.

<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>

The following example shows an event-handling method for a Calendar control's SelectionChanged event. By querying the SelectedDates parameter of the Calendar control, you can determine how many days are selected, and therefore whether the user selects a day, week, or month. Information about the selection is displayed in a Label Web server control.

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;
   }
}

See Also

Web Server Controls | Calendar Class