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.

<connectionStrings>
   <add name="conStr"connectionString="Server=mithilesh;Database=sampledatabase; User Id=sa; password=Password" providerN   ame="System.Data.SqlClient" />
</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.
  

  <div align="center">
      <h2 style="text-align:center;border:2px solid aqua;background-color:green;color:white">Birthday Calendar View</h2>
      <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">
          <DayHeaderStyle BackColor="#FFCC66" Font-Bold="True" Height="1px" />
          <NextPrevStyle Font-Size="19pt" ForeColor="#FFFFCC" />
          <OtherMonthDayStyle ForeColor="#CC9966" />
          <SelectedDayStyle BackColor="#CCCCFF" Font-Bold="True" />
          <SelectorStyle BackColor="#FFCC66" />
          <TitleStyle BackColor="#990000" Font-Bold="True" Font-Size="19pt" ForeColor="#FFFFCC" />
          <TodayDayStyle BackColor="#FFCC66" ForeColor="White" />
      </asp:Calendar>
      <br />
      <asp:GridView ID="GridView1" runat="server" Caption="Birthday Event Details" Width="700px" AutoGenerateColumns="false" CellPadding="5" ForeColor="#333333" GridLines="Both">
          <Columns>
              <asp:BoundField HeaderText="Id" DataField="Id" />
              <asp:BoundField HeaderText="First Name" DataField="FirstName" />
              <asp:BoundField HeaderText="Last Name" DataField="LastName" />
              <asp:BoundField HeaderText="Date of Birth" DataField="DateOfBirth" />
              <asp:TemplateField>
                  <ItemTemplate>
                      <asp:LinkButton ID="btnclick" runat="server" Text='<%#Eval("EmailId") %>'></asp:LinkButton>
  
                  </ItemTemplate>
              </asp:TemplateField>
              <asp:BoundField HeaderText="Mobile No" DataField="MobileNo" />
          </Columns>
          <HeaderStyle BackColor="#990000" Font-Bold="true" ForeColor="White" />
          <RowStyle BackColor="#FFFBd6" ForeColor="#333333" />
          <AlternatingRowStyle BackColor="White" />
      </asp:GridView>
  </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
  
  

  using System;
  using System.Data;
  using System.Data.SqlClient;
  using System.Configuration;
  public partial class CalanderExam2: System.Web.UI.Page
  {
      SqlConnection con = null;
      SqlDataAdapter da = null;
      DataSet ds = null;
      string strSqlCommand = string.Empty;
      protected void Page_Load(object sender, EventArgs e)
      {
          con = newSqlConnection(ConfigurationManager.ConnectionStrings["conStr"].ConnectionString);
      }
      protected void Calendar1_DayRender(object sender, DayRenderEventArgs e)
      {
          strSqlCommand = "Select * from Contacts";
          da = new SqlDataAdapter(strSqlCommand, con);
          ds = new DataSet();
          da.Fill(ds, "Contacts");
          DataTable dt = ds.Tables["Contacts"];
          DataRowCollection drc = dt.Rows;
          if (drc.Count > 0)
          {
              Literal literal1 = new Literal();
              literal1.Text = "<br/>";
              e.Cell.Controls.Add(literal1);
              foreach(DataRow dr in drc)
              {
                  DateTime dtDob = Convert.ToDateTime(dr["DateOfBirth"]);
                  if (e.Day.Date.Day == dtDob.Day && e.Day.Date.Month == dtDob.Month)
                  {
                      e.Cell.BackColor = System.Drawing.Color.Yellow;
                      e.Cell.ForeColor = System.Drawing.Color.Red;
                      e.Cell.ToolTip = "Birthday Events";
                      Image img1 = new Image();
                      img1.ImageUrl = "image/nuts_cake_2561.bmp";
                      img1.ToolTip = dr["FirstName"].ToString();
                      e.Cell.Controls.Add(img1);
                  }
              }
          }
      }
      protected void Calendar1_SelectionChanged(object sender, EventArgse)
      {
          DateTime dtSeleted = Calendar1.SelectedDate;
          string strDate = dtSeleted.ToString("dd-MMM");
          strSqlCommand = "Select * from Contacts Where substring(DateOfBirth,1,6)='" + strDate + "'";
          da = new SqlDataAdapter(strSqlCommand, con);
          da.SelectCommand.CommandType = CommandType.Text;
          ds = new DataSet();
          da.Fill(ds, "Contacts");
          GridView1.DataSource = ds.Tables["Contacts"];
          GridView1.DataBind();
          GridView1.Caption = "<h3 style='color:green'>Birthday Even Details Of Selected Date i.e" + strDate + "</he>";
      }
  }
  }

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.