Article
Beginning ASP.NET Using VB.NET - Chapter 14: ASP.NET Server Controls
The Web Form -- MyCalendar.aspx
The following is the complete listing of the MyCalendar.aspx web form implementation. You'll declare the various ASP.NET server controls used in this web form, as well as the corresponding code and event handlers, in a series of incremental steps. The example is quite a long one, therefore we'll discuss much of what is going on as we go through it. At the end, further analysis and discussion will be provided in the subsequent "How It Works" section.
1. Download MyCalendar.xml from www.wrox.com, and save it in the Chapter 14 folder of your BegASPNET virtual directory.
2. Create a new file, called MyCalendar.aspx, save it in the same folder as MyCalendar.xml, and add the following lines, which will serve as a starting point for creating the page's ASP.NET server control objects, as well as the corresponding code and event handlers:
<%@ Page Language="VB" %>
<%@ Import Namespace="System.Data"%>
<%@ Import Namespace="System.IO" %>
<html>
<head>
<script language="VB" runat="server">
</script>
</head>
<body>
</body>
</html>
3. Add the following code between the <body> tags:
<body>
<h1>My Calendar</h1>
<form id="MyCalendarForm" method="post" runat="server">
<p align="center">
<asp:Calendar id="MyCalendar" runat="server"
SelectedDate="2001/07/17"
VisibleDate="2001/07/01"
FirstDayOfWeek="Monday"
DayNameFormat="Full"
ShowDayHeader="True"
ShowGridLines="True"
ShowNextPrevMonth="True"
ShowTitle="True"
nextprevstyle-backcolor="DodgerBlue"
nextprevstyle-forecolor="White"
nextprevstyle-font-bold="True"
nextprevstyle-font-size="Large"
TitleFormat="MonthYear"
TitleStyle-BackColor="DodgerBlue"
TitleStyle-ForeColor="White"
TitleStyle-Font-Size="Large"
TitleStyle-Font-Bold="True"
dayheaderstyle-backcolor="DodgerBlue"
dayheaderstyle-forecolor="White"
daystyle-horizontalalign="Left"
daystyle-verticalalign="Top"
daystyle-font-size="Small"
SelectedDayStyle-Font-Bold="True"
selecteddaystyle-horizontalalign="Left"
selecteddaystyle-verticalalign="Top"
selecteddaystyle-font-size="Small"
selecteddaystyle-forecolor="Red"
TodayDayStyle-HorizontalAlign="Left"
TodayDayStyle-VerticalAlign="Top"
todaydaystyle-backcolor="White"
</asp:Calendar>
</p>
</form>
</body>
In this step, we're adding the main visual component of the page -- the ASP.NET Calendar control. The Calendar control will be responding to events, it's declared within the context of a <form> tag. The numerous properties defined here will serve, not only to give the Calendar control a unique look, but will also affect its behavior. The FirstDayOfWeek property is set to "Monday", for example. If you have a look through the other properties we're defining here, you'll find they're pretty self-explanatory.
A couple things to note so far: the SelectedDate and VisibleDate properties are hard coded for demonstration purposes only -- this is discussed in more detail in the How It Works section to follow.
To conclude the definition of this Calendar control, assign event handlers for the OnDayRender and OnSelectionChanged events just before the closing </asp:Calendar> tag. These will be explained in detail later in this section:
<body>
...
OnDayRender="MyCalendar_DayRender"
OnSelectionChanged="MyCalendar_SelectionChanged">
</asp:Calendar>
</p>
</form>
</body>