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.