ASP .NET Tutorial
ASP.NET Web Forms
ASP.NET Validation
MVC Tutorial
ASP.NET Razor
Interview Questions
- asp.net-interview

ASP.NET Web Forms Calendar

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

We can also set Selected Date property that shows specified date in the calendar.

To create Calendar we can drag it from the toolbox of visual studio.

This is a server side control and ASP.NET provides own tag to create it. The example is given below.

< asp:CalendarID="Calendar1" runat="server" SelectedDate="2017-06-15" ></asp:Calendar>

Server renders it as the HTML control and produces the following code to the browser.

<table id="Calendar1" cellspacing="0" cellpadding="2" title="Calendar" 
style="border-width:1px;border-style:solid;border-collapse:collapse;">
<tr><td colspan="7" style="background-color:Silver;">
<table cellspacing="0" style="width:100%;border-collapse:collapse;">
<tr><td style="width:15%;">
<a href="javascript:__doPostBack('Calendar1','V6330')" 
style="color:Black" title="Go to the previous month"></a> ...

This control has its own properties that are tabled below.

Property	Description
AccessKey	It is used to set keyboard shortcut for the control.
TabIndex	The tab order of the control.
BackColor	It is used to set background color of the control.
BorderColor	It is used to set border color of the control.
BorderWidth	It is used to set width of border of the control.
Font	It is used to set font for the control text.
ForeColor	It is used to set color of the control text.
Text	It is used to set text to be shown for the control.
ToolTip	It displays the text when mouse is over the control.
Visible	To set visibility of control on the form.
Height	It is used to set height of the control.
Width	It is used to set width of the control.
NextMonth Text	It is used to set text for the next month button.
TitleFormat	It sets format for month title in header.
DayHeaderStyle	It is used to set style for the day header row.
DayStyle	It is used to apply style to days.
NextPrevStyle	It is used to apply style to the month navigation buttons.

Calendar Property Window

Example

In this example, we are implementing calendar and displaying user selected date to the web page.

// WebControls.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebControls.aspx.cs"
Inherits="WebFormsControlls.WebControls" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <h2>Select Date from the Calender</h2>
        <div>
            <asp:Calendar ID="Calendar1" runat="server" 
            OnSelectionChanged="Calendar1_SelectionChanged"></asp:Calendar>
        </div>
    </form>
    <p>
        <asp:Label runat="server" ID="ShowDate" ></asp:Label>
    </p>
</body>
</html>

Code Behind

// WebControls.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebFormsControlls
{
    public partial class WebControls : System.Web.UI.Page
    {
        public void Calendar1_SelectionChanged(object sender, EventArgs e)
        {
            ShowDate.Text = "You Selected: "+Calendar1.SelectedDate.ToString("D");
        }
    }
}

Output:

This view shows calendar to the browser.

It shows date selected by the user at the web page. A screenshot is attached below.

Next TopicASP.NET CheckBox

← prev next →

Hot Tutorials

Contact US

Email:[email protected]

ASP .NET Tutorial

ASP.NET Web Forms

ASP.NET Validation

MVC Tutorial

ASP.NET Razor