Discusses how to use and implement the ASP.NET Calendar control. This control allows you to display a full month-to-month calendar from which you can select dates. We will give an example of how to use the control to select a date in a form using AJAX components so the page doesn't have to reload.
If you're looking for a really good web host, try Server Intellect - we found the setup procedure and control panel, very easy to adapt to and their IT team is awesome!
First you can start a new Web Application in Visual Studio 2008. To allow the Calendar control to select dates without reloading the page, we will need to place it inside of the <ContentTemplate> tags which are apart of the ASP.NET AJAX components. An example is showed below.
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
</ContentTemplate> </asp:UpdatePanel>
</form> |
Now that we have our AJAX components, we can add our calendar control. By adding the <asp:Calendar> tags to your application, you will be able to display a monthly calendar. This calendar will allow the visitor to navigate different months to select the right date for the form. Without using the AJAX components choosing different dates and navigating different months would cause the full page to reload.
There are several attributes and child tags that can be placed inside of the <asp:Calendar> tags. The default color scheme is a gray header with black text. Most of the attributes allow you to change the style of the calendar components. We will show an example below.
<ContentTemplate>
Date: <asp:TextBox ID="TextBox1" runat="server" />
<asp:Calendar ID="Calendar1" runat="server">
<TodayDayStyle ForeColor="White" BackColor="Black"></TodayDayStyle>
</asp:Calendar>
</ContentTemplate> |
Remember that this must be placed inside of the <ContentTemplate> tags for the calendar control to work without reloading the entire page.
We used over 10 web hosting companies before we found Server Intellect. Their dedicated servers and add-ons were setup swiftly, in less than 24 hours. We were able to confirm our order over the phone. They respond to our inquiries within an hour. Server Intellect's customer support and assistance are the best we've ever experienced.
We have added a simple TextBox for our selected date to go. The calendar control is displayed below that TextBox. The most commonly used child tag is the <TodayDayStyle> tag. This will allow us to change the text color and background color today's date so the visitor has a frame of reference. Other child tags include allowing you to change the styles of the selected date, each day, etc.
Now we need to program the code behind the aspx page to fill the TextBox with the selected day. You can either double click the calendar control in design view or add the sub below.
|
Protected Sub Calendar1_SelectionChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles Calendar1.SelectionChanged
TextBox1.Text = Calendar1.SelectedDate.ToString()
End Sub |
This event will be triggered when the visitor selects a new date. The event will set the text of the TextBox to a full string of the selected date. Now the visitor will be able to select the correct date from an easy-to-navigate calendar in a format that can easily be converted back into a DateTime datatype to insert into your database.
Other suggestions for this tutorial include placing the calendar in a PlaceHolder that will be invisible at the Page_Load and visible after the visitor clicks a button next to the date field. That way the calendar is only available when it is needed. Once the date has been chosen, in the Calendar1_SelectionChanged sub you can add a method to make the PlaceHolder invisible again.
If you're ever in the market for some great Windows web hosting, try Server Intellect. We have been very pleased with their services and most importantly, technical support.
Looking for the VB.NET 2008 Version? Click Here!
Looking for more .NET Tutorials? Click Here!