How to customize display of ASP.Net Calendar

Out of the box ASP.Net Calendar control renders very boring calendar with dates. This works great if only purpose for using control in your application is to pick some dates for some other action. But if you are looking into making your calendar control to display some more advanced text or display some descriptive and informative text on dates to show different events that may be taking place on that day, then you have to do some customization of the control. In the image below, you can see that I am using the calendar control to display some important events and actions on certain dates. And I have color coded those events along with an icon being displayed on the left as well.

Custom ASP.Net Calendar Display

The trick is to understand that ASP.Net calendar gets rendered as a HTML table. So what you need is access to each cell of the table. And access is provided to you by DayRender event of Calendar control. You can handle that event and then set the text as you want. Following code snippet shows how to do it.

protected void OnCalendarDayRender(object sender, DayRenderEventArgs e)
{
  if (e.Day.Date.Day % 2 == 0)
  {
     e.Cell.CssClass = "importantdatecell";
     var cellText = new System.Text.StringBuilder(300);
     cellText.AppendFormat("<a href='#'><span class='importantdate'>{0}</span></a>",
      e.Day.Date.Day);
     cellText.AppendFormat("<span class='{0}'>{1}</span>", 
       "meetingdateevent", "Meeting Today");
     if (e.Day.Date.Day % 4 == 0)
     {
       cellText.AppendFormat("<span class='{0}'>{1}</span>", 
        "lockdateevent", "Droid Rocks!");
     }
     e.Cell.Text = cellText.ToString();
   }
   else
   {
      e.Cell.CssClass = "regulardatecell";
   }
 }

The only problem you are going to run with this approach is that you will have to manage PostBack implementation on click by your self. You can see from the code snippet that I have addedd the data link as Href tag. This is where you will have to add client side click handle to call __doPostBack function. Or you can handle it anyways you would like to.

This should give you a good starting point on customizing display of ASP.Net Calendar control.