Everyone of you is familiar with asp.net calendar control. I am sure you must have used in most of your projects. Working on my recent SharePoint project , I was required to develop a webpart which is the calendar that displays all the events from the table in the corresponding cell of the calendar control. Though there are many third party controls are available to do this job by setting the few properties here and there. But in this case my client had a limited budget (Indeed it is the fact the enterprises are shrinking their IT budgets), so he told me to use something that is readily available with some programming efforts. As the famous saying goes “THE CLIENT IS ALWAYS RIGHT” , I have to do whatever he had proposed. In this short post I shall be sharing my solution with you.
Being Event Management company , the client wanted to display the upcoming events in the calendar. Here are the requirements in brief
- All the date cells of the events should be highlighted with some background color
- When user gets its mouse over on the date cell , a tooltip should be displayed of the title of the event
- When user clicks on the date cell , it should navigate to the details of the event.
Having worked with the calendar control in my past projects , I knew this could be easily achievable. The rich object model of calendar control exposes one of the event called
DayRender. This event gets triggered for each and every date cells that are being rendered in the browser. The DayRenderEventArgs which is the argument of this event add an icing to the cake. This class exposes the cell property , which of TableCell Type. This gives you the power to extend the calendar control by overriding the default render behavior of the date cell. So before diving into the code , let us look at the figure below which shows the Event table definition.
The code of my logic is shown below
protected void Calendar_DayRender(object sender, DayRenderEventArgs e)
List eventList = new List();
evt = eventList.Where(ed => Convert.ToDateTime(ed.EventDate).ToString("dd-MMM-yyyy") == e.Day.Date.ToString("dd-MMM-yyyy")).Select(ev => ev).FirstOrDefault();
if (evt != null)
e.Cell.ToolTip = evt.EventTitle;
e.Cell.ToolTip = null ;
As I am using Linq to SQL in the page load event I retrieve all the events and store them in the session. The reason why I am doing so is that as mentioned above that the DayRender event of the calendar control fires for each and every date cell that is getting rendered on the browser. Hence it is not a good practice to create Linq Datacontext object everytime when the event gets fired this can be a disaster and can affect your application performance. Hence all the database operations are performed on the PageLoad event and the output is stored in the session variable. Then using the Linq Lambda expressions I find whether the date that is getting rendered is matching to my event date. If I find the matching record I override the default behaviour of that cell date.
Download the sample code. Please rename the file extension from .doc to .rar