Calendar Control Properties Explained

Table of Contents

1. Introduction to Calendar Control

Calendar Control of Asp.net allows the user to pick a date by navigating through calendar dates. The control shows Month, Year and Days to the user so they can make use of it to pick the required date. For Example, a Travel Organization Admin can specify the special events in a month by picking a date. For him knowing week days and holidays are important and the control can help it. If the user wants to enter a date of birth, then text box with masks is a right choice as picking a day is not an option there. However, for the developer, the big disadvantage of it comes in validation. But, he or she need not worry about date format and date validity when it comes out of the Calendar Control.

When we place a control in Asp.Net web form, the control does not look good. In this article, we will create an example which will change the look of a default calendar into a more appealing one. After this, we will handle events so that the calendar can report the selected dates. We will also mark the special event dates.

2. Parts of The Calendar Control

When we place a Calendar Control in the web form, it looks simple. The below picture shows the default look of the Control:

Default look of ASP.Net Calendar Control

Before we change this control’s look, we will first understand the parts of it. The below picture shows different parts of the Control:

Parts of the ASP.Net Calendar Control

Below are the details of the Marked Numbers in the picture:

This is the title of the control. This displays the year and month.
The arrow buttons on both side allows the user to navigate back and forth of the months.
This part of the control displays the three letter week days name.
It displays the working days. This will not include weekend days.
Displays Weekend days. This includes Saturdays and Sundays.
This shows the days which does not belongs to current month displayed in the title. These dates are from previous month or from next month.
The default control displays arrow marks. The single arrow is used to select all days from the week. The double arrow (Partly hidden by marking 2) is used to select all the days from a month.
Shows Today’s date. This screenshot was taken on 03-Jul-2019.

In ASP.Net Visual Studio IDE, one can customize all parts of the Calendar Control using the properties linked to it. In the coming sections, we will change the look of this control.

3. ShowTitle, ShowDayHeader and ShowGridLine Properties

The

ShowTitle

Property decides whether the Calendar should display the title or it should not. In the past section we marked this as #1. The

ShowDayHeader

Property is for showing or hiding the weekdays name from the Control. Below picture shows which part of the calendar is controlled by these Properties:

ShowTitle ShowDayHeader Properties

In the default control, each numbered tile represents a day in current month or previous month or next month. The

ShowGridLine

Property can turn ON or OFF the grid line separating the tiles. Below picture shows the Calendar Control with this property turned ON.

4. Start ASP.Net Website Project

Now, we will start a website and customize the Calendar Control. We name the website as ‘CalendarEx’ and choose code behind language as Visual C#. The below picture shows the sequence of the steps to create the project:

Start a website in visual studio for Asp.Net

After creating the ASP.Net website project, set the value as true for all three properties of Calendar Control discussed in the previous section.

5. SelectionMode Property

The

SelectionMode

property of ASP.Net Calendar Control allows how a user can select dates from it. There are three modes which we can set to this property. Note, only one mode can be set at a time.

5.1 Day Mode of Calendar Control

The

Day

property value of SelectionMode allows the user to select only one date from the control. When they select another date, previous selected day goes not selected. In simple words, there will be only one selected date.

5.2 DayWeek Mode of Calendar Control

DayWeek

property value of SelectionMode allows the user to select a day or an entire week. The single arrow button in the left margin selects all the days in a week.

5.3 DayWeekMonth Mode of Calendar Control

When we set

DayWeekMonth

property value for the SelectionMode property, the user can either select single day or an entire week or even the entire month. The double arrow in the top left corner allows a user select all the days in a month. The below picture shows how one can select a week and a month:

Selecting a Week and Month from Calendar Control using SelectionMode Property

6. Customizing Calendar Control Navigation Arrows

The Navigation arrows for previous month and next months can be changed to an Image icon. The properties ‘

NextMonthText

’ and ‘

PreviousMonthText

’ can change these month navigation links of Calendar. One can set a Text or Image here. If we want to set an image, we can use ‘Img Src’ html tag. In our example we set these property values as in the below code:

For NextMonthText:

<img src='icons/NextMonth.ico' border=0>

1	<img src='icons/NextMonth.ico' border=0>

For PreviousMonthText:

<img src='icons/PrevMonth.ico' border=0>

1	<img src='icons/PrevMonth.ico' border=0>

Note, the example expects that we already put an 32 bit pixel image icon in the ICON folder of the project. If you do not have the icon folder, right click project in Solution Explorer and create one. Then, put a 32 bit icon called ‘NextMonth.ico’ and ‘PrevMonth.ico’ in the folder.

7. Customizing Selectors

We can also set an image for the selectors. Note, section 5 of this article talks about selectors and Selection Mode Property. Like the month navigation, we can set an Image html tag and change the look of these selectors. The below code shows property values for ‘

SelectWeekText

’ and ‘

SelectMonthText

’ Properties:

<img src='icons/WeekSel.ico' border=0>
<img src='icons/MonthSel.ico' border=0>

1 2	<img src='icons/WeekSel.ico' border=0> <img src='icons/MonthSel.ico' border=0>

8. Various Styled of Calendar Control

The second image in section two shows different parts of the Calendar and we can adjust the style for each part. The below Table shows the associated properties:

Property	Description
TitleStyle	Sets style for the Calendar’s Title. Note, this part displays Month and Year
DayHeaderStyle	Sets style for the day heading part of the control. This part displays the weekdays name.
DayStyle	Sets style for each numbered style for current month. The style skips the weekend days.
NextPrevStyle	Sets style for Previous and Next month navigation part of the Control.
OtherMonthDayStyle	Sets style for the numbered tiles which comes from previous month and next month.
SelectedDayStyle	Sets style for all the days selected in the control. Note, the selection depends on SelectionMode Property.
SelectorStyle	Sets style for the Week and Month Selector part of the Control.
WeekendDayStyle	Sets style for numbered tile which comes from weekend days.
TodayDayStyle	Sets style for the Today’s Date.

The below picture shows the how these properties are set so that Calendar’s look changed to a Green Theme. Click the Image to zoom it.

Calendar Style Settings

After setting all the above properties including the styles shown in the above picture, the customized calendar control looks like the below:

Asp.net Calendar Control After Style Customization

9. Change Appearance Dynamically

Now, we will move to coding part of the control. First, we need an interaction panel below the Calendar Control. The controls and its description are below:

Controls in ASP.Net Calendar Interaction Panel Board

Before we move to the coding part, set the ‘

AutoPostBack

’ Property for Calendar and all three check boxes. This will post the message to the Web Server to perform the relevant action. In the Page Load event, we set defaults for our control. Below is the code:

protected void Page_Load(object sender, EventArgs e)
{
  if (Page.IsPostBack == false)
  {
    //Snippet 01: Initialize the control
    chkShowTitle.Checked = true;
    chkShowHeader.Checked = true;
    chkShowGrids.Checked = true;
    WebCalendar.ShowTitle = true;
    WebCalendar.ShowDayHeader = true;
    WebCalendar.ShowGridLines = true;
  }
}

protected void Page_Load(object sender, EventArgs e)

{

if (Page.IsPostBack == false)

{

//Snippet 01: Initialize the control

chkShowTitle.Checked = true;

chkShowHeader.Checked = true;

chkShowGrids.Checked = true;

WebCalendar.ShowTitle = true;

WebCalendar.ShowDayHeader = true;

WebCalendar.ShowGridLines = true;

}

Next, we handle ‘

CheckedChanged

’ event for the check boxes. In the handler function, we set Boolean properties ‘

ShowDayHeader

’, ‘

ShowTitle

’ and ‘

ShowGridLines

’ with the check state of the check boxes. Below is the code:

//Snippet 02: Now set the properties based on Check Status
protected void chkShowHeader_CheckedChanged(object sender,
  EventArgs e)
{
  WebCalendar.ShowDayHeader = chkShowHeader.Checked;
}
 
protected void chkShowTitle_CheckedChanged(object sender,
  EventArgs e)
{
  WebCalendar.ShowTitle = chkShowTitle.Checked;
}
 
protected void chkShowGrids_CheckedChanged(object sender,
  EventArgs e)
{
  WebCalendar.ShowGridLines = chkShowGrids.Checked;
}

//Snippet 02: Now set the properties based on Check Status

protected void chkShowHeader_CheckedChanged(object sender,

EventArgs e)

{

WebCalendar.ShowDayHeader = chkShowHeader.Checked;

}

protected void chkShowTitle_CheckedChanged(object sender,

EventArgs e)

{

WebCalendar.ShowTitle = chkShowTitle.Checked;

}

protected void chkShowGrids_CheckedChanged(object sender,

EventArgs e)

{

WebCalendar.ShowGridLines = chkShowGrids.Checked;

}

10. Retrieve Multiple Selected Dates of Calendar Control

Asp.Net Calendar Control fires

SelectionChanged

Event when a user picks one or more date from it. Remember, the

SelectionMode

property tells how the user can pick one date or more dates from the Control. Inside the event handler,

SelectedDates

Property gives user-selected date collection to us. We iterate through the list to format a string for user-selected date(s). Finally, we display the string in the Label Control. Below is the code:

//Snippet 03: Show the Selected Date in the Display Label
protected void WebCalendar_SelectionChanged(object sender, 
  EventArgs e)
{
  int count = 0;
  string Selected_date_list = "";
 
  foreach (DateTime date in WebCalendar.SelectedDates)
  {
    count++;
    Selected_date_list = Selected_date_list + 
      "Selected Date #" + count.ToString() + ": " +
        date.ToShortDateString() + "<br/>";
  }
 
  lblDisplay.Text = Selected_date_list;
}

//Snippet 03: Show the Selected Date in the Display Label

protected void WebCalendar_SelectionChanged(object sender,

EventArgs e)

{

int count = 0;

string Selected_date_list = "";

foreach (DateTime date in WebCalendar.SelectedDates)

{

count++;

Selected_date_list = Selected_date_list +

"Selected Date #" + count.ToString() + ": " +

date.ToShortDateString() + "<br/>";

}

lblDisplay.Text = Selected_date_list;

}

One can note the usage of

<br/>

tag while forming the selected date as string. We use this HTML tag to show each selected date in a separate line on the Label Control.

The below picture shows how the selected dates are displayed in the Label Control. Here, the user chose fourth week of July using Week Selector arrow. Also, note how the ‘

SelectedDayStyle

’ Property applied the style for the Selected dates. The earlier screen-shot in section 8 did not show it.

SelectionChanged Event vs. SelectedDates Property

11. Marking Special Day using DayRender Event

Asp.Net Calendar Control provides

DayRender

Event so that application developer can change the style of any choice of day tile. The Control fires this event while rendering each Tiled-Day in the control. We will use this event to change the style of some special dates. For example, we can imagine that we are marking the vacation in a month with a special style at run-time. Note, so for we applied the styles only at design time.

The ‘DayRender’ Event handler gives us

DayRenderEventArgs

. We can use it to customize the style for the day. Note, as already told, the control fires this event for each day in the month covering weekends. From the ‘DayRenderEventArgs’ object, we can get ‘

CalendarDay

’ and ‘

TableCell

’ objects. The

Day

Property gives CalendarDay object and Cell Property gives the TableCell object.

We can use the ‘

CalerdarDay

’ object to decide for which Day-Tile the rendering is going on. It can be done using the date object in it. In the below code, we are marking 3, 15 and 31 as holidays. We use the ‘

TableCell

’ object to change the style of these Special Days at run-time by using the Cell Style properties for Font and Colors. The below picture shows how this event procedure renders the special days:

//Snippet 05: Mark Special Days [For Example Holidays]
  protected void WebCalendar_DayRender(object sender, DayRenderEventArgs e)
{
    //Display the date differently when it is a holiday. 
    //For Example We will do it for July Only
    if (e.Day.Date.Month == 7)
    {
      if (e.Day.Date.Day == 3 || e.Day.Date.Day == 15
        || e.Day.Date.Day == 31)
      {
        e.Cell.ForeColor = Color.Blue;
        e.Cell.BackColor = Color.LightGreen;
        e.Cell.BorderStyle = BorderStyle.Double;
        e.Cell.BorderWidth = 2;
        e.Cell.Font.Bold = true;
        e.Cell.Font.Size = 12;
      }
    }
}

//Snippet 05: Mark Special Days [For Example Holidays]

protected void WebCalendar_DayRender(object sender, DayRenderEventArgs e)

{

//Display the date differently when it is a holiday.

//For Example We will do it for July Only

if (e.Day.Date.Month == 7)

{

if (e.Day.Date.Day == 3 || e.Day.Date.Day == 15

|| e.Day.Date.Day == 31)

{

e.Cell.ForeColor = Color.Blue;

e.Cell.BackColor = Color.LightGreen;

e.Cell.BorderStyle = BorderStyle.Double;

e.Cell.BorderWidth = 2;

e.Cell.Font.Bold = true;

e.Cell.Font.Size = 12;

}

Code Reference

1. CalendarControlEx.aspx

<%@ Page Language="C#" AutoEventWireup="true"  
CodeFile="CalendarControlEx.aspx.cs" Inherits="_Default" %>
 
<!DOCTYPE 
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
      <asp:Label
      ID="Label1" runat="server"
      Font-Names="Anonymous" Font-Size="Medium"
      Style="font-size: 14pt;
        vertical-align: middle; text-align: center" 
        Text="Calendar Control Example"
        Width="596px">
      </asp:Label>
      <br />
      <br />
      <asp:Calendar
        ID="WebCalendar" runat="server" Height="165px"
        SelectionMode="DayWeekMonth"
        Width="591px" ShowGridLines="True"
        NextMonthText="<img src='icons/NextMonth.ico' border=0>" 
        PrevMonthText="<img src='icons/PrevMonth.ico' border=0>" 
        SelectMonthText="<img src='icons/MonthSel.ico' border=0>" 
        SelectWeekText="<img src='icons/WeekSel.ico' border=0>" 
        OnDayRender="WebCalendar_DayRender" 
        OnSelectionChanged="WebCalendar_SelectionChanged">
        <SelectedDayStyle
        BackColor="#C0C0FF" BorderColor="#0000C0"
        BorderStyle="Double"
        BorderWidth="3px" Font-Names="Verdana"
        ForeColor="#0000C0" />
        <WeekendDayStyle
        BackColor="#FFE0C0" BorderColor="#C00000"
         ForeColor="#C04000" Font-Names="Verdana" />
        <OtherMonthDayStyle Font-Names="Verdana"
        ForeColor="Silver" />
        <DayStyle BackColor="#C0FFC0" BorderColor="Green"
         BorderWidth="1px" Font-Names="Verdana"
          Font-Size="Small" ForeColor="Black"
          BorderStyle="Inset" />
        <NextPrevStyle BackColor="Green"
        BorderStyle="None"
        Font-Names="Verdana"
        ForeColor="Yellow" />
        <DayHeaderStyle BackColor="Green"
        BorderColor="Black" BorderStyle="Ridge"
        BorderWidth="2px" ForeColor="#FFFF80" />
        <TitleStyle BackColor="Green"
        BorderColor="Blue" BorderStyle="Groove"
        BorderWidth="2px"
        Font-Names="Verdana"
        Font-Size="Large"
        ForeColor="Yellow" />
        <SelectorStyle
          BackColor="Green" BorderColor="Black"
          BorderStyle="Inset" BorderWidth="2px"
          Font-Bold="False" Font-Italic="False"
          Font-Names="Verdana" ForeColor="Yellow" />
        <TodayDayStyle
          BackColor="#C0C0FF" BorderColor="#FFE0C0"
          BorderStyle="Inset" BorderWidth="3px"
          Font-Bold="True" Font-Italic="True"
          Font-Names="Verdana" Font-Size="Medium"
          ForeColor="Red" />
      </asp:Calendar>
      &nbsp;
      <asp:Panel
        ID="Panel1" runat="server" BackColor="Black"
        Height="454px" Style="z-index: 100;
        left: 9px; position: absolute; top: 365px" 
        Width="590px">
          <asp:Label ID="Label2" runat="server"
          Font-Names="Verdana" ForeColor="#FFFFC0"
          Text="Calendar User Navigation"
          Width="590px" style="text-align: center">
          </asp:Label>
          &nbsp;
          <asp:CheckBox ID="chkShowGrids" runat="server"
          ForeColor="White"
          Style="z-index: 100;left: 469px; 
          position: absolute; top: 25px" 
          Width="111px" AutoPostBack="True"
          Font-Names="Verdana"
          OnCheckedChanged="chkShowGrids_CheckedChanged"
          Text="Show Grid" />
          <asp:CheckBox ID="chkShowTitle" runat="server"
          ForeColor="White" Style="z-index: 101;
          left: 9px; position: absolute; top: 24px" 
          AutoPostBack="True" Font-Names="Verdana"
          OnCheckedChanged="chkShowTitle_CheckedChanged"
          Text="Show Title" />
          <asp:CheckBox ID="chkShowHeader" runat="server"
          ForeColor="White" Style="z-index: 102;
          left: 240px; position: absolute; top: 24px" 
          AutoPostBack="True" Font-Names="Verdana"
          OnCheckedChanged="chkShowHeader_CheckedChanged"
          Text="Show Header" />
          <asp:Label ID="lblDisplay" runat="server"
          BackColor="Black" BorderColor="Red"
          BorderStyle="Groove"
          BorderWidth="2px" Height="389px"
          Style="z-index: 104; left: 9px; 
          position: absolute;
          top: 51px" Width="567px" Font-Names="Verdana"
          Font-Size="X-Small"
          ForeColor="White">
          </asp:Label>
      </asp:Panel>
      <br />
    </div>
    </form>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

<%@ Page Language="C#" AutoEventWireup="true"

CodeFile="CalendarControlEx.aspx.cs" Inherits="_Default" %>

<!DOCTYPE

html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>Untitled Page</title>

</head>

<body>

<div>

<asp:Label

ID="Label1" runat="server"

Font-Names="Anonymous" Font-Size="Medium"

Style="font-size: 14pt;

vertical-align: middle; text-align: center"

Text="Calendar Control Example"

Width="596px">

</asp:Label>

<br />

<asp:Calendar

ID="WebCalendar" runat="server" Height="165px"

SelectionMode="DayWeekMonth"

Width="591px" ShowGridLines="True"

NextMonthText="<img src='icons/NextMonth.ico' border=0>"

PrevMonthText="<img src='icons/PrevMonth.ico' border=0>"

SelectMonthText="<img src='icons/MonthSel.ico' border=0>"

SelectWeekText="<img src='icons/WeekSel.ico' border=0>"

OnDayRender="WebCalendar_DayRender"

OnSelectionChanged="WebCalendar_SelectionChanged">

<SelectedDayStyle

BackColor="#C0C0FF" BorderColor="#0000C0"

BorderStyle="Double"

BorderWidth="3px" Font-Names="Verdana"

ForeColor="#0000C0" />

<WeekendDayStyle

BackColor="#FFE0C0" BorderColor="#C00000"

ForeColor="#C04000" Font-Names="Verdana" />

<OtherMonthDayStyle Font-Names="Verdana"

ForeColor="Silver" />

<DayStyle BackColor="#C0FFC0" BorderColor="Green"

BorderWidth="1px" Font-Names="Verdana"

Font-Size="Small" ForeColor="Black"

BorderStyle="Inset" />

<NextPrevStyle BackColor="Green"

BorderStyle="None"

Font-Names="Verdana"

ForeColor="Yellow" />

<DayHeaderStyle BackColor="Green"

BorderColor="Black" BorderStyle="Ridge"

BorderWidth="2px" ForeColor="#FFFF80" />

<TitleStyle BackColor="Green"

BorderColor="Blue" BorderStyle="Groove"

BorderWidth="2px"

Font-Names="Verdana"

Font-Size="Large"

ForeColor="Yellow" />

<SelectorStyle

BackColor="Green" BorderColor="Black"

BorderStyle="Inset" BorderWidth="2px"

Font-Bold="False" Font-Italic="False"

Font-Names="Verdana" ForeColor="Yellow" />

<TodayDayStyle

BackColor="#C0C0FF" BorderColor="#FFE0C0"

BorderStyle="Inset" BorderWidth="3px"

Font-Bold="True" Font-Italic="True"

Font-Names="Verdana" Font-Size="Medium"

ForeColor="Red" />

</asp:Calendar>

<asp:Panel

ID="Panel1" runat="server" BackColor="Black"

Height="454px" Style="z-index: 100;

left: 9px; position: absolute; top: 365px"

Width="590px">

<asp:Label ID="Label2" runat="server"

Font-Names="Verdana" ForeColor="#FFFFC0"

Text="Calendar User Navigation"

Width="590px" style="text-align: center">

</asp:Label>

<asp:CheckBox ID="chkShowGrids" runat="server"

ForeColor="White"

Style="z-index: 100;left: 469px;

position: absolute; top: 25px"

Width="111px" AutoPostBack="True"

Font-Names="Verdana"

OnCheckedChanged="chkShowGrids_CheckedChanged"

Text="Show Grid" />

<asp:CheckBox ID="chkShowTitle" runat="server"

ForeColor="White" Style="z-index: 101;

left: 9px; position: absolute; top: 24px"

AutoPostBack="True" Font-Names="Verdana"

OnCheckedChanged="chkShowTitle_CheckedChanged"

Text="Show Title" />

<asp:CheckBox ID="chkShowHeader" runat="server"

ForeColor="White" Style="z-index: 102;

left: 240px; position: absolute; top: 24px"

AutoPostBack="True" Font-Names="Verdana"

OnCheckedChanged="chkShowHeader_CheckedChanged"

Text="Show Header" />

<asp:Label ID="lblDisplay" runat="server"

BackColor="Black" BorderColor="Red"

BorderStyle="Groove"

BorderWidth="2px" Height="389px"

Style="z-index: 104; left: 9px;

position: absolute;

top: 51px" Width="567px" Font-Names="Verdana"

Font-Size="X-Small"

ForeColor="White">

</asp:Label>

</asp:Panel>

<br />

</div>

</form>

</body>

</html>

2. CalendarControlEx.aspx.cs

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
 
//Snippet 04: To Access color object for RayRender
using System.Drawing;
 
public partial class _Default : System.Web.UI.Page 
{
 
  protected void Page_Load(object sender, EventArgs e)
  {
    if (Page.IsPostBack == false)
    {
      //Snippet 01: Initialize the control
      chkShowTitle.Checked = true;
      chkShowHeader.Checked = true;
      chkShowGrids.Checked = true;
      WebCalendar.ShowTitle = true;
      WebCalendar.ShowDayHeader = true;
      WebCalendar.ShowGridLines = true;
    }
  }
 
  //Snippet 02: Now set the properties 
  //based on Check Status
  protected void chkShowHeader_CheckedChanged(
    object sender,
    EventArgs e)
  {
    WebCalendar.ShowDayHeader = chkShowHeader.Checked;
  }
  protected void chkShowTitle_CheckedChanged(
    object sender,
    EventArgs e)
  {
    WebCalendar.ShowTitle = chkShowTitle.Checked;
  }
  protected void chkShowGrids_CheckedChanged(
    object sender,
    EventArgs e)
  {
    WebCalendar.ShowGridLines = chkShowGrids.Checked;
  }
 
  //Snippet 03: Show the Selected Date in the 
  //Display Label
  protected void WebCalendar_SelectionChanged(
    object sender, 
    EventArgs e)
  {
    int count = 0;
    string Selected_date_list = "";
 
    foreach (DateTime date in WebCalendar.SelectedDates)
    {
      count++;
      Selected_date_list = Selected_date_list + 
        "Selected Date #" + count.ToString() + ": " +
          date.ToShortDateString() + "<br/>";
    }
 
    lblDisplay.Text = Selected_date_list;
  }
 
  //Snippet 05: Mark Special Days [For Example Holidays]
  protected void WebCalendar_DayRender(object sender, 
    DayRenderEventArgs e)
  {
    //Display the date differently when it is a holiday. 
    //For Example We will do it for July Only
    if (e.Day.Date.Month == 7)
    {
      if (e.Day.Date.Day == 3 || e.Day.Date.Day == 15
        || e.Day.Date.Day == 31)
      {
        e.Cell.ForeColor = Color.Blue;
        e.Cell.BackColor = Color.LightGreen;
        e.Cell.BorderStyle = BorderStyle.Double;
        e.Cell.BorderWidth = 2;
        e.Cell.Font.Bold = true;
        e.Cell.Font.Size = 12;
      }
    }
//End of Month Check
  }
}

using System;

using System.Data;

using System.Configuration;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

//Snippet 04: To Access color object for RayRender

using System.Drawing;

public partial class _Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

if (Page.IsPostBack == false)

{

//Snippet 01: Initialize the control

chkShowTitle.Checked = true;

chkShowHeader.Checked = true;

chkShowGrids.Checked = true;

WebCalendar.ShowTitle = true;

WebCalendar.ShowDayHeader = true;

WebCalendar.ShowGridLines = true;

}

//Snippet 02: Now set the properties

//based on Check Status

protected void chkShowHeader_CheckedChanged(

object sender,

EventArgs e)

{

WebCalendar.ShowDayHeader = chkShowHeader.Checked;

}

protected void chkShowTitle_CheckedChanged(

object sender,

EventArgs e)

{

WebCalendar.ShowTitle = chkShowTitle.Checked;

}

protected void chkShowGrids_CheckedChanged(

object sender,

EventArgs e)

{

WebCalendar.ShowGridLines = chkShowGrids.Checked;

}

//Snippet 03: Show the Selected Date in the

//Display Label

protected void WebCalendar_SelectionChanged(

object sender,

EventArgs e)

{

int count = 0;

string Selected_date_list = "";

foreach (DateTime date in WebCalendar.SelectedDates)

{

count++;

Selected_date_list = Selected_date_list +

"Selected Date #" + count.ToString() + ": " +

date.ToShortDateString() + "<br/>";

}

lblDisplay.Text = Selected_date_list;

}

//Snippet 05: Mark Special Days [For Example Holidays]

protected void WebCalendar_DayRender(object sender,

DayRenderEventArgs e)

{

//Display the date differently when it is a holiday.

//For Example We will do it for July Only

if (e.Day.Date.Month == 7)

{

if (e.Day.Date.Day == 3 || e.Day.Date.Day == 15

|| e.Day.Date.Day == 31)

{

e.Cell.ForeColor = Color.Blue;

e.Cell.BackColor = Color.LightGreen;

e.Cell.BorderStyle = BorderStyle.Double;

e.Cell.BorderWidth = 2;

e.Cell.Font.Bold = true;

e.Cell.Font.Size = 12;

}

//End of Month Check

}

Categories: Asp 2.0

Tags: DayRender, DayRenderEventArgs, SelectionMode, SelectMonthText, SelectWeekText

Do you like this Example? Please comment about it for others!! Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Programming Examples

Are you a Programmer or Application Developer or a DBA? Take a cup of coffee, sit back and spend few minutes here :)

Calendar Control Properties Explained

1. Introduction to Calendar Control

2. Parts of The Calendar Control

3. ShowTitle, ShowDayHeader and ShowGridLine Properties

4. Start ASP.Net Website Project

5. SelectionMode Property

5.1 Day Mode of Calendar Control

5.2 DayWeek Mode of Calendar Control

5.3 DayWeekMonth Mode of Calendar Control

6. Customizing Calendar Control Navigation Arrows

7. Customizing Selectors

8. Various Styled of Calendar Control

9. Change Appearance Dynamically

10. Retrieve Multiple Selected Dates of Calendar Control

11. Marking Special Day using DayRender Event

Code Reference

1. CalendarControlEx.aspx

2. CalendarControlEx.aspx.cs

Like this:

Related

Do you like this Example? Please comment about it for others!! Cancel reply

Programming Examples

Are you a Programmer or Application Developer or a DBA? Take a cup of coffee, sit back and spend few minutes here :)

Calendar Control Properties Explained

1. Introduction to Calendar Control

2. Parts of The Calendar Control

3. ShowTitle, ShowDayHeader and ShowGridLine Properties

4. Start ASP.Net Website Project

5. SelectionMode Property

5.1 Day Mode of Calendar Control

5.2 DayWeek Mode of Calendar Control

5.3 DayWeekMonth Mode of Calendar Control

6. Customizing Calendar Control Navigation Arrows

7. Customizing Selectors

8. Various Styled of Calendar Control

9. Change Appearance Dynamically

10. Retrieve Multiple Selected Dates of Calendar Control

11. Marking Special Day using DayRender Event

Code Reference

1. CalendarControlEx.aspx

2. CalendarControlEx.aspx.cs

Share this:

Like this:

Related

Do you like this Example? Please comment about it for others!! Cancel reply