Calendar Control In ASP.NET

Here, I am explaining about Calendar Control with an example of how to retrieve birthdates from the database and display the birthday on a calendar control highlighted with a birthday image, and when we click on a specific date how to have it display the birthday of a specific person. So we will follow the method step by step.

Step 1

  • We have to create a database and a table so here I took an example of contact information.

  • Open the SQL Server management studio.

  • Create a database. Here, I took an example of database, “Sample database,” and an example of table is “Contacts”.



  • Now we insert some records for demo purposes.

Step 2

  • Now we have to create aspx page so for this, open visual studio.

  • Go to the new option and select the new website.

  • Chose an “ASP.NET Empty Web Site” and give a solution name so for example I took an example “CalendarExample”.



  • Right click on the solution explorer and go to Add option and select Add New Item option and select web form and click Add option.



  • Here I have created an image folder for adding some birthday images.

Step 3

Now we have to add a connection string in web.config file so for this open the web.confi file and set the connection string.

  1. <connectionStrings>   
  2.    <add name="conStr"connectionString="Server=mithilesh;Database=sampledatabase; User Id=sa; password=Password" providerN   ame="System.Data.SqlClient" />   
  3. </connectionStrings>  
Step 4
  • After Adding the connection string first we have to design my web page according to my requirement so here I took a Calendar control and a gridview for displaying the record of contact information.
    1. <div align="center">  
    2.     <h2 style="text-align:center;border:2px solid aqua;background-color:green;color:white">Birthday Calendar View</h2>  
    3.     <asp:Calendar ID="Calendar1" runat="server" ShowGridLines="True" Width="850px" OnDayRender="Calendar1_DayRender" OnSelectionChanged="Calendar1_SelectionChanged" BackColor="#FFFFCC" BorderColor="#FFCC66" BorderWidth="3px" DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="12pt" ForeColor="#663399" Height="400px">  
    4.         <DayHeaderStyle BackColor="#FFCC66" Font-Bold="True" Height="1px" />  
    5.         <NextPrevStyle Font-Size="19pt" ForeColor="#FFFFCC" />  
    6.         <OtherMonthDayStyle ForeColor="#CC9966" />  
    7.         <SelectedDayStyle BackColor="#CCCCFF" Font-Bold="True" />  
    8.         <SelectorStyle BackColor="#FFCC66" />  
    9.         <TitleStyle BackColor="#990000" Font-Bold="True" Font-Size="19pt" ForeColor="#FFFFCC" />  
    10.         <TodayDayStyle BackColor="#FFCC66" ForeColor="White" />  
    11.     </asp:Calendar>  
    12.     <br />  
    13.     <asp:GridView ID="GridView1" runat="server" Caption="Birthday Event Details" Width="700px" AutoGenerateColumns="false" CellPadding="5" ForeColor="#333333" GridLines="Both">  
    14.         <Columns>  
    15.             <asp:BoundField HeaderText="Id" DataField="Id" />  
    16.             <asp:BoundField HeaderText="First Name" DataField="FirstName" />  
    17.             <asp:BoundField HeaderText="Last Name" DataField="LastName" />  
    18.             <asp:BoundField HeaderText="Date of Birth" DataField="DateOfBirth" />  
    19.             <asp:TemplateField>  
    20.                 <ItemTemplate>  
    21.                     <asp:LinkButton ID="btnclick" runat="server" Text='<%#Eval("EmailId") %>'></asp:LinkButton>  
    22.   
    23.                 </ItemTemplate>  
    24.             </asp:TemplateField>  
    25.             <asp:BoundField HeaderText="Mobile No" DataField="MobileNo" />  
    26.         </Columns>  
    27.         <HeaderStyle BackColor="#990000" Font-Bold="true" ForeColor="White" />  
    28.         <RowStyle BackColor="#FFFBd6" ForeColor="#333333" />  
    29.         <AlternatingRowStyle BackColor="White" />  
    30.     </asp:GridView>  
    31. </div>  
  • Now we have to write the logic for retrieving the birthday details, so for this right click on design page and select view code.

  • Here I added two namespaces, Data and Data.SqlClient

    1. using System;  
    2. using System.Data;  
    3. using System.Data.SqlClient;  
    4. using System.Configuration;  
    5. public partial class CalanderExam2: System.Web.UI.Page  
    6. {  
    7.     SqlConnection con = null;  
    8.     SqlDataAdapter da = null;  
    9.     DataSet ds = null;  
    10.     string strSqlCommand = string.Empty;  
    11.     protected void Page_Load(object sender, EventArgs e)  
    12.     {  
    13.         con = newSqlConnection(ConfigurationManager.ConnectionStrings["conStr"].ConnectionString);  
    14.     }  
    15.     protected void Calendar1_DayRender(object sender, DayRenderEventArgs e)  
    16.     {  
    17.         strSqlCommand = "Select * from Contacts";  
    18.         da = new SqlDataAdapter(strSqlCommand, con);  
    19.         ds = new DataSet();  
    20.         da.Fill(ds, "Contacts");  
    21.         DataTable dt = ds.Tables["Contacts"];  
    22.         DataRowCollection drc = dt.Rows;  
    23.         if (drc.Count > 0)  
    24.         {  
    25.             Literal literal1 = new Literal();  
    26.             literal1.Text = "<br/>";  
    27.             e.Cell.Controls.Add(literal1);  
    28.             foreach(DataRow dr in drc)  
    29.             {  
    30.                 DateTime dtDob = Convert.ToDateTime(dr["DateOfBirth"]);  
    31.                 if (e.Day.Date.Day == dtDob.Day && e.Day.Date.Month == dtDob.Month)  
    32.                 {  
    33.                     e.Cell.BackColor = System.Drawing.Color.Yellow;  
    34.                     e.Cell.ForeColor = System.Drawing.Color.Red;  
    35.                     e.Cell.ToolTip = "Birthday Events";  
    36.                     Image img1 = new Image();  
    37.                     img1.ImageUrl = "image/nuts_cake_2561.bmp";  
    38.                     img1.ToolTip = dr["FirstName"].ToString();  
    39.                     e.Cell.Controls.Add(img1);  
    40.                 }  
    41.             }  
    42.         }  
    43.     }  
    44.     protected void Calendar1_SelectionChanged(object sender, EventArgse)  
    45.     {  
    46.         DateTime dtSeleted = Calendar1.SelectedDate;  
    47.         string strDate = dtSeleted.ToString("dd-MMM");  
    48.         strSqlCommand = "Select * from Contacts Where substring(DateOfBirth,1,6)='" + strDate + "'";  
    49.         da = new SqlDataAdapter(strSqlCommand, con);  
    50.         da.SelectCommand.CommandType = CommandType.Text;  
    51.         ds = new DataSet();  
    52.         da.Fill(ds, "Contacts");  
    53.         GridView1.DataSource = ds.Tables["Contacts"];  
    54.         GridView1.DataBind();  
    55.         GridView1.Caption = "<h3 style='color:green'>Birthday Even Details Of Selected Date i.e" + strDate + "</he>";  
    56.     }  
    57. }  
    58. }  

Step 5

  • Ok, we have finally completed the coding part so now we can run the program and see the output.



  • Here birthday date is automatically highlighted so just click the highlighted date and see the birthday details in GridView control.