May 13, 2021 ASP.NET
Calendar controls are a feature-rich network control that provides the following features:
The basic syntax of the calendar control is:
<asp:Calender ID = "Calendar1" runat = "server">
</asp:Calender>
Calendar controls have many properties and events that you can customize and control display. The following table provides some important properties for calendar controls:
Property | Describe |
---|---|
Caption | Gets or sets the title of the calendar control. |
CaptionAlign | Get or set the arrangement of the titles. |
CellPadding | Gets or sets the space between the data and the cell boundary. |
CellSpacing | Gets or sets the space between cells. |
DayHeaderStyle | Get style properties to display the day of the week. |
DayNameFormat | Gets or sets the date of the week. |
DayStyle | Gets the style property to display the date in the month. |
FirstDayOfWeek | Gets or sets the date of the week and displays it on the first line. |
NextMonthText | Gets or sets the navigation text for the next month, and the default is . |
NextPrevFormat | Gets or sets navigation controls for the next month or month. |
OtherMonthDayStyle | Gets a style property that does not display a date in the month. |
PrevMonthText | Gets or sets the navigation text for the last month, and the default is slt;. |
SelectedDate | Gets or sets the selected date. |
SelectedDates | Gets a collection of DateTime objects represents the selected date. |
SelectedDayStyle | Gets the style properties for the selected date. |
SelectionMode | Get or set a selection mode to specify whether a user can choose a day, a week, or a month. |
SelectMonthText | Gets or sets the text of the selection month element in the selector column. |
SelectorStyle | Gets the style properties of the selector column for the week or month. |
SelectWeekText | Gets or sets the text display for the week selection element in the selector column. |
ShowDayHeader | Gets or sets a value that indicates whether the title of the day of the week is displayed. |
ShowGridLines | Gets or sets a value to show whether the grid line will be displayed. |
ShowNextPrevMonth | Gets or sets a value that indicates whether navigation elements for the next month and previous month are displayed in the title section. |
ShowTitle | Gets or sets a value that indicates whether the title section is displayed. |
TitleFormat | Get or format the title. |
Titlestyle | Gets the style property of the title of the date control. |
TodayDayStyle | Gets the style properties for today's date. |
TodaysDate | Gets or sets the value of today's date. |
UseAccessibleHeader | Gets or sets a value that shows whether to render the table header and the HTML element to the date header instead of the table data. |
VisibleDate | Gets or sets the date of the specified month and displays it. |
WeekendDayStyle | Gets or sets style properties for weekend dates. |
Date controls have three of the most important events to allow developers to write date controls. They are:
Event | Describe |
---|---|
SelectionChanged | When a day, week, or month is selected, it is triggered. |
DayRender | When each unit of data of the calendar control is rendered, it is triggered. |
VisibleMonthChanged | When a user changes the month, it is triggered. |
Use an initial calendar control without any code to give your site a valid calendar to display months and dates of the year. It also contains navigation for next month and last month.
Calendar controls allow users to select a day, a week, or an entire month. T his is done by using the SelectionMode property. This property has the following values:
Property | Describe |
---|---|
Day | Select a day. |
DayWeek | Select a day or a whole week. |
DayWeekMonth | Choose a day a week or a full month. |
None | Nothing can be chosen. |
Select the syntax of the date:
<asp:Calender ID = "Calendar1" runat = "server" SelectionMode="DayWeekMonth">
</asp:Calender>
When the selection mode is selected as DayWeekMonth, an additional column identified by the symbol , and the symbol appears on the left side of the name to select the month.
The following example shows selecting a date and displaying it in a label:
The content file code is as follows:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="calendardemo._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>
Untitled Page
</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h3> Your Birthday:</h3>
<asp:Calendar ID="Calendar1" runat="server SelectionMode="DayWeekMonth" onselectionchanged="Calendar1_SelectionChanged">
</asp:Calendar>
</div>
<p>Todays date is:
<asp:Label ID="lblday" runat="server"></asp:Label>
</p>
<p>Your Birday is:
<asp:Label ID="lblbday" runat="server"></asp:Label>
</p>
</form>
</body>
</html>
Event Handler's Event SelectionChanged:
protected void Calendar1_SelectionChanged(object sender, EventArgs e)
{
lblday.Text = Calendar1.TodaysDate.ToShortDateString();
lblbday.Text = Calendar1.SelectedDate.ToShortDateString();
}
When you run the file, it produces the following output: