Customization of Calendar Control in ASP.NET in Visual Studio 2012

Introduction

In this article I describe how to Customize a calendar control in ASP.NET in Visual Studio 2012. In this article I customize a calendar control in a way that it shows all the Holidays in red. We insert holidays into the database. Our calendar picks the dates from the database and shows these dates in red in the front end. In this article I also describe how to customize the tool tip of the particular date.

I assume you can create a simple ASP.Net Web Application. To start the creation of the app, select the File tab then select the New tab and than select Website. After this a Window is shown than selects Visual C# in your left hand sideband after that select ASP. NET Empty Web Site. After that give an appropriate location and name to your web site.

Adding a web Form to your Empty Web Site.

To add a web form to your empty web site right-click on the name of your project and select Add then Add New Item and than select web form; give an appropriate name to your web form. Now add a web form to your Empty Web Site.

Adding a calendar control:

There are two ways to add a calendar control to your website. The first one is to simply drag and drop the control to your form or double-click on the calendar control. And the second one is to write the code of the calendar control.

Coding

Write the following code in your HTML page:

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

Customize the Property of Calendar control:

Select Monday or whatever day you want the calendar to start in the FirstDayOfWeek Property Window.Select ShortMonth or any other you want from the NextPrevFormet. At the bottom seect WeekendDayStyle and choose any background color for Saturday and Sunday.

Now Create a table in the database in which we insert the holidays dates.

Creation of table:

create table holidays(dates date,holidays varchar(25))

Inserting Dates:

insert into holidays

select '2012-01-26','republic day'union all

SELECT '2012-10-23','Novemy'union all

select '2012-08-15','indepandenceday'union all

select '2012-10-24','vijaydasmi' 

Output:
 

Now write the following code in your .Aspx.cs form.

First of all add two namespaces which are given at the last System.Data and System.Data.SqlClient by the Using Keyword.

using System;

using System.Collections.Generic;

using System.Drawing;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Data;

using System.Data.SqlClient;

 

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

{

    SqlConnection con = new SqlConnection("server=.;database=mcnsolutions;uid=sa;pwd=wintellect");//for connection

    SqlDataAdapter da;

    DataSet ds = new DataSet();

    protected void Page_Load(object sender, EventArgs e)

    {

        da = new SqlDataAdapter("select * from holidays", con);

        da.Fill(ds);//we fill dataset ds from all the data of holidays table

    } 

    protected void Calendar1_SelectionChanged(object sender, EventArgs e)

    {

 

    }

    protected void Calendar1_DayRender(object sender, DayRenderEventArgs e)

    {

        for (int i = 0; i <= ds.Tables[0].Rows.Count - 1; i++)

        {

            if (ds.Tables[0].Rows[i].ItemArray.Contains(e.Day.Date))

            {

                if (e.Day.Date.DayOfWeek == DayOfWeek.Saturday || e.Day.Date.DayOfWeek == DayOfWeek.Sunday)

                {

                    e.Cell.ToolTip = ds.Tables[0].Rows[i][1].ToString();

                }

                else

                {

                    e.Cell.ForeColor = Color.White;

                    e.Cell.BackColor = Color.Red;

                    e.Cell.ToolTip = ds.Tables[0].Rows[i][1].ToString();//for tooltip

                }

            }

        }

    }

}

Output:

Summary

In this app I described how to customize the calendar control in ASP.Net in Visual Studio 2012. I hope this article has helped you to understand this topic. Please share if you know more about this. Your feedback and constructive contributions are welcome.