[ASP.Net] - Using Calendar Control and Importance of DayRender Event
1. Introduction
The Calendar control in ASP.net allows you to pick a date. Why we need a control like this for picking a date that involves navigation when I easily type the date in a specific format on a textbox? Well, so the Calendar control is usually used a calendar and the control is useful when the user wants to do some kind of date scheduling by knowing the Day of the date, weekdays and holidays etc., Now if I ask that a text box control provide all these information, you will answer No.
So, the control is useful on the above said situation and it is not much useful when you placed it to specify the date of birth for a person. It is upon the developer to decide when to use the control.
When you place a Calendar control on the ASP.net page, the Initial appearance does not look great. But it still does the basic job selecting a date. We will explore some properties which will make the control look pleasing and then we will move to the coding part of it.
Below is the Initial appearance of the control when you placed it in the ASP.net page without setting any properties:
2. Setting up the control
Below are the important properties that will be useful to customize the control the way we want.
The ShowHeader Property allows hide/show of the heading of the control. In the above control the heading is the weekdays displayed below the control Title.
The ShowTitle Property is useful to control showing or hiding the Title of the calendar. The title of the Control shows the Year and present month. And each numbered tile in the control represents the Day. If you need you can display grid lines separating each tiles from others using the ShowGridLines property.
The properties NextMonthText, PreviousMonthText is used to set the text or image for the next or previous month navigations. In the above control, the navigation text is set to <= and >=. These texts are actually a link that moves the month in the calendar control backward or forward. You can also specify a image using the Img Srchtml tag. In the sample I used the images, have a look at these property values in the downloaded sample.
The SelectionMode property allows how many days can be picked one at a time. The values and the selection behavior is given below:
Day: You can pick only one date.
Dayweek: You can pick a single day or an entire week. An arrow will be displayed for each week for making the selection. The Selection Link text can be changed to image using the property SelectWeekText
DayWeekMonth: You can pick a single day or Entire week or entire month. In addition to Arrows for Weeks, you will get one more arrow in the top corner to select the entire month. The selection link text can be changed or set to an image using the propertySelectMonthText
In the Sample,
I set the SelectionMode property to DayWeekMonth.
The properties NextMonthText, PreviousMonthText, SelectWeekText, SelectMonthText are used to change the arrow keys into images. Have a look at these property values in the sample. Below is the example for NextMonthText from the sample:
<img src='images/NMonth.ico' border=0>
You can set different Background color, foreground color, fonts etc to each part of the control by accessing the following properties:
1) DayHeaderStyle : Day header is the one that displays weekdays name
2) DayStyle: Set style for each normal days in the calendar
3) NextPrevStyle: Set style for the Next and previous month
4) OtherMonthStyle: When a month is displayed in the calendar, there is days that comes from the previous and/or next months. This property sets style for those
5) SelectedDayStyle: Sets the style for the currently selected Day
6) SelectorStyle: Sets the style for the Month and week selectors
7) TitleStyle: Sets the style for the title.
8) TodayDayStyle: Style for the Today’s day
9) WeekDayStyle: Sets style for the Week Days Style.
By setting the above properties, you can make a big difference to the Calendar control, Have a look at these property values in the attached sample application. You no need to look property values for all the 9 properties, just have a look at the one to get an idea.
Below is the customized Calendar control from the Sample:
3. About the Sample
The calendar control displayed above is formatted to have a better look. The arrows in the title allow you to navigate between the months. The diagonal arrow is to select all the dates in the present month. Horizontal arrow will select the entire week. You can also select a single day by clicking on it. Today’s day is highlighted in light green color. The special days (Can be anything, in this sample it is holiday) are shown in dark green. Days that is not part of the present month is shown in green color. Weekdays are shown in different color.
Below the calendar control is a Panel and Label to display the selected dates. The check boxes allows to show or hide the visual appearance of the calendar control say Grid Lines, Calendar header and Calendar title.
Look at the screen shot of the sample page shown below:
4. Controlling the Header, title & Grid Lines
At runtime, the property already discussed in section two, is set to control the visibility of the Calendar header, Calendar visibility and grid lines separator for the days. Note that once you turn of the grid lines, the BroderStyle property of the nine-calendar style (specified in the section two) becomes effective. Below is the code for setting the Boolean properties at runtime:
//Calendar 01: Show/Hide Header
protected void chkHeader_CheckedChanged(object sender, EventArgs e)
{
Calendar.ShowDayHeader = chkHeader.Checked;
}
//Calendar 02: Show/Hide GridLine in the Calendar Control
protected void chkGridLines_CheckedChanged(object sender, EventArgs e)
{
Calendar.ShowGridLines = chkGridLines.Checked;
}
//Calendar 03: Show/Hide Calendar Title
protected void chkTitle_CheckedChanged(object sender, EventArgs e)
{
Calendar.ShowTitle = chkTitle.Checked;
}
During the page load event, all the check boxes are set in the checked state. Also, the calendar’s header, title, gridlines are turned-on. Below is the code for it:
//Calendar 04: Set the Default Properties
protected void Page_Load(object sender, EventArgs e)
{
if (Page.IsPostBack == false)
{
Calendar.ShowDayHeader = true;
Calendar.ShowGridLines = true;
Calendar.ShowTitle = true;
chkGridLines.Checked = true;
chkHeader.Checked = true;
chkTitle.Checked = true;
}
}
5 Selection Changed Event
Remember that the Selection Mode property of the calendar control was set toDayWeekMonth. So the control allows you select multiple dates by Week selector (Horizontal Arrows) and the Month Selector (Diagonal Arrow). You can also select a single day. In all these cases selection changed event is fired. The handler for that event is the perfect place for listing the selected date. Below is the code for it:
//Calendar 05: Get the Selected Date(s) and display it in the Label
protected void Calendar_SelectionChanged(object sender, EventArgs e)
{
string date_str = "";
int count = 0;
foreach (DateTime dt in Calendar.SelectedDates)
{
count++;
date_str = date_str + "Selected Date #" + count.ToString() + ": " +
dt.ToShortDateString() + "<br/>";
}
lblDisplay.Text = date_str;
}
Note the usage of the <br/> as the ASP.Net label control does not interpret the Newline character properly.
6. Marking the Special Days and DayRender Event
Marking the special days is a kind of action that should be tied with the month navigation. That’s how we will see it initially. But there is a event for this task. The event is DayRender. The event is fired when each Day in the calendar control is drawn. So the handler can make use of the passed-in event argument to control the display of the Day part of the calendar control.
From the passed-in event argument you can get the CalendarDay and TableCellobjects. CalendarDay can be accessed by Day property and TableCell can be accessed by the Cell property of the event argument. From the CalendarDay object you can know the date it belongs and all parts of the date. With TableCell object you can control the visual attributes of the single day. Here we are setting the special day using the TableCell property, and to know whether the cell belongs to special day we need the CalendarDay.
Below is the code for the DayRender and I set special day for the month of April only. Change the logic to set it for the entire year and I just want to show an example only here.
//Calender 06: When displaying the Day part of the control, make sure to adjust
// the Day portion of the calendar control to dsplay special date.
// Let me do it for April 5,14,18 as holiday. For full year you should
// apply you own logic. Use a string manipulation or 2D array to do it
// efficiently.
protected void Calendar_DayRender(object sender, DayRenderEventArgs e)
{
//Display the date differently when it is a holiday
if (e.Day.Date.Month == 4)
{
if (e.Day.Date.Day == 5 || e.Day.Date.Day == 14 || e.Day.Date.Day == 18)
{
e.Cell.ForeColor = Color.Azure;
e.Cell.BackColor = Color.Green;
e.Cell.Font.Bold = true;
}
}
}
7. Closure
ASP.net calendar control does not support year wise navigation. To do so, you should derive your own class. So make sure before using it. If you provide the same above control to your user for selecting their date of birth, they will beat your manager.
8. How Do I open the Attached Project?
1) Download the attached zip file
2) Extract it to a folder
3) Open visual studio 2005
4) Click the menu item File|Open|Web site
5) Select the Extracted Folder
Note: The Attached solution is created in visual studio 2005. If you have latest version say yes to the conversion wizard
Source Code : Download
This is a duplicate article taken from My Blog (MstechArticles.com). I kept the site down for maintanence.
ReplyDeleteI will for I week before I file DMCA.