甘特图 / 事件日历 / 日历计划器

• 下载源代码 - 12.1 Kb
• 下载演示项目 - 17.1 Kb

引言

EventCalendar 控件是一个非复合 Web 控件，它创建一个甘特风格的日历视图，按季度显示。事件在左侧窗格中详细说明，右侧窗格则将事件显示为水平日历上的条带。您可以在这些条带上添加超链接，将用户引导到另一个文档。右侧窗格是可滚动的。事件可以分组显示，并在其事件上方高亮显示。该控件接收 XML 数据来表示事件。

我接到一个慈善机构的请求，要求开发这个工具来帮助项目协调，让大家了解彼此的进展。该网站允许人们在一个 Web 表单中输入事件详情，然后根据“业务计划”进行分组显示。事件存储在 MS SQL 服务器中。通过一个包含表和数据关系的 DataSet，很容易从数据库中提取数据并将其格式化为 Calendar Control 所需的分层 XML，然后使用 DataSet 的 GetXml() 方法。

Using the Code

要在您的网站上使用 EventCalendar 控件，您需要通过右键单击控件，选择“自定义工具箱”，选择“.NET Framework 组件”选项卡，然后单击浏览按钮，将控件添加到工具箱。导航到 EventCalendarControl.dll。这将将其添加到工具箱中。然后只需将此控件拖放到您想要的位置即可。

之后，您可以在属性窗口中设置控件的 Font 属性为您喜欢的样式。我喜欢 Arial, 8pt。

接下来，在代码隐藏页的 onload 事件中，您需要设置控件的一些属性。

   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：包含日历事件的数据，稍后我会详细介绍其格式。
• BlankGifPath：指向透明 1 X 1 GIF 的网站路径。这是控件正确格式化日历网格所需的路径。我无法在不采用这种常见的 Web 开发技术的情况下，让左右窗格之间的网格正确同步。如果您知道如何实现，请告诉我！
• Year：您希望日历显示的年份。
• Quarter：您希望日历显示的季度（1, 2, 3, 4）。
• BlockColor：这是日历的默认块颜色。您可以在 XML 中为单个组覆盖此颜色。
• ToggleColor：日历将用于分隔周和组的颜色。
• CellHeight：日历网格中单元格的高度。
• CellWidth：日历网格中单元格的宽度。

现在来看 XML

XML 格式非常简单，只有组，组包含块（事件）。每个组都会“分组”一个事件列表。请注意，不管组节点或顶级节点包含什么，我都会使用 // XPath 进行全局搜索。

• 每个组都有节点：name、blockcolor，然后是一系列块节点。
• 每个块包含：name、startdate、enddate 和一个 href。

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>"

假设数据包含在一个数据库中，生成此 XML 的最佳方法是使用一个 DataSet，其中包含两个表：第一个表包含组，第二个表包含块。为 DataSet 添加表关系（表示父子关系），并将 Nested = true，然后对 DataSet 调用 ToXML()，即可神奇地生成所需的嵌套或分层 XML。

关于代码

该控件是一个非复合控件，这意味着它不基于或派生自标准的 Web 控件。有时，当您需要更精细地控制生成的 HTML 时，可以考虑创建此类控件来封装它。这很简单，您只需创建一个“Web 控件库”，然后重写 Render 或 RenderContents 方法。

我还在控件中使用了 JavaScript。该 JavaScript 允许控件调整大小，以便事件日历右侧窗格的滚动条随之调整。JavaScript 在 OnPreRender 事件处理程序中注册。

进一步的工作

使用这段代码，可以很容易地对其进行增强，例如在左侧窗格中添加持续时间，或高亮显示关键路径。