ASP.NET calendar
May 13, 2021 ASP.NET
Table of contents
Calendar
Calendar controls are a feature-rich network control that provides the following features:
- Show one month at a time
- Choose a day, a week or a month
- Select a day within a certain range
- Moves between months and months
- The display of the number of days of formatted control
The basic syntax of the calendar control is:
<asp:Calender ID = "Calendar1" runat = "server">
</asp:Calender>The properties and events of the calendar control
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 the calendar controls
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.
Example
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:
