Updated July 6, 2023
Introduction to Calendar in ASP.NET
ASP.NET framework provides significant control for displaying 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 understand what calendar control is in ASP.NET; this powerful and complex web control helps us to add calendar features to your web page. This calendar control syntax is given below:
<asp:Calendar ID = "Calendar1" runat = "server"></asp:Calendar>How to Create a 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 the 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 year. Also, it will navigate to the next and also the previous month. It allows a web page user to select a single day, a wide range of dates, or an entire month. SelctionMode Property majorly does this.
- We can use the calendar control functionality to create a calendar box showing one month at a time on a web page application. The end-user can select whichever date they want, 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 date selection, the event is triggered, which will enable to react. It has many formatting-related properties mapped to its HTML table representation, including CellPadding, CellSpacing, Caption, and many more. Also, changing the cell appearance by handling the DayRender event is possible. 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
We can use many properties to customize a calendar’s appearance and functionality. 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.
- Note: It will not allow us to select any 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 look at how it works with a simple example of selecting a date of birth. We will start with an example of implementing calendar control for a user who needs to choose a 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: I am adding the control by drag-drop; once you add the control, it will look like the snippet below.
Step 3: Now right-click on the control and select the properties option; it will show the property panel as below. We can see many properties that will help with the layout, style, appearance, etc.
Step 4: You can do styling and event handling for the calendar control from this panel. In this example, I 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 of the above code: In calendar.aspx.cs, we are handling the OnSelectionChanged event added to calendar.aspx. Our application will add the selected date of birth as a label if the user chooses a date from the calendar event and directs it to our .cs file.
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, the date of birth, i.e., “Wednesday, January 15, 2020,” is added on the web page.
Conclusion
After reading this article, I hope you all have gained some basic knowledge of calendar control in asp.net. Calendar plays an important role in many web applications, from choosing the date of birth in any application form to the submission selection date. This article examines how exactly the calendar works in the asp.net framework.
Recommended Articles
We hope that this EDUCBA information on “Calendar in ASP.NET” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
