Introduction

Adding a calendar in ASP.NET and displaying it in a webpage was the simplest task for us. Now in this article, we will learn how to add events in a specific day as well as the description for that event. Sometimes you can see after clicking the day and get all the information about that day event. In this article, we will see those days with events with a different color. We may add any other CSS as per your interest. There is an image of the calendar below, in this image we can see a simple calendar and every day with event information, I tried to make something like that.

calendar

There are the following two flavors for adding an event in a calendar:

Add Event day and description manually at code behind

For this flavor, we need to use a few simple steps.

Step 1

Add a project as in the following:

Step1

Step 2

Choose an empty Template

step2

Step 3

Add a web form. Right-click on the project in the Solution Explorer, choose Add -> New Item.

step3

Step 4

Provide a nice name to the web form page as in the following:

step4

Step 5

Add a grid view and calendar controls and apply the format

stepX

Step 6

Enable the various events from the calendar control

Step6

Step 7

Adding code to the DayRender event

  1. DataRow[] rows = socialEvents.Select(
  2. String.Format(
  3. "Date >= #{0}# AND Date < #{1}#",
  4. e.Day.Date.ToShortDateString(),
  5. e.Day.Date.AddDays(1).ToShortDateString()
  6. )
  7. );
  9. foreach (DataRow row in rows)
  10. {
  11. System.Web.UI.WebControls.Image image;
  12. image = new System.Web.UI.WebControls.Image();
  13. image.ToolTip = row["Description"].ToString();
  14. e.Cell.BackColor = Color.Wheat;
  15. }

Step 8

Add code to the SelectionChanged event as in the following:

  1. System.Data.DataView view = socialEvents.DefaultView;
  2. view.RowFilter = String.Format(
  3. "Date >= #{0}# AND Date < #{1}#",
  4. Calendar1.SelectedDate.ToShortDateString(),
  5. Calendar1.SelectedDate.AddDays(1).ToShortDateString()
  6. );
  8. if (view.Count > 0)
  9. {
  10. GridView1.Visible = true;
  11. GridView1.DataSource = view;
  12. GridView1.DataBind();
  13. }
  14. else
  15. {
  16. GridView1.Visible = false;
  17. }

Step 9

Call the OnInit method as in the following:

  1. override protected void OnInit(EventArgs e)
  2. {
  3. InitializeComponent();
  4. base.OnInit(e);
  5. }
  7. private void InitializeComponent()
  8. {
  9. this.Calendar1.DayRender += new System.Web.UI.WebControls.DayRenderEventHandler(this.Calendar1_DayRender);
  10. this.Calendar1.SelectionChanged += new System.EventHandler(this.Calendar1_SelectionChanged);
  11. this.Load += new System.EventHandler(this.Page_Load);
  13. }

Step 10

Press F5 to run the project.

output1

The following is the output when we click on a date with an event:

output2

Adding all event days with description from database

For this flavor we need to follow up to step 6 from the previous flavor.

After following all six steps then use the following additional steps.

Step 1

Add another webpage and provide a nice name.

Step 2

Make a design in a .aspx page for adding the date and description into the database.

Step2_2


Step 3

Make a table having 3 fields (ID, EventDate and EventDescription).

step3_3

Step 4

Insert data into the table as in the following:

  1. DateTime d = Convert.ToDateTime(TextBox1.Text);
  2. string desc = TextBox2.Text;
  3. SqlConnection con = new SqlConnection("Data Source=.;Initial Catalog=Practice;User ID=sa;Password=***********");
  4. con.Open();
  5. SqlCommand cmd = new SqlCommand("insert into Calender values('"+d+"','"+desc+"') ", con);
  6. int x=cmd.ExecuteNonQuery();
  7. if(x==0)
  8. {
  10. lbl.ForeColor = System.Drawing.Color.Red;
  11. lbl.Text = "There is no any row affected in the database";
  12. }
  13. else
  14. {
  15. lbl.ForeColor = System.Drawing.Color.GreenYellow;
  16. lbl.Text=x+ " - Record is inserted successfully";
  17. }

Step 5

Bind the table data into the calendar.

  1. protected void Page_Load(object sender, EventArgs e)
  2. {
  3. BuildSocialEventTable();
  4. }
  6. private void BuildSocialEventTable()
  7. {
  8. SqlConnection con = new SqlConnection("Data Source=.;Initial Catalog=Practice;User ID=sa;Password=************");
  9. con.Open();
  10. SqlDataAdapter sda = new SqlDataAdapter("select EventDate,EventDesc FROM Calender", con);
  11. DataSet ds = new DataSet();
  12. sda.Fill(ds);
  13. socialEvents=ds.Tables[0];
  14. }
  16. private void Calendar1_DayRender(object sender, DayRenderEventArgs e)
  17. {
  18. DataRow[] rows = socialEvents.Select(
  19. String.Format(
  20. "EventDate >= #{0}# AND EventDate < #{1}#",
  21. e.Day.Date.ToShortDateString(),
  22. e.Day.Date.AddDays(1).ToShortDateString()
  23. )
  24. );
  26. foreach (DataRow row in rows)
  27. {
  28. System.Web.UI.WebControls.Image image;
  29. image = new System.Web.UI.WebControls.Image();
  30. image.ImageUrl = this.ResolveUrl("Dot.jpg");
  31. image.ToolTip = row["EventDesc"].ToString();
  32. // e.Cell.Controls.Add(image);
  33. e.Cell.BackColor = Color.Wheat;
  34. }
  35. }
  37. private void Calendar1_SelectionChanged(object sender, System.EventArgs e)
  38. {
  39. System.Data.DataView view = socialEvents.DefaultView;
  40. view.RowFilter = String.Format(
  41. "EventDate >= #{0}# AND EventDate < #{1}#",
  42. Calendar1.SelectedDate.ToShortDateString(),
  43. Calendar1.SelectedDate.AddDays(1).ToShortDateString()
  44. );
  46. if (view.Count > 0)
  47. {
  48. DataGrid1.Visible = true;
  49. DataGrid1.DataSource = view;
  50. DataGrid1.DataBind();
  51. }
  52. else
  53. {
  54. DataGrid1.Visible = false;
  55. }
  56. }
  57. private DataTable socialEvents;

Step 6

The following is the final output.

Output1_1

The following is the output when we click on a date:

output2_2

Summary

In this article, we saw how to use a calendar control in ASP.NET and add an event in a specific date with description in the calendar. We have also seen the binding date event in the calendar from a database. Thanks for reading my article.