Calendar control in ASP.NET

By: Rajesh P.S.

The Calendar control in ASP.NET is a useful tool for presenting a calendar view on a web page. It enables users to select dates and navigate through different months. The control provides several features to customize its appearance and behavior, allowing developers to tailor it to their specific needs.

To utilize the Calendar control, you can include it in your ASP.NET markup (e.g., in an .aspx file) using the <asp:Calendar> tag.

<asp:Calendar ID="calendarExample" runat="server"></asp:Calendar>

In this example, the Calendar control with the ID "calendarExample" is added to the web page.

Calendar control properties

The Calendar control provides various properties that enable you to customize its appearance. For instance, you can modify the style of different elements within the control, such as the header, days, and selected date, by setting the appropriate properties.

<asp:Calendar ID="calendarExample" runat="server" HeaderStyle-BackColor="Red" DayStyle-ForeColor="Blue" SelectedDayStyle-Font-Bold="true"></asp:Calendar>

In this example, the HeaderStyle-BackColor property is set to "Red" to change the background color of the calendar's header, the DayStyle-ForeColor property is set to "Blue" to change the text color of the days, and the SelectedDayStyle-Font-Bold property is set to "true" to make the selected date's font bold.

Additionally, the Calendar control offers functionality for handling events such as date selection or month navigation. You can handle the SelectionChanged event to perform specific actions when a date is selected by the user.

<asp:Calendar ID="calendarExample" runat="server" OnSelectionChanged="calendarExample_SelectionChanged"></asp:Calendar>

In the server-side code, you can define the corresponding event handler method:

protected void calendarExample_SelectionChanged(object sender, EventArgs e) { // Perform actions based on the selected date // For example, retrieve the selected date using calendarExample.SelectedDate }

This event handler allows you to execute custom logic when the user selects a date in the Calendar control.

The following ASP.NET program display the selected Calender date in short date format in a label control.

Default.aspx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <div> <asp:Calendar ID="Calendar1" runat="server" onselectionchanged="Calendar1_SelectionChanged"></asp:Calendar> <br /> <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> </div> </form> </body> </html>

Full Source | C#

using System; using System.Data ; using System.Data.SqlClient ; using System.Configuration; public partial class _Default : System.Web.UI.Page { protected void Calendar1_SelectionChanged(object sender, EventArgs e) { Label1.Text = Calendar1.SelectedDate.ToShortDateString(); } }

Full Source | VB.NET

Imports System.Data Imports System.Data.SqlClient Imports System.Configuration Partial Class _Default Inherits System.Web.UI.Page Protected Sub Calendar1_SelectionChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles Calendar1.SelectionChanged Label1.Text = Calendar1.SelectedDate.ToShortDateString() End Sub End Class

Conclusion

The Calendar control in ASP.NET provides an efficient way to display a calendar on a web page. It offers customization options through properties that control the style of different elements. Additionally, it supports events for handling user interactions, enabling developers to create dynamic and interactive calendar experiences for their web applications.

Next > ASP.NET Treeview Control

Related Topics

More Related Topics.....