Introduction

Tracking anything in dates is one of the common requirement now a days. Tracking events, project milestones, tracking history, tracking schedule etc etc. It was quite a complex job until the wonderful Calendar Control of ASP.NET 2.0. It is one of the Standard Server Side Web Control of ASP.NET 2.0, which when used properly can help in accomplishing the varoius requirements, tracking being one of them. Here we are going to see how can this Calendar control can help us in tracking the events

One of best ways in which events can be displayed is by displaying the events by month. What it basically means is - display the complete month and display the events against each date. Here is how our Event Calendar is going to look like :
[IMG]file:///C:/DOCUME%7E1/SUNDER/LOCALS%7E1/TEMP/moz-screenshot.jpg[/IMG]

It is quite simple and straight forward. ASP.NET Calendar control posses an event "DayRender" which has got "DayRenderEventArgs" as one of the parameters. This DayRenderEventArgs has got two very useful things - Day and Cell. Day is of the type "CalendarDay" and Cell is f the type "TableCell". Day can help us in identifying the day, date etc which it is going to render and Cell gives us handle to the table cell corresponding to that day. Now since we have handle to Table Cell of displaying Date, we can play with it to cater to our needs. For event Calendar we are simply going to use this event to add the event details in the Table Cells associated with the dates.

CalendarDay d = ((DayRenderEventArgs)e).Day;
TableCell c = ((DayRenderEventArgs)e).Cell;

if ( !d.IsOtherMonth )
c.Controls.Add(new LiteralControl(dr["EventDetails"].ToString()));


And thats it, we are done.

If we are aware that we are going to use the same functionality again and again, it is better to make it a re-usable component. So here, we are going to extend the capabilities of basic ASP.NET 2.0 Calendar control. The basic requirement of data driven applications is that source of information basically is data store. It can be database, XML File, Excel or anything for that matter. Here we are going to limit our scope and going to implement the EventCalendar with ADO.NET DataTable as the source of data. Let us see the ingredients of this calendar control

1. A class which extends System.Web.UI.WebControls.Calendar

2. The necessary properties :
EventSource : DataTable with Event Details,
EventStartDateColumnName : ColumnName of the Column of the type DateTime in the EventSource, which stores the Start Date associated with Events
EventEndDateColumnName : ColumnName of the Column of the type DateTime in the EventSource, which stores the End Date associated with Events
EventHeaderColumnName : ColumnName of the Column of the type String in the EventSource, which stores the Event Header,
EventDescriptionColumnName: ColumnName of the Column of the type String in the EventSource, which stores the Event Detailed Description,
ShowDescriptionAsToolTip : Boolean to determine whether to display Event Description as Tool Tip or not.
EventForeColor: ColumnName of the Column to specify the Fore ( Font ) Color for the event. We can specify any Color Name which belongs to System.Drawing.Color namespace.
EventBackColor: ColumnName of the Column to specify the Back Color for the event.We can specify any Color Name which belongs to System.Drawing.Color namespace.

3. EventCalendarDayRender Event : Place where the actual logic to show the events in Calendar is implemented

This describes the skeleton for your EventCalendar Class. Refer to the EventCalendar.cs class in the attached demo for complete implementation. By extending the control in such way we can keep the basic features provided along with the new features/capabilities that we need to cater to our requirements.

ASP.NET Controls are undergoing development and continuous evolution with each release, ASP.NET 2.0 Controls are no exception. These controls not only getting smarter and smarter, but also giving a developer better handle to its basic buidling blocks like TableCell of Calendar Control.

Please spare some time to rate and provide feedback about this article. Your couple of minutes can help in enhancing the quality of this article.

Dounload the Attached File ....

Attached Files

EventCalendar_demo.zip (42.3 KB, 19 views)

Gud job ! Sundaram..

hi,

Please how can I add different colors to calendar events per row, while I retreiving each row from database, so that I can diffrenciate between events;
Like this way, I am getting this error when I am trying to add a row to the calendar by giving it a specific color.
"CS0200: Property or indexer 'System.Data.DataRowCollection.this[int]' cannot be assigned to -- it is read only"
the error is at this line: Calendar1.EventSource.Rows[j]=dr;
Please a help!!!!

///////////////////////////////////////////////////////////////////////////////////////
int j=0;
// Yesterday's Events
j++;
dr = dt.NewRow();
dr["Id"] = idCount++;
dr["EventStartDate"] = DateTime.Now.AddDays(-1);
dr["EventEndDate"] = DateTime.Now.AddDays(-1);
dr["EventHeader"] = "My Yesterday's Single Day Event";
dr["EventDescription"] = "My Yesterday's Single Day Event Details";
dt.Rows.Add(dr);
Calendar1.BackColor=Red;
Calendar1.EventSource.Rows[j]=dr;
// Three Day's Event Starting Tomorrow
dr = dt.NewRow();
dr["Id"] = idCount++;
dr["EventStartDate"] = DateTime.Now.AddDays(1);
dr["EventEndDate"] = DateTime.Now.AddDays(+3);
dr["EventHeader"] = "My Three Days Event";
dr["EventDescription"] = "My Three Days Event Details, which starts tomorrow";
dt.Rows.Add(dr);
Calendar1.BackColor=Red;
Calendar1.EventSource.Rows[j]=dr;
//////////////////////////////////////////////////////////////////////////////////////

Regards

M.Ramesh

Added the Support for the Fore Color and back Color. You can refer to the attached Demo for the same.

Thanks,

Sundaram.M

Thanks Sundaram,

I gave the heading field a backgound & forecolor at the instance I want as random turn, also it works this way without adding the EventBackColor or EventForeColor into calendar component.



Regards,

M.Ramesh

Hi

I was able to set event style by replacing the "<br />" tag in the EventCalendarDayRender event handler with a div tag like this "<div class=\"" + EventDivStyle + "\">", where EventDivStyle is a new property I added to the EventCalendar class.

Then you can set the EventDivStyle property of the control to a div css style.

__________________
J.Saravanan

Yes we can do it that way as well. The reason why Event level Back ground and Fore Color has been introduced is - I wanted to keep it very simple , keep the Event standardised and thus kept then implementation away from the Developer.

Thanks

M.Sundaram

Well Yes, you can do it that way also. Probably other similar way could be randomising the color and provide that as EventBackColor and EventForeColor for every Event.

Thanks ,

M.Sundaram