Showing Date Events in ASP.Net Calendar Control

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.



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

• Add Event day and description manually in code behind
• Adding all event days with a description from the database

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:



Step 2

Choose an empty Template



 Step 3

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



Step 4

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



 Step 5

Add a grid view and calendar controls and apply the format



Step 6

Enable the various events from the calendar control

 

Step 7

Adding code to the DayRender event

DataRow[] rows = socialEvents.Select(
                  String.Format(
                     "Date >= #{0}# AND Date < #{1}#",
                     e.Day.Date.ToShortDateString(),
                     e.Day.Date.AddDays(1).ToShortDateString()
                  )
               );

foreach (DataRow row in rows)
{
    System.Web.UI.WebControls.Image image;
    image = new System.Web.UI.WebControls.Image();
    image.ToolTip = row["Description"].ToString();
    e.Cell.BackColor = Color.Wheat;
}

Step 8

Add code to the SelectionChanged event as in the following:

System.Data.DataView view = socialEvents.DefaultView;
view.RowFilter = String.Format(
                  "Date >= #{0}# AND Date < #{1}#",
                  Calendar1.SelectedDate.ToShortDateString(),
                  Calendar1.SelectedDate.AddDays(1).ToShortDateString()
                  );

if (view.Count > 0)
{
    GridView1.Visible = true;
    GridView1.DataSource = view;
    GridView1.DataBind();
}
else
{
    GridView1.Visible = false;
}

Step 9

Call the OnInit method as in the following:

 

override protected void OnInit(EventArgs e)
{
    InitializeComponent();
    base.OnInit(e);
}

private void InitializeComponent()
{
    this.Calendar1.DayRender += new System.Web.UI.WebControls.DayRenderEventHandler(this.Calendar1_DayRender);
    this.Calendar1.SelectionChanged += new System.EventHandler(this.Calendar1_SelectionChanged);
    this.Load += new System.EventHandler(this.Page_Load);

}

Step 10

Press F5 to run the project.



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

 

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.




Step 3

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



Step 4

Insert data into the table as in the following:

DateTime d = Convert.ToDateTime(TextBox1.Text);
string desc = TextBox2.Text;
SqlConnection con = new SqlConnection("Data Source=.;Initial Catalog=Practice;User ID=sa;Password=***********");
con.Open();
SqlCommand cmd = new SqlCommand("insert into Calender values('"+d+"','"+desc+"') ", con);
int x=cmd.ExecuteNonQuery();
if(x==0)
{

    lbl.ForeColor = System.Drawing.Color.Red;
    lbl.Text = "There is no any row affected in the database";
}
else
{
    lbl.ForeColor = System.Drawing.Color.GreenYellow;
    lbl.Text=x+ " - Record is inserted successfully";
}

Step 5

Bind the table data into the calendar.

protected void Page_Load(object sender, EventArgs e)
{
    BuildSocialEventTable();
}

private void BuildSocialEventTable()
{
    SqlConnection con = new SqlConnection("Data Source=.;Initial Catalog=Practice;User ID=sa;Password=************");
    con.Open();
    SqlDataAdapter sda = new SqlDataAdapter("select EventDate,EventDesc FROM Calender", con);
    DataSet ds = new DataSet();
    sda.Fill(ds);
    socialEvents=ds.Tables[0];
}

private void Calendar1_DayRender(object sender, DayRenderEventArgs e)
{
    DataRow[] rows = socialEvents.Select(
          String.Format(
             "EventDate >= #{0}# AND EventDate < #{1}#",
             e.Day.Date.ToShortDateString(),
             e.Day.Date.AddDays(1).ToShortDateString()
          )
       );

    foreach (DataRow row in rows)
    {
        System.Web.UI.WebControls.Image image;
        image = new System.Web.UI.WebControls.Image();
        image.ImageUrl = this.ResolveUrl("Dot.jpg");
        image.ToolTip = row["EventDesc"].ToString();
        // e.Cell.Controls.Add(image);
        e.Cell.BackColor = Color.Wheat;
    }
}

private void Calendar1_SelectionChanged(object sender, System.EventArgs e)
{
    System.Data.DataView view = socialEvents.DefaultView;
    view.RowFilter = String.Format(
                      "EventDate >= #{0}# AND EventDate < #{1}#",
                      Calendar1.SelectedDate.ToShortDateString(),
                      Calendar1.SelectedDate.AddDays(1).ToShortDateString()
                   );

    if (view.Count > 0)
    {
        DataGrid1.Visible = true;
        DataGrid1.DataSource = view;
        DataGrid1.DataBind();
    }
    else
    {
        DataGrid1.Visible = false;
    }
    }
 private DataTable socialEvents;

Step 6

The following is the final output.

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



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.