Date: July 28, 2004
Download the code.
Calendar Control Day Rendering...
In the Calendar control each day is represented as a hyperlink. This is very useful, because events can be raised upon changing the selected date.
Date: July 28, 2004
Download the code.
The calendar control for the web is a very useful addition to the controls available in the .NET framework. Instead of being an ActiveX control, this version of the calendar is a table with a collection of rows and cells that make up the calendar weeks/days. In addition, each day is represented as a hyperlink; this is very useful, because events can be raised upon changing the selected date. Weekdays, weekend days, days in the adjacent month, today’s date, and selected days are all days on the calendar that can have separate styles (ForeColor, BackColor, etc). An example of the calendar control is shown below:
|
<asp:Calendar id="calReservations" runat="server" BorderWidth="1px" BackColor="White" Width="220px ForeColor="#003399" Height="200px" Font-Size="8pt" Font-Names="Verdana" BorderColor="#3366CC" CellPadding="1"> <TodayDayStyle ForeColor="White" BackColor="#99CCCC"></TodayDayStyle> <SelectorStyle ForeColor="#336666" BackColor="#99CCCC"></SelectorStyle> <NextPrevStyle Font-Size="8pt" ForeColor="#CCCCFF"></NextPrevStyle> <DayHeaderStyle Height="1px" ForeColor="#336666" BackColor="#99CCCC"></DayHeaderStyle> <SelectedDayStyle Font-Bold="True" ForeColor="#CCFF99" BackColor="#009999"></SelectedDayStyle> <TitleStyle Font-Size="10pt" Font-Bold="True" Height="25px" BorderWidth="1px" ForeColor="#CCCCFF" BorderStyle="Solid" BorderColor="#3366CC" BackColor="#003399"></TitleStyle> <WeekendDayStyle BackColor="#CCCCFF"></WeekendDayStyle> <OtherMonthDayStyle ForeColor="#999999"></OtherMonthDayStyle> </asp:Calendar> |
This article will focus specifically on the DayRender event, which is one of the events of the Calendar control. This event executes once for each day presently shown on the calendar, including days outside the current month. Both the information about the specific day and the HTML table cell are accessible in this event via the DayRenderEventArgs parameter. Some of the information it contains is:
- The current day being rendered
- The type of day selected (weekend, current day, outside month)
- Table cell information (style, contents)
Using this event, the Calendar control has some flexibility. If not showing days outside the current month is desirable, the day can be hidden using the IsOtherMonth property. The example shown below does this by setting the ForeColor property to the same value as the BackColor. In addition, the day link is marked as not selectable, so the user can’t select it. This effectively removes the link.
|
If (e.Day.IsOtherMonth) Then 'Make sure that the forecolor is the same as the backcolor, so you can't see it e.Cell.ForeColor = e.Cell.BackColor 'Make sure the day cannot be selected e.Day.IsSelectable = False End If |
If the date on the calendar is the one currently selected, the property IsSelected verifies that. In addition, the IsWeekend and IsToday properties determine that the current day being rendered is a weekend day or the current day. These properties are accessible through the DayRenderEventArg object’s Day property, which is of type CalendarDay.
|
If (e.Day.IsSelected) Then If (e.Day.IsWeekend) Then 'Do something End If If (e.Day.IsToday) Then 'Do something End If End If |
If placing text or controls in a cell for a particular day is desirable, this can be done by adding them through the Cell property of the DayRenderEventArgs object. Remember that the calendar control is a table with one cell for each day, and the TableCell object supports adding text and controls to it.
|
'Using Text e.Cell.Text = "Christmas Day" 'Using a control Dim objLiteral As New LiteralControl("Christmas Day") e.Cell.Controls.Add(objLiteral) |
Date processing is also capable. In the next example, the DayRender event will disallow any dates less than the current date. Using an example of a registration system, it is undesirable to allow the user to make a reservation in the past, so the link is disabled. To do this, a simple comparison must be added to the event handler:
|
If (e.Day.Date < DateTime.Now) Then e.Day.IsSelectable = False End If |
These are some of the capabilities of the DayRender event. The attached project illustrates this through an example that shows the attributes of the day rendering. It's a very simple project, but illustrates the workings of the calendar control, the DayRender event, and the VisibleMonthChanged event.
You may download the code here.