🎛️ ASP.NET UI Controls & Layout Management

Estimated reading: 3 minutes 277 views

ASP.NET – Calendars – Beginner’s Guide to Using the Calendar Control with Code & Output

Introduction – What Is the ASP.NET Calendar Control?

The ASP.NET Calendar Control is a built-in Web Forms component that lets users view dates, select specific days, and interact with the calendar through server-side C# code. It’s ideal for scheduling, bookings, event reminders, and forms that require date selection.

ASP.NET handles date formatting, navigation, selection, and styling without writing any JavaScript.

In this guide, you’ll learn:

How to display and interact with the Calendar control
How to get the selected date in C#
How to respond to selection and change events
Full working code with beginner-friendly explanations and output

ASP.NET Web Forms File Structure

File Name	Description
`CalendarDemo.aspx`	Markup file where you add the calendar and other controls
`CalendarDemo.aspx.cs`	Code-behind file where you handle logic like date selection

Step 1: Markup File – `CalendarDemo.aspx`

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CalendarDemo.aspx.cs" Inherits="CalendarDemo.CalendarDemo" %>

<html>
<body>
  <form id="form1" runat="server">
    
    <h3> ASP.NET Calendar Control Demo</h3>

    <!-- Calendar Control -->
    <asp:Calendar ID="Calendar1" runat="server" OnSelectionChanged="Calendar1_SelectionChanged" />

    <br /><br />

    <!-- Label to show selected date -->
    <asp:Label ID="lblSelectedDate" runat="server" Font-Size="Larger" ForeColor="Blue" />

  </form>
</body>
</html>

Explanation of Each Element

Control	Purpose
`<asp:Calendar ... />`	Displays a calendar (month view by default)
`OnSelectionChanged`	Event that fires when user selects a new date
`lblSelectedDate`	Shows the selected date using C# backend code

Step 2: Code-Behind File – `CalendarDemo.aspx.cs`

public partial class CalendarDemo : System.Web.UI.Page
{
    protected void Calendar1_SelectionChanged(object sender, EventArgs e)
    {
        // Get the selected date
        DateTime selected = Calendar1.SelectedDate;

        // Show it in a label
        lblSelectedDate.Text = "You selected: " + selected.ToString("dddd, MMMM dd, yyyy");
    }
}

Beginner Explanation of Code

Code	What It Does
`Calendar1.SelectedDate`	Gets the date the user clicked in the calendar
`ToString("format")`	Converts the DateTime into readable format like “Monday, March 11, 2025”
`lblSelectedDate.Text`	Updates the label to show the chosen date

Output Preview in Browser

On Initial Page Load:

 [Calendar displayed for current month]
(No message yet)

After Selecting March 11, 2025:

 [March calendar with 11th selected]

You selected: Tuesday, March 11, 2025

The label automatically updates when a new date is selected.

Summary – Recap & Takeaways

The ASP.NET Calendar control is perfect for date-based forms like bookings, events, and reminders.

Key Learnings:

<asp:Calendar> displays a calendar and raises events when a date is selected
You use Calendar1.SelectedDate to get the selected date in C#
Output can be customized using standard C# DateTime formatting
You can dynamically show messages based on selected dates

Common uses:

Hotel bookings
Event scheduling
Attendance forms
Delivery date pickers

Frequently Asked Questions (FAQs)

Can I set a default selected date in the Calendar?
Yes. In Page_Load, use:

Calendar1.SelectedDate = DateTime.Today;

How can I highlight today’s date or disable past dates?
You can use the DayRender event for custom logic:

protected void Calendar1_DayRender(object sender, DayRenderEventArgs e)
{
    if (e.Day.Date < DateTime.Today)
        e.Day.IsSelectable = false;
}

What format does SelectedDate.ToString() return?
It returns the full datetime. Use .ToString("d") for short format or "MMMM dd, yyyy" for long date.

Can I style the calendar with CSS?
Yes! Use CssClass and style with custom CSS, or set inline styles like BackColor, Font-Bold, etc.

« Previous Next »

Share Now :