Calendar Control Properties Explained

[toc]

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

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

Parts of the ASP.Net Calendar Control

Below are the details of the Marked Numbers in the picture:

  1. This is the title of the control. This displays the year and month.
  2. The arrow buttons on both side allows the user to navigate back and forth of the months.
  3. This part of the control displays the three letter week days name.
  4. It displays the working days. This will not include weekend days.
  5. Displays Weekend days. This includes Saturdays and Sundays.
  6. 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.
  7. 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.
  8. 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

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

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

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:

For PreviousMonthText:

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:

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

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

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

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:

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:

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:

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

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:

Code Reference

1. CalendarControlEx.aspx

2. CalendarControlEx.aspx.cs

 



Categories: Asp

Tags: , , , ,

Do you like this Example? Please comment about it for others!!

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: