Extending Asp.net Calendar

INTRODUCTION

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.

CLIENT REQUIREMENTS

Being Event Management company , the client wanted to display the upcoming events in the calendar. Here are the requirements in brief

  1. All the date cells of the events should be highlighted with some background color
  2. When user gets its mouse over on the date cell , a tooltip should be displayed of the title of the event
  3. When user clicks on the date cell , it should navigate to the details of the event.

MY APPROACH

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.

Events Table Structure

The code of my logic is shown below

protected void Calendar_DayRender(object sender, DayRenderEventArgs e)
List eventList = new List();
eventList =(List)Session["Events"];
Event evt;
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.Attributes.Add(“bgcolor”, “#faebd7”);

e.Cell.ToolTip = evt.EventTitle;

e.Cell.Attributes.Add(“onclick”, “javascript:goToUrl(‘” + evt.NavigationUrl + “‘)”);

e.Cell.Style.Add(“cursor”, “pointer”);

}

else

{

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.
Another thing that needs to be kept in mind is to set the calendar’s SelectionMode property to None. This is very important to avoid the postbacks on all the dates and user cannot click on any other dates except for the event dates. The event dates also that he clicks , the navigation happens through JavaScript and no postbacks happen.

CLOSURE

According to me the difference between average asp.net developer and smart asp.net developer is the knowledge of Javascript and Css. These two skills can make you distinct and you can do wonders in your application. You can even roll out your own custom controls library. Think about it.
Download the sample code. Please rename the file extension from .doc to .rar

Advertisements

One thought on “Extending Asp.net Calendar

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s