In this article, we will learn about how we can use Calendar control in ASP.NET.

Calendar control is used to display selectable dates in a calendar. It also shows data associated with a specific date. Calendar control displays a calendar through which users can move to any day in any year.

This is a server-side control, To create Calendar we can drag it from the toolbox of visual studio or ASP.NET provides its own tag to create Calendar. The example is given below.

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

Using the properties window we can also set Selected Date property that shows a specified date in the calendar.

<asp:Calendar ID="Calendar1" runat="server" SelectedDate="11/01/2019 10:04:38"></asp:Calendar>

This control has its own properties that are tabled below.

PropertyDescription
AccessKeyThis property is used to set keyboard shortcut for the control.
TabIndexThe tab order of the control.
BackColorThis property is used to set background color of the control.
BorderColorThis property is used to set border color of the control.
BorderWidthThis property is used to set width of border of the control.
FontThis property is used to set font for the control text.
ForeColorThis property is used to set color of the control text.
TextThis property is used to set text to be shown for the control.
ToolTipIt displays the text when mouse is over the control.
VisibleTo set visibility of control on the form.
HeightThis property is used to set height of the control.
WidthThis property is used to set width of the control.
NextMonth TextThis property is used to set text for the next month button.
TitleFormatIt sets format for month title in header.
DayHeaderStyleThis property is used to set style for the day header row.
DayStyleThis property is used to apply style to days.
NextPrevStyleThis property is used to apply style to the month navigation buttons.

Example

In this example, we are implementing a calendar using calendar control.

Create a new project and select the ASP.NET Empty Web Site.

Now, right-click the project name (CRUD Operations) in the Solution Explorer and select Add -> Add New Item.

Now, let’s add a new Default.aspx file, select Web Form and click Add.

Open the Default.aspx file and add the code in it.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Calendar ID="Calendar1" runat="server" OnSelectionChanged="Calendar1_SelectionChanged" OnVisibleMonthChanged="Calendar1_VisibleMonthChanged"></asp:Calendar>
        </div>
    </form>
</body>
</html>

Open the Default.aspx.cs file and add the code in it.

using System;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
            Response.Write("<script> alert('Todays Date is: " + Calendar1.TodaysDate.ToShortDateString() + "') </script>");
    }

    protected void Calendar1_SelectionChanged(object sender, EventArgs e)
    {
        Response.Write("<script> alert('Selected Date is: " + Calendar1.SelectedDate.ToShortDateString() + "') </script>");
    }

    protected void Calendar1_VisibleMonthChanged(object sender, MonthChangedEventArgs e)
    {
        Response.Write("<script> alert('Selected Month & Year is: " + e.NewDate.Month + "-" + e.NewDate.Year + "') </script>");
    }
}

Here, in Page_Load() it displays the current date. In Calendar1_SelectionChanged() it displays selected date. And in Calendar1_VisibleMonthChanged() it displays month-year according to next or previous month navigation click.

That’s it.

Output: