Calendar in ASP.NET

Introduction to Calendar in ASP.NET

ASP.NET framework provides a very important control that is used to display a calendar and its control over the web page. It allows the user to select a particular day or month. Also, we can select any previous and next month’s date.

Syntax

Now we understood what calendar control is in ASP.NET, this powerful and complex web control helps us to add calendar feature to your web page. This calendar control syntax is given below:

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

How to Create Calendar in ASP.NET?

• Suppose we have some fields where the data needs to be entered, stored and retrieved from the database. We doubt in our mind then what we should use for entering the date, calendar control in the ASP.NET website or any other method.
• We can use the calendar control of ASP.net by picking the calendar control from the toolbar.
• Calender2_SelectionChanged event on calendar’s event we can have the selected date as given below

• Putting a calendar control without any code behind its file will give us a proper workable calendar. It will show us the months and days of the years. Also, it will navigate to next and also the previous month. it allows a user of the web page to select a single day or wide range of dates or an entire month. This is majorly done by SelctionMode Property.
• We can use the calendar control functionality to create a calendar box that will show one month at a time on a web page application. The end-user can select whichever date they want to choose, can select the month and a wide range of days. This wide range of date selection is allowed in case of selecting dates. We can use its different properties for creating every part of the calendar.
• Also, when the user changes the selection of date, the event is triggered that will enable to react. It has many formatting related properties that have been mapped to its HTML table representation which includes CellPadding, CellSpacing, Caption and many more. Also, it is possible to change the cell appearance by handling the DayRender event. We can change the background and foreground colors of the weekend to represent the holidays. Dates can be made unclickable for the users.

Properties of Calendar in ASP.NET

To customize the appearance and functionality of a calendar, we can use many properties. Calendar control has its properties. Let’s discuss some of its main properties.

• Day: This property will allow selecting a single date from the calendar.
• DayWeek: This will allow selecting a whole week.
• DayWeekMonth: This will allow selecting a single date, a whole month or a whole week.
• None: It will not allow us to select any single date from the calendar.

We can set the properties in two ways:

• We can select the AutoFormat property of the calendar by right-clicking the calendar control.
• Also, we can set it manually setting.

Examples of Calendar in ASP.NET

Let’s have a look at how it works with a very simple example of selecting a date of birth. We will start with an example to implement calendar control for a user who needs to select Date of birth.

Step 1: Open your ASP.NET application and open the page where you are intended to add a calendar control

To add any control, we have two ways to start with

• Simply drag-drop the control
• Directly edit or type control in the markup i.e. aspx file (as shown in the syntax)

Step 2: Here I am adding the control by drag-drop, once you add the control it will look like below snippet.

Step 3: Now right-click on the control and select properties option, it will show property panel as below. We can see many properties will help with the layout, style, appearance, etc.

Step 4: From this panel, you can do styling and event handling for the calendar control. Here in this example, I have marked the weekend in bold and Today’s date in green color.

Step 5: If you open the markup i.e. Calender.aspx it will have this code, for this example, I have already added Header and Label for our application.

Code:

Calendar.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Calendar.aspx.cs" Inherits="MyCalendar.Calendar" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="MyForm" runat="server">
<h1>Select  your Date of Birth</h1>
<div>
<asp:Calendar ID="MyCalendar" runat="server" OnSelectionChanged="MyCalendar_SelectionChanged">
<TodayDayStyle BackColor="#009900" />
<WeekendDayStyle Font-Bold="True" />
</asp:Calendar>
</div>
</form>
<p>
<asp:Label runat="server" ID="DateOfBirth"></asp:Label>
</p>
</body>
</html>

• If we go to the Calendar.aspx.cs

Code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace MyCalendar
{
public partial class Calendar : System.Web.UI.Page
{
public void MyCalendar_SelectionChanged (object sender, EventArgs e)
{
DateOfBirth.Text = "Date of Birth: " + MyCalendar.SelectedDate.ToString("D");
}
}
}

Explanation to the above code: In the Calendar.aspx we have added event OnSelectionChanged and this event is handled in code Calendar.aspx.cs. When the user will select any date from the calendar event, it will be routed to our .cs file and it will add the label of our selection i.e. selected date of birth in our application.

Output:

• When we run our application, it will show a web page as below.

• You can see the weekend is in bold and today’s date in Green color.
• Now I select any random date for the sake of this example

Here we can see after the selection, Date of birth i.e. “Wednesday, January 15, 2020” is added on the web page.

Conclusion

I hope after reading this article you all have gained some basic knowledge on calendar control in asp.net. Calendar plays an important role in many web applications starting from choosing the date of birth in any application form until the selection of date in submitting. The main aim of this article is just to go through how exactly calendar works in asp.net framework.

Recommended Articles

This is a guide to Calendar in ASP.NET. Here we discuss the introduction, properties, examples and how Calendar in ASP.NET works along with appropriate syntax. You can also go through our other related articles to learn more –

1. RadioButton in ASP.NET
2. .NET Framework Architecture
3. ASP.NET Image
4. ASP.NET CheckBox