Select date range form calendar
Calendar is an asp.net web server control. calendar control displays the dates for one month at a time and total
six weeks appear at a time. users can select an individual date or multiple dates (date range) from calendar server control.
by default calendar control is enabled for date selection. each day of calendar contain a LinkButton control that raises an event when it clicked.
calendar SelectionMode property get or set the date selection mode on the calendar control. selection mode specifies whether the user can select a single day, a week or an entire month from a calendar server control. calendar SelectionMode property value type is System.Web.UI.WebControls.CalendarSelectionMode. we can set the SelectionMode property value from one of the value of CalendarSelectionMode enumeration. the default value of this property is 'Day' that means user can select a single date at a time from calendar control.
CalendarSelectionMode enumeration have the following possible values None, Day, DayWeek and DayWeekMonth. 'None' indicate no dates can be selected on the calendar control. 'Day' indicate a single date can be selected at a time on the calendar control. 'DayWeek' indicate a single date or entire week can be selected on the calendar. 'DayWeekMonth' value indicate a single date, a week and an entire month can be selected at a time on calendar control.
the following asp.net c# example code demonstrate us how can we allow users to select date range (multiple dates) in a calendar control.
by default calendar control is enabled for date selection. each day of calendar contain a LinkButton control that raises an event when it clicked.
calendar SelectionMode property get or set the date selection mode on the calendar control. selection mode specifies whether the user can select a single day, a week or an entire month from a calendar server control. calendar SelectionMode property value type is System.Web.UI.WebControls.CalendarSelectionMode. we can set the SelectionMode property value from one of the value of CalendarSelectionMode enumeration. the default value of this property is 'Day' that means user can select a single date at a time from calendar control.
CalendarSelectionMode enumeration have the following possible values None, Day, DayWeek and DayWeekMonth. 'None' indicate no dates can be selected on the calendar control. 'Day' indicate a single date can be selected at a time on the calendar control. 'DayWeek' indicate a single date or entire week can be selected on the calendar. 'DayWeekMonth' value indicate a single date, a week and an entire month can be selected at a time on calendar control.
the following asp.net c# example code demonstrate us how can we allow users to select date range (multiple dates) in a calendar control.
CalendarExample.aspx
<%@ Page Language="C#" %>
<!DOCTYPE html>
<script runat="server">
protected void Calendar1_SelectionChanged(object sender, System.EventArgs e) {
Label1.Text = "You selected date(s) : <br />";
for (int i=0; i<Calendar1.SelectedDates.Count; i++){
Label1.Text += Calendar1.SelectedDates[i].ToShortDateString() +
"<br />";
}
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Select date range from Calendar</title>
</head>
<body style="padding:25px">
<form id="form1" runat="server">
<div>
<div>
<h2 style="color:MidnightBlue; font-style:italic;">
Select date range from Calendar
</h2>
<hr width="450" align="left" color="Gainsboro" />
<asp:Label
ID="Label1"
runat="server"
ForeColor="BlueViolet"
Font-Italic="true"
Font-Names="Comic Sans MS"
Font-Size="Large"
/>
<br /><br />
<asp:Calendar
ID="Calendar1"
runat="server"
SelectionMode="DayWeekMonth"
OnSelectionChanged="Calendar1_SelectionChanged"
ForeColor="WhiteSmoke"
DayNameFormat="Full"
Font-Names="Book Antiqua"
Font-Size="Medium"
>
<DayHeaderStyle
BackColor="OliveDrab"
/>
<DayStyle
BackColor="DarkGreen"
BorderColor="ForestGreen"
BorderWidth="1"
Font-Bold="true"
Font-Italic="true"
Font-Size="Large"
/>
<NextPrevStyle
Font-Italic="true"
Font-Names="Arial CE"
/>
<SelectedDayStyle
BackColor="Crimson"
BorderColor="Tomato"
/>
<SelectorStyle
BackColor="Olive"
ForeColor="Snow"
Font-Names="Times New Roman Greek"
Font-Size="Small"
BorderColor="OliveDrab"
BorderWidth="1"
/>
<TitleStyle
BackColor="DarkGreen"
Height="36"
Font-Size="Large"
Font-Names="Courier New Baltic"
/>
</asp:Calendar>
</div>
</form>
</body>
</html>
