Gantt Chart / Event Calendar / Calendar Planner

• Download source files - 12.1 Kb
• Download demo project - 17.1 Kb

Introduction

EventCalendar control is a non-composite web control the creates a Gantt style calendar viewable by quarter periods. The events are detailed on a left hand pane, while the right hand pane shows the events as strips along a horizontal calendar. You can add a hyperlink on these strips to take the user to another document. The right hand pane is scrollable. The events can be grouped into groups which will be shown highlighted above the groups' events. The control takes in XML data for the events.

I was asked to do this at a charity to help projects co-ordinate and know what everyone else is doing. The website allowed people to enter details of an event on a web form which then got displayed grouped by 'business initiative'. The events were stored in an MS SQL server. It was very easy to pull out the data from the DB and format it into hierarchical XML required by the Calendar Control using a DataSet that contained tables and data relations, and then using the GetXml() method of the DataSet.

Using the Code

To use the EventCalendar control on your website, you will need to add the control into the toolbox by right-clicking it, selecting 'Customize Toolbox', selecting the '.NET Framework Components' tab and then clicking on the browse button. Navigate to the EventCalendarControl.dll. This should add it to the toolbox. Then just drag this control onto the page where you want the control to be.

You can then set the Font property of the control in the properties window to whatever you like. I like Arial, 8pt.

Next in the code behind page, onload event, you will need to set some properties of the control.

   EventCalendarControl1.XMLData = xmlData;
   EventCalendarControl1.BlankGifPath = "trans.gif";
   EventCalendarControl1.Year = 2005;
   EventCalendarControl1.Quarter = 2;
   EventCalendarControl1.BlockColor = "blue";
   EventCalendarControl1.ToggleColor = "#dcdcdc";
   EventCalendarControl1.CellHeight = 15;
   EventCalendarControl1.CellWidth = 15;

• XMLData: is the data that contains the calendar events, I'll go through the format of it later.
• BlankGifPath: is the website path to a transparent 1 X 1 GIF. This is the path required by the control to format the calendar grid properly. I couldn't get the grid to properly synch between the left and right hand panes, without resorting to this common webmaster technique. If anyone can get it working without this, please let me know!
• Year: The year you want the calendar to display.
• Quarter: The quarter you want the calendar to display (1,2,3,4).
• BlockColor: This is the default block color for the calendar. You can override it in the XML for individual groups.
• ToggleColor: This is the color the calendar will use for separating out the weeks and the groups.
• CellHeight: The height of a cell in the calendar grid.
• CellWidth: The width of a cell in the calendar grid.

Now for the XML:

The XML format is very simple, simply groups which contain blocks (events). Each group shows up 'grouping' a list of events. Note that, it doesn't matter what contains the group nodes or the top level nodes, as I'm doing a global search on 'group' using the // XPath.

• Each group has nodes: name, blockcolor and then a list of block nodes.
• Each block contains: name, startdate, enddate and a href.

Example XML:

xmlData = "<NewDataSet>"
   xmlData += "    <group>";
   xmlData += "      <name>Develop Specifications</name>";
   xmlData += "      <blockcolor>#cc66cc</blockcolor>";
   xmlData += "      <block>";
   xmlData += "        <href>activity.aspx?ActID=17</href>";
   xmlData += "        <StartDate>2005-04-10T00:00:00.0000000+01:00</StartDate>";
   xmlData += "        <EndDate>2005-05-10T00:00:00.0000000+01:00</EndDate>";
   xmlData += "        <name>Technical Architecture</name>";
   xmlData += "      </block>";
   xmlData += "      <block>";
   xmlData += "        <href>activity.aspx?ActID=18</href>";
   xmlData += "        <StartDate>2005-04-15T00:00:00.0000000+01:00</StartDate>";
   xmlData += "        <EndDate>2005-05-15T00:00:00.0000000+01:00</EndDate>";
   xmlData += "        <name>Software Architecture</name>";
   xmlData += "      </block>";
   xmlData += "    </group>";
   xmlData += "</NewDataSet>"

Assuming the data is contained in a database, the best way to generate this XML is by using a DataSet that has two tables, the first table containing the groups and then the second table containing the blocks. Adding a table relation to the DataSet (representing the parent-child relationship) with Nested = true, then doing ToXML() on the DataSet magically creates a nested or hierarchical XML as required above.

About the code

The control is a non-composite control which means it's not based on or derived from standard web controls. Sometimes, when you require greater control over what HTML is produced, you may consider creating this type of control to encapsulate it. It's quite easy to do, all you need to do is to create a 'Web Control Library' and then override the Render or RenderContents method.

I had to use some JavaScript too for the control. The JavaScript allows the control to be resized, so that the scrollbar on the right hand pane of the event calendar resizes. The JavaScript is registered in the OnPreRender event handler.

Further work

Using this code, it should be easy to enhance it, so to add, say, duration into the left hand pane or highlight the critical path.