ASP.NET Calendar Control as Outlook Calendar

This is a serious necessity in few applications where you want to show the appointments over a calendar. Though most of us are not aware, ASP.net calendar provides an easier way to deal with this. In this tip I am going to show how we can use a ASP.NET Calendar control as Outlook Calendar.

In our sample I have created a class "Schedule" with a "EngagementTime" and "Description" as property and the collection will depict appointments I have over the calendar. I have written a method which will create few mock data which I will use for binding.

To understand how to customize the calendar control similar to look like an appointments calendar in Outlook, we will need to understand how the control is rendered. An ASP.net calendar is nothing but a table with cells which are days. The Calendar control has an event called "DayRender" which is raised whenever a day is rendered or to put it simple, it is raised whenever a cell for the calendar control is rendered.

A "DayRenderEventArgs" has useful properties like "Cell" which is of Type "TableCell", "Day" which is of type "CalendarDay" (which will help you determining the date it is binding and many other trivial details about what is it inside the calendar” and "SelectUrl" which can be set if you need a different url to which the post back has to be set for that particular cell.

In our example, we have taken the advantage of both “Day” and “Cell” property to find the appointments for that particular day and then use “Cell” to add dynamically created labels which is displays the appointments.

Below is how our render event look like.

        /// <summary>
        /// Handles the DayRender event of the OutlookCalendar control.
        /// </summary>
        /// <param name="sender">The source of the event.</param>
        /// <param name="e">The <see cref="System.Web.UI.WebControls.DayRenderEventArgs"/> instance containing the event data.</param>
        protected void OutlookCalendar_DayRender(object sender, DayRenderEventArgs e)
        {
            try
            {
                if (schedules.Where(item => item.EngagementTime.ToString("d") == e.Day.Date.ToString("d")).Count() > 0)
                {
                    // Get the schedules for the current day
                    List daySchedules = schedules.Where(item => item.EngagementTime.ToString("d") == e.Day.Date.ToString("d")).ToList();
 
                    foreach (Schedule schedule in daySchedules)
                    {
                        Label engagement = new Label();
                        engagement.Text = string.Format("{0:t} - {1}", schedule.EngagementTime, schedule.Description);
 
                        Literal lineBreak = new Literal();
                        lineBreak.Text = "<br />";
 
                        e.Cell.Controls.Add(lineBreak);
                        e.Cell.Controls.Add(engagement);
                        e.Cell.HorizontalAlign = HorizontalAlign.Left;
                    }
 
                    // check if the day has more than 1 appointment and mark as busy if it is.
                    if (daySchedules.Count() > 1)
                    {
                        e.Cell.BackColor = Color.Red;
                        e.Cell.ToolTip = "Busy day.";
                    }
                }
            }
            catch (Exception ex)
            {
                this.HandleException(ex);
            }
        }

If you can look at the code, the “Outlook Calendar” which we have achieved here is one simple application of ASP.net calendar and the functionalities you can achieve using the ASP.net calendar is as much as your imagination.