1. Introduction to Calendar Control
Calendar Control of Asp.net allows the user to pick a date by navigating through calendar dates. The control shows Month, Year and Days to the user so they can make use of it to pick the required date. For Example, a Travel Organization Admin can specify the special events in a month by picking a date. For him knowing week days and holidays are important and the control can help it. If the user wants to enter a date of birth, then text box with masks is a right choice as picking a day is not an option there. However, for the developer, the big disadvantage of it comes in validation. But, he or she need not worry about date format and date validity when it comes out of the Calendar Control.
When we place a control in Asp.Net web form, the control does not look good. In this article, we will create an example which will change the look of a default calendar into a more appealing one. After this, we will handle events so that the calendar can report the selected dates. We will also mark the special event dates.
2. Parts of The Calendar Control
When we place a Calendar Control in the web form, it looks simple. The below picture shows the default look of the Control:

Default look of ASP.Net Calendar Control
Before we change this control’s look, we will first understand the parts of it. The below picture shows different parts of the Control:

Parts of the ASP.Net Calendar Control
Below are the details of the Marked Numbers in the picture:
- This is the title of the control. This displays the year and month.
- The arrow buttons on both side allows the user to navigate back and forth of the months.
- This part of the control displays the three letter week days name.
- It displays the working days. This will not include weekend days.
- Displays Weekend days. This includes Saturdays and Sundays.
- This shows the days which does not belongs to current month displayed in the title. These dates are from previous month or from next month.
- The default control displays arrow marks. The single arrow is used to select all days from the week. The double arrow (Partly hidden by marking 2) is used to select all the days from a month.
- Shows Today’s date. This screenshot was taken on 03-Jul-2019.
In ASP.Net Visual Studio IDE, one can customize all parts of the Calendar Control using the properties linked to it. In the coming sections, we will change the look of this control.
3. ShowTitle, ShowDayHeader and ShowGridLine Properties
The
ShowTitle
Property decides whether the Calendar should display the title or it should not. In the past section we marked this as #1. The
ShowDayHeader
Property is for showing or hiding the weekdays name from the Control. Below picture shows which part of the calendar is controlled by these Properties:

ShowTitle ShowDayHeader Properties
In the default control, each numbered tile represents a day in current month or previous month or next month. The
ShowGridLine
Property can turn ON or OFF the grid line separating the tiles. Below picture shows the Calendar Control with this property turned ON.
4. Start ASP.Net Website Project
Now, we will start a website and customize the Calendar Control. We name the website as ‘CalendarEx’ and choose code behind language as Visual C#. The below picture shows the sequence of the steps to create the project:

Start a website in visual studio for Asp.Net
After creating the ASP.Net website project, set the value as true for all three properties of Calendar Control discussed in the previous section.
5. SelectionMode Property
The
SelectionMode
property of ASP.Net Calendar Control allows how a user can select dates from it. There are three modes which we can set to this property. Note, only one mode can be set at a time.
5.1 Day Mode of Calendar Control
The
Day
property value of SelectionMode allows the user to select only one date from the control. When they select another date, previous selected day goes not selected. In simple words, there will be only one selected date.
5.2 DayWeek Mode of Calendar Control
DayWeek
property value of SelectionMode allows the user to select a day or an entire week. The single arrow button in the left margin selects all the days in a week.
5.3 DayWeekMonth Mode of Calendar Control
When we set
DayWeekMonth
property value for the SelectionMode property, the user can either select single day or an entire week or even the entire month. The double arrow in the top left corner allows a user select all the days in a month. The below picture shows how one can select a week and a month:

Selecting a Week and Month from Calendar Control using SelectionMode Property
6. Customizing Calendar Control Navigation Arrows
The Navigation arrows for previous month and next months can be changed to an Image icon. The properties ‘
NextMonthText
’ and ‘
PreviousMonthText
’ can change these month navigation links of Calendar. One can set a Text or Image here. If we want to set an image, we can use ‘Img Src’ html tag. In our example we set these property values as in the below code:
For NextMonthText:
1 |
<img src='icons/NextMonth.ico' border=0> |
For PreviousMonthText:
1 |
<img src='icons/PrevMonth.ico' border=0> |
Note, the example expects that we already put an 32 bit pixel image icon in the ICON folder of the project. If you do not have the icon folder, right click project in Solution Explorer and create one. Then, put a 32 bit icon called ‘NextMonth.ico’ and ‘PrevMonth.ico’ in the folder.
7. Customizing Selectors
We can also set an image for the selectors. Note, section 5 of this article talks about selectors and Selection Mode Property. Like the month navigation, we can set an Image html tag and change the look of these selectors. The below code shows property values for ‘
SelectWeekText
’ and ‘
SelectMonthText
’ Properties:
1 2 |
<img src='icons/WeekSel.ico' border=0> <img src='icons/MonthSel.ico' border=0> |
8. Various Styled of Calendar Control
The second image in section two shows different parts of the Calendar and we can adjust the style for each part. The below Table shows the associated properties:
Property | Description |
TitleStyle | Sets style for the Calendar’s Title. Note, this part displays Month and Year |
DayHeaderStyle | Sets style for the day heading part of the control. This part displays the weekdays name. |
DayStyle | Sets style for each numbered style for current month. The style skips the weekend days. |
NextPrevStyle | Sets style for Previous and Next month navigation part of the Control. |
OtherMonthDayStyle | Sets style for the numbered tiles which comes from previous month and next month. |
SelectedDayStyle | Sets style for all the days selected in the control. Note, the selection depends on SelectionMode Property. |
SelectorStyle | Sets style for the Week and Month Selector part of the Control. |
WeekendDayStyle | Sets style for numbered tile which comes from weekend days. |
TodayDayStyle | Sets style for the Today’s Date. |
The below picture shows the how these properties are set so that Calendar’s look changed to a Green Theme. Click the Image to zoom it.

Calendar Style Settings
After setting all the above properties including the styles shown in the above picture, the customized calendar control looks like the below:

Asp.net Calendar Control After Style Customization
9. Change Appearance Dynamically
Now, we will move to coding part of the control. First, we need an interaction panel below the Calendar Control. The controls and its description are below:

Controls in ASP.Net Calendar Interaction Panel Board
Before we move to the coding part, set the ‘
AutoPostBack
’ Property for Calendar and all three check boxes. This will post the message to the Web Server to perform the relevant action. In the Page Load event, we set defaults for our control. Below is the code:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
protected void Page_Load(object sender, EventArgs e) { if (Page.IsPostBack == false) { //Snippet 01: Initialize the control chkShowTitle.Checked = true; chkShowHeader.Checked = true; chkShowGrids.Checked = true; WebCalendar.ShowTitle = true; WebCalendar.ShowDayHeader = true; WebCalendar.ShowGridLines = true; } } |
Next, we handle ‘
CheckedChanged
’ event for the check boxes. In the handler function, we set Boolean properties ‘
ShowDayHeader
’, ‘
ShowTitle
’ and ‘
ShowGridLines
’ with the check state of the check boxes. Below is the code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
//Snippet 02: Now set the properties based on Check Status protected void chkShowHeader_CheckedChanged(object sender, EventArgs e) { WebCalendar.ShowDayHeader = chkShowHeader.Checked; } protected void chkShowTitle_CheckedChanged(object sender, EventArgs e) { WebCalendar.ShowTitle = chkShowTitle.Checked; } protected void chkShowGrids_CheckedChanged(object sender, EventArgs e) { WebCalendar.ShowGridLines = chkShowGrids.Checked; } |
10. Retrieve Multiple Selected Dates of Calendar Control
Asp.Net Calendar Control fires
SelectionChanged
Event when a user picks one or more date from it. Remember, the
SelectionMode
property tells how the user can pick one date or more dates from the Control. Inside the event handler,
SelectedDates
Property gives user-selected date collection to us. We iterate through the list to format a string for user-selected date(s). Finally, we display the string in the Label Control. Below is the code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
//Snippet 03: Show the Selected Date in the Display Label protected void WebCalendar_SelectionChanged(object sender, EventArgs e) { int count = 0; string Selected_date_list = ""; foreach (DateTime date in WebCalendar.SelectedDates) { count++; Selected_date_list = Selected_date_list + "Selected Date #" + count.ToString() + ": " + date.ToShortDateString() + "<br/>"; } lblDisplay.Text = Selected_date_list; } |
One can note the usage of
<br/>
tag while forming the selected date as string. We use this HTML tag to show each selected date in a separate line on the Label Control.
The below picture shows how the selected dates are displayed in the Label Control. Here, the user chose fourth week of July using Week Selector arrow. Also, note how the ‘
SelectedDayStyle
’ Property applied the style for the Selected dates. The earlier screen-shot in section 8 did not show it.

SelectionChanged Event vs. SelectedDates Property
11. Marking Special Day using DayRender Event
Asp.Net Calendar Control provides
DayRender
Event so that application developer can change the style of any choice of day tile. The Control fires this event while rendering each Tiled-Day in the control. We will use this event to change the style of some special dates. For example, we can imagine that we are marking the vacation in a month with a special style at run-time. Note, so for we applied the styles only at design time.
The ‘DayRender’ Event handler gives us
DayRenderEventArgs
. We can use it to customize the style for the day. Note, as already told, the control fires this event for each day in the month covering weekends. From the ‘DayRenderEventArgs’ object, we can get ‘
CalendarDay
’ and ‘
TableCell
’ objects. The
Day
Property gives CalendarDay object and Cell Property gives the TableCell object.
We can use the ‘
CalerdarDay
’ object to decide for which Day-Tile the rendering is going on. It can be done using the date object in it. In the below code, we are marking 3, 15 and 31 as holidays. We use the ‘
TableCell
’ object to change the style of these Special Days at run-time by using the Cell Style properties for Font and Colors. The below picture shows how this event procedure renders the special days:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
//Snippet 05: Mark Special Days [For Example Holidays] protected void WebCalendar_DayRender(object sender, DayRenderEventArgs e) { //Display the date differently when it is a holiday. //For Example We will do it for July Only if (e.Day.Date.Month == 7) { if (e.Day.Date.Day == 3 || e.Day.Date.Day == 15 || e.Day.Date.Day == 31) { e.Cell.ForeColor = Color.Blue; e.Cell.BackColor = Color.LightGreen; e.Cell.BorderStyle = BorderStyle.Double; e.Cell.BorderWidth = 2; e.Cell.Font.Bold = true; e.Cell.Font.Size = 12; } } } |
Code Reference
1. CalendarControlEx.aspx
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 |
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CalendarControlEx.aspx.cs" Inherits="_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> <asp:Label ID="Label1" runat="server" Font-Names="Anonymous" Font-Size="Medium" Style="font-size: 14pt; vertical-align: middle; text-align: center" Text="Calendar Control Example" Width="596px"> </asp:Label> <br /> <br /> <asp:Calendar ID="WebCalendar" runat="server" Height="165px" SelectionMode="DayWeekMonth" Width="591px" ShowGridLines="True" NextMonthText="<img src='icons/NextMonth.ico' border=0>" PrevMonthText="<img src='icons/PrevMonth.ico' border=0>" SelectMonthText="<img src='icons/MonthSel.ico' border=0>" SelectWeekText="<img src='icons/WeekSel.ico' border=0>" OnDayRender="WebCalendar_DayRender" OnSelectionChanged="WebCalendar_SelectionChanged"> <SelectedDayStyle BackColor="#C0C0FF" BorderColor="#0000C0" BorderStyle="Double" BorderWidth="3px" Font-Names="Verdana" ForeColor="#0000C0" /> <WeekendDayStyle BackColor="#FFE0C0" BorderColor="#C00000" ForeColor="#C04000" Font-Names="Verdana" /> <OtherMonthDayStyle Font-Names="Verdana" ForeColor="Silver" /> <DayStyle BackColor="#C0FFC0" BorderColor="Green" BorderWidth="1px" Font-Names="Verdana" Font-Size="Small" ForeColor="Black" BorderStyle="Inset" /> <NextPrevStyle BackColor="Green" BorderStyle="None" Font-Names="Verdana" ForeColor="Yellow" /> <DayHeaderStyle BackColor="Green" BorderColor="Black" BorderStyle="Ridge" BorderWidth="2px" ForeColor="#FFFF80" /> <TitleStyle BackColor="Green" BorderColor="Blue" BorderStyle="Groove" BorderWidth="2px" Font-Names="Verdana" Font-Size="Large" ForeColor="Yellow" /> <SelectorStyle BackColor="Green" BorderColor="Black" BorderStyle="Inset" BorderWidth="2px" Font-Bold="False" Font-Italic="False" Font-Names="Verdana" ForeColor="Yellow" /> <TodayDayStyle BackColor="#C0C0FF" BorderColor="#FFE0C0" BorderStyle="Inset" BorderWidth="3px" Font-Bold="True" Font-Italic="True" Font-Names="Verdana" Font-Size="Medium" ForeColor="Red" /> </asp:Calendar> <asp:Panel ID="Panel1" runat="server" BackColor="Black" Height="454px" Style="z-index: 100; left: 9px; position: absolute; top: 365px" Width="590px"> <asp:Label ID="Label2" runat="server" Font-Names="Verdana" ForeColor="#FFFFC0" Text="Calendar User Navigation" Width="590px" style="text-align: center"> </asp:Label> <asp:CheckBox ID="chkShowGrids" runat="server" ForeColor="White" Style="z-index: 100;left: 469px; position: absolute; top: 25px" Width="111px" AutoPostBack="True" Font-Names="Verdana" OnCheckedChanged="chkShowGrids_CheckedChanged" Text="Show Grid" /> <asp:CheckBox ID="chkShowTitle" runat="server" ForeColor="White" Style="z-index: 101; left: 9px; position: absolute; top: 24px" AutoPostBack="True" Font-Names="Verdana" OnCheckedChanged="chkShowTitle_CheckedChanged" Text="Show Title" /> <asp:CheckBox ID="chkShowHeader" runat="server" ForeColor="White" Style="z-index: 102; left: 240px; position: absolute; top: 24px" AutoPostBack="True" Font-Names="Verdana" OnCheckedChanged="chkShowHeader_CheckedChanged" Text="Show Header" /> <asp:Label ID="lblDisplay" runat="server" BackColor="Black" BorderColor="Red" BorderStyle="Groove" BorderWidth="2px" Height="389px" Style="z-index: 104; left: 9px; position: absolute; top: 51px" Width="567px" Font-Names="Verdana" Font-Size="X-Small" ForeColor="White"> </asp:Label> </asp:Panel> <br /> </div> </form> </body> </html> |
2. CalendarControlEx.aspx.cs
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 |
using System; using System.Data; using System.Configuration; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; //Snippet 04: To Access color object for RayRender using System.Drawing; public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if (Page.IsPostBack == false) { //Snippet 01: Initialize the control chkShowTitle.Checked = true; chkShowHeader.Checked = true; chkShowGrids.Checked = true; WebCalendar.ShowTitle = true; WebCalendar.ShowDayHeader = true; WebCalendar.ShowGridLines = true; } } //Snippet 02: Now set the properties //based on Check Status protected void chkShowHeader_CheckedChanged( object sender, EventArgs e) { WebCalendar.ShowDayHeader = chkShowHeader.Checked; } protected void chkShowTitle_CheckedChanged( object sender, EventArgs e) { WebCalendar.ShowTitle = chkShowTitle.Checked; } protected void chkShowGrids_CheckedChanged( object sender, EventArgs e) { WebCalendar.ShowGridLines = chkShowGrids.Checked; } //Snippet 03: Show the Selected Date in the //Display Label protected void WebCalendar_SelectionChanged( object sender, EventArgs e) { int count = 0; string Selected_date_list = ""; foreach (DateTime date in WebCalendar.SelectedDates) { count++; Selected_date_list = Selected_date_list + "Selected Date #" + count.ToString() + ": " + date.ToShortDateString() + "<br/>"; } lblDisplay.Text = Selected_date_list; } //Snippet 05: Mark Special Days [For Example Holidays] protected void WebCalendar_DayRender(object sender, DayRenderEventArgs e) { //Display the date differently when it is a holiday. //For Example We will do it for July Only if (e.Day.Date.Month == 7) { if (e.Day.Date.Day == 3 || e.Day.Date.Day == 15 || e.Day.Date.Day == 31) { e.Cell.ForeColor = Color.Blue; e.Cell.BackColor = Color.LightGreen; e.Cell.BorderStyle = BorderStyle.Double; e.Cell.BorderWidth = 2; e.Cell.Font.Bold = true; e.Cell.Font.Size = 12; } } //End of Month Check } } |
- Using SQLDataSource & GridView Control in Asp.Net Web Pages
- ASP.Net ImageMap Control and Defining Image Hotspots
Categories: Asp 2.0
Tags: DayRender, DayRenderEventArgs, SelectionMode, SelectMonthText, SelectWeekText