Click here to Skip to main content
13,354,132 members (57,860 online)
Click here to Skip to main content
Add your own
alternative version


308 bookmarked
Posted 9 Jun 2005

Gantt Chart / Event Calendar / Calendar Planner

, 9 Jun 2005
Rate this:
Please Sign up or sign in to vote.
Scrollable ASP.NET Gantt Chart / Event Calendar / Calendar Planner web control.

Sample Image - EventCalendarControl.jpg


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.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Jean-marc Lai
Technical Lead
United Kingdom United Kingdom
Jean-marc is a IT consultant specializing on the microsoft platform. Jean-marc lives in London, UK.

You may also be interested in...

Comments and Discussions

GeneralRe: Latest dll please Pin
leighgarner3-May-11 12:08
memberleighgarner3-May-11 12:08 
GeneralError Rendering Control Pin
Skywalker1111-Apr-11 22:09
memberSkywalker1111-Apr-11 22:09 
GeneralMy vote of 4 Pin
digjam94229-Mar-11 20:58
memberdigjam94229-Mar-11 20:58 
QuestionNew enhancements in new dll ? Pin
crescendo3127-Jan-11 2:10
membercrescendo3127-Jan-11 2:10 
Generalnew dll please Pin
Dan Rouillard12-Jan-11 5:42
memberDan Rouillard12-Jan-11 5:42 
Generalnewest dll Pin
Komindodr20007-Jan-11 13:01
memberKomindodr20007-Jan-11 13:01 
GeneralNew source and dll Pin
karadas5-Dec-10 23:00
memberkaradas5-Dec-10 23:00 
QuestionStart Date and End Date Pin
karadas5-Dec-10 22:41
memberkaradas5-Dec-10 22:41 
GeneralSource Pin
karadas5-Dec-10 2:40
memberkaradas5-Dec-10 2:40 
Questionhow to add two overlapping events Pin
tarun_jeet11-Nov-10 7:36
membertarun_jeet11-Nov-10 7:36 
GeneralNew dll Pin
Member 40952655-Nov-10 9:15
memberMember 40952655-Nov-10 9:15 
GeneralPlease send new dll Pin
padierna29-Oct-10 13:45
memberpadierna29-Oct-10 13:45 
Generalplease new dll Pin
ki_ko26-Oct-10 5:50
memberki_ko26-Oct-10 5:50 
QuestionCan anyone sent me the new dll? tanks. Pin
celsocoelho26-Sep-10 4:44
membercelsocoelho26-Sep-10 4:44 
GeneralNeed new dll please Pin
ciapal28-Jun-10 22:34
memberciapal28-Jun-10 22:34 
Generalhelp Pin
rmtlsdgvsdfg8-Apr-10 8:02
memberrmtlsdgvsdfg8-Apr-10 8:02 
GeneralNew DLL Pin
Alexsandro Franco1-Mar-10 12:26
memberAlexsandro Franco1-Mar-10 12:26 
GeneralDLL Pin
jdwhite071-Feb-10 5:18
memberjdwhite071-Feb-10 5:18 
GeneralValue cannot be null. Parameter name: s Pin
nourusa7-Jan-10 5:59
membernourusa7-Jan-10 5:59 
Generalplease Interested in new version Pin
delio_aristi16-Nov-09 17:16
memberdelio_aristi16-Nov-09 17:16 
QuestionCan someone please send me the correct dll Pin
_-_hitch_-_15-Oct-09 5:32
member_-_hitch_-_15-Oct-09 5:32 
GeneralMy vote of 1 Pin
bigst30-Sep-09 0:39
memberbigst30-Sep-09 0:39 
RantRe: My vote of 1 Pin
Paul Conrad13-Oct-09 6:50
mvpPaul Conrad13-Oct-09 6:50 
Generalnew link borken also Pin
Deb3177-Sep-09 1:37
memberDeb3177-Sep-09 1:37 
Generalnew link broken Pin
sognant24-Aug-09 3:47
membersognant24-Aug-09 3:47 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.180111.1 | Last Updated 9 Jun 2005
Article Copyright 2005 by Jean-marc Lai
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid