Click here to Skip to main content
Click here to Skip to main content

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

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.

License

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.

Comments and Discussions

 
QuestionStart date & End date Column PinmemberMember 11107171-Sep-13 5:50 
AnswerRe: Start date & End date Column PinmemberMember 11107171-Sep-13 5:50 
QuestionWindows Form Version PinmemberSajadR10-Jul-12 5:20 
GeneralMy vote of 5 Pinmembermanoj kumar choubey17-Feb-12 21:47 
QuestionLatest version of the dll PinmemberHMAMOUCHI6-Jan-12 0:37 
Question2 or more date blocks same Name PinmemberAndrew Mundell27-Oct-11 0:22 
Questionno display PinmemberRaShAkA24-Aug-11 21:43 
GeneralMy vote of 1 Pinmembermaruthipuligandla1-Jun-11 2:17 
GeneralLatest dll please PinmemberMember 415757322-Apr-11 15:57 
GeneralRe: Latest dll please Pinmemberleighgarner3-May-11 11:08 
GeneralError Rendering Control PinmemberSkywalker1111-Apr-11 21:09 
GeneralMy vote of 4 Pinmemberdigjam94229-Mar-11 19:58 
QuestionNew enhancements in new dll ? Pinmembercrescendo3127-Jan-11 1:10 
Generalnew dll please PinmemberDan Rouillard12-Jan-11 4:42 
Generalnewest dll PinmemberKomindodr20007-Jan-11 12:01 
GeneralNew source and dll Pinmemberkaradas5-Dec-10 22:00 
QuestionStart Date and End Date Pinmemberkaradas5-Dec-10 21:41 
GeneralSource Pinmemberkaradas5-Dec-10 1:40 
Questionhow to add two overlapping events Pinmembertarun_jeet11-Nov-10 6:36 
GeneralNew dll PinmemberMember 40952655-Nov-10 8:15 
GeneralPlease send new dll Pinmemberpadierna29-Oct-10 12:45 
Generalplease new dll Pinmemberki_ko26-Oct-10 4:50 
QuestionCan anyone sent me the new dll? celso.coelho@zeone.pt tanks. Pinmembercelsocoelho26-Sep-10 3:44 
GeneralNeed new dll please Pinmemberciapal28-Jun-10 21:34 
Generalhelp Pinmemberrmtlsdgvsdfg8-Apr-10 7:02 

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

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

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