<body>
<form id="Form1" runat="server">
<ul class="download">
<li><a href="http://www.codeproject.com/aspnet/schedule/schedule_src.zip">Download
source files - 1036 kB</a></li>
<li><a href="http://www.codeproject.com/aspnet/schedule/schedule_demo.zip">
Download demo files - 109 kB </a></li>
</ul>
<a href="#intro">Introduction</a><br />
<a href="#license">License</a><br />
<a href="#installation">Installation</a><br />
<a href="#usage">How to use</a><br />
<a href="#howitworks">How it works</a><br />
<a href="#pointsofinterest">Points of interest</a><br />
<a href="#future">Future</a><br />
<a href="#history">Update history</a>
<h2>
<a name="intro"></a>Introduction
</h2>
<p>
These are 2 free controls, <strong>ScheduleCalendar</strong> and <strong>
ScheduleGeneral</strong>, designed to show scheduled events in the form of a
table. They are simple versions of the so-called Gantt chart. They don't have
advanced features such as dependencies and milestones, but on the other hand,
they use templated databinding, so it's up to you, the developer, what you want
to show.
</p>
<p>
The controls can be used for a broad variety of applications: time tables,
resource usage planners, calendars, event schedulers, activities, reservations,
sequences, project management, etc... See the demos for some examples.
</p>
<p>
The <b>ScheduleCalendar</b> control for instance will turn this data:
</p>
<table border="1" cellspacing="0">
<thead>
<tr>
<th>
StartTime</th>
<th>
EndTime</th>
<th>
EventDate</th>
<th>
Task</th>
</tr>
</thead>
<tr>
<td align="right">
9:00</td>
<td align="right">
11:00</td>
<td align="right">
3/8/2004</td>
<td>
History</td>
</tr>
<tr valign="top">
<td align="right">
9:00</td>
<td align="right">
10:00</td>
<td align="right">
3/9/2004</td>
<td>
Math</td>
</tr>
<tr valign="top">
<td align="right">
10:00</td>
<td align="right">
11:00</td>
<td align="right">
3/9/2004</td>
<td>
Biology</td>
</tr>
<tr valign="top">
<td align="right">
11:00</td>
<td align="right">
12:00</td>
<td align="right">
3/9/2004</td>
<td>
History</td>
</tr>
<tr valign="top">
<td align="right">
9:00</td>
<td align="right">
10:00</td>
<td align="right">
3/10/2004</td>
<td>
Geology</td>
</tr>
<tr valign="top">
<td align="right">
10:00</td>
<td align="right">
12:00</td>
<td align="right">
3/10/2004</td>
<td>
Math</td>
</tr>
<tr valign="top">
<td align="right">
9:00</td>
<td align="right">
10:00</td>
<td align="right">
3/11/2004</td>
<td>
Economy</td>
</tr>
<tr>
<td align="right">
10:00</td>
<td align="right">
12:00</td>
<td align="right">
3/11/2004</td>
<td>
Literature</td>
</tr>
<tr valign="top">
<td align="right">
9:00</td>
<td align="right">
12:00</td>
<td align="right">
3/12/2004</td>
<td>
Sports</td>
</tr>
<tr>
<td align="right">
9:00</td>
<td align="right">
11:00</td>
<td align="right">
3/15/2004</td>
<td>
History</td>
</tr>
<tr valign="top">
<td align="right">
9:00</td>
<td align="right">
10:00</td>
<td align="right">
3/16/2004</td>
<td>
Math</td>
</tr>
<tr valign="top">
<td align="right">
10:00</td>
<td align="right">
11:00</td>
<td align="right">
3/16/2004</td>
<td>
Biology</td>
</tr>
<tr valign="top">
<td align="right">
11:00</td>
<td align="right">
12:00</td>
<td align="right">
3/16/2004</td>
<td>
History</td>
</tr>
<tr valign="top">
<td align="right">
9:00</td>
<td align="right">
10:00</td>
<td align="right">
3/17/2004</td>
<td>
Geology</td>
</tr>
<tr valign="top">
<td align="right">
10:00</td>
<td align="right">
12:00</td>
<td align="right">
3/17/2004</td>
<td>
Math</td>
</tr>
<tr valign="top">
<td align="right">
9:00</td>
<td align="right">
10:00</td>
<td align="right">
3/18/2004</td>
<td>
Economy</td>
</tr>
<tr>
<td align="right">
10:00</td>
<td align="right">
12:00</td>
<td align="right">
3/18/2004</td>
<td>
Literature</td>
</tr>
<tr valign="top">
<td align="right">
9:00</td>
<td align="right">
12:00</td>
<td align="right">
3/19/2004</td>
<td>
Sports</td>
</tr>
<tfoot>
</tfoot>
</table>
<p>
into this presentation:
</p>
<p>
<img border="0"
src="schedule/demo1.gif" />
</p>
<p>
The other control is the <strong>ScheduleGeneral</strong>. Here you can provide
your own titles (you may think of people, resources or location names). Here's
an example with TV stations:
</p>
<p>
<img border="0"
src="schedule/demo3.gif" />
</p>
<p>
Automatically, overlapping events will cause extra rows or columns to be added
to the table, enabling them to be shown correctly.
</p>
<p>
Overlapping items:<br />
<img border="0"
src="schedule/overlapping.gif" />
</p>
<p>
The controls are written in VB.NET, but they can be used in any ASP.NET
application. You may need to slightly adapt some of the sample code below to
match the language used in your application.
</p>
<p>
The controls require at least ASP.NET 2.0 and support declarative databinding and smart tags.
They come with a documentation file "documentation2.chm".
</p>
<p>
<a href="http://www.rekenwondersoftware.com/aspnet/demosite.aspx"
target="_blank">Try the online demo</a>
</p>
<h2>
<a name="license"></a>License</h2>
<p>
The controls are free and open source under the
<a href="http://www.gnu.org/licenses/lgpl.html" target="_blank">LGPL license</a>.</p>
<h2>
<a name="installation"></a>Installation
</h2>
<h3>
Installing the controls
</h3>
<p>
You can install the controls in the standard way:
</p>
<ul>
<li>create a "bin" folder inside the application root of your website (if it's not
already there) </li>
<li>copy the assembly file schedule2.dll into the bin folder </li>
</ul>
<p>
You may want to add the controls to the toolbox of your editor (e.g. Visual Studio). This will allow you to
easily add them to any ASP.NET page. Follow the editor's procedure to add a control to the toolbox.
</p>
<p>
In order to support IntelliSense in HTML View in Visual Studio (and to avoid
some compiler warnings):
</p>
<ul>
<li>copy the schedule.xsd file to the folder
<code>C:\Program Files\Microsoft Visual Studio x\Common7\Packages\schemas\xml</code>
</li>
</li>
<li>modify the <code><body></code> tag of any new web form as follows:
<code lang="html"><body xmlns:cc1="urn:http://www.rekenwonder.com/schedule"></code>
where cc1 is the TagPrefix of the schedule control (the one assigned in the
"Register" directive). </li>
</ul>
<h3>
Installing the demos</h3>
<p>
I added a set of simple demo files with inline code, that can be used with Visual
Studio.</p>
<p>
Unzip the zipfile with the demos to a subfolder of the wwwroot folder. Then,
either create a virtual directory for this folder in IIS, or copy the
schedule2.dll file to the bin folder in wwwroot.
For the demo files that's all you have to do. Just call the
first demo page through the address http://localhost/<foldername>/demo1.aspx in
your browser.</p>
<h2>
<a name="usage"></a>Using the controls
</h2>
<h3>
Adding the controls to your page
</h3>
<p>
There are 2 ways to add the controls to your page:</p>
<ol>
<li>Drag the control from the toolbox onto the page (if it was installed on the
toolbox). Be careful to select the correct type: <strong>ScheduleCalendar</strong>
for a weekly calendar schedule, <strong>ScheduleGeneral</strong> for other
schedules. </li>
<li>Add the code manually. Add this line to the top of your page:<pre
lang="asp.net"><%@ Register TagPrefix="rw" Namespace="rw" Assembly="Schedule2" %></pre>
<br />
Then, add a tag like this where you want the schedule to be displayed:
<pre lang="asp.net"><rw:ScheduleGeneral id="Schedule1" runat="server" >
<ItemTemplate>
</ItemTemplate>
</rw:ScheduleGeneral></pre>
Of course, for the calendar version, you use ScheduleCalendar.<br />
<br />
If you're using code-behind, you should also add a reference to the Schedule
instance in your page class, like this:
<pre lang="vb">Protected WithEvents Schedule1 As rw.ScheduleGeneral</pre>
In the code-behind page, also add this import statement:
<pre lang="vb">Imports rw</pre>
</li>
</ol>
<h3>
Setting the control's properties
</h3>
<p>
Make sure you use the appropriate settings.
</p>
<p>
You can use any <code>DataSourceControl</code> for data binding.
Use the smart tag menu to configure this type of data source.</p>
<p>
If you don't use declarative databinding, the <code>DataSource</code> property
should be either an <code>IEnumerable</code> or an <code>IListSource</code>.
You can't databind to a <code>DataReader</code>, since the
control must be able to sort the data internally.
</p>
<p>
For each item on the schedule, the data source should provide a single record
containing a start value, an end value, and custom data (typically a description
of the task or event). For the ScheduleCalendar control when <code>
TimeFieldsContainDate=false</code>, you also need a date value. For the
ScheduleGeneral control you also need a title value (for display on column/row
headers).
</p>
<p>
You need to set 3 properties (similar to the 2 properties <code>DataTextField</code>
and <code>DataValueField</code> that you have to set for a bound ListBox or
CheckBoxList):
</p>
<p>
<b>ScheduleCalendar</b>:
</p>
<ol>
<li><code>StartTimeField</code>: the database field (column) containing the start of
the event </li>
<li><code>EndTimeField</code>: the database field containing the end of the event
</li>
<li><code>DateField</code>: the database field providing the dates. This field
should be of type "Date" (exception: when <code>TimeFieldsContainDate=true
</code>this field is ignored, see below). In a vertical layout, this field will
be used for column titles. In a horizontal layout, it will be used for row
titles. </li>
</ol>
<p>
<b>ScheduleGeneral</b>:</p>
<ol>
<li><code>DataRangeStartField</code>: the database field (column) containing the
start of the event </li>
<li><code>DataRangeEndField</code>: the database field containing the end of the
event </li>
<li><code>TitleField</code>: the database field providing the titles. You can think
of some useful fields for titles: people names, locations, classrooms,
resources, etc...) In a vertical layout, this field will be used for column
titles. In a horizontal layout, it will be used for row titles. </li>
</ol>
<p>
1) and 2) can be thought of as time fields, but in general, any type of sortable
field (such as an integer) will do. Only when <code>TimeFieldsContainDate=true
</code>for the ScheduleCalendar control, they should contain date and time
information, and when <code>FullTimeScale=True</code>, they should contain at
least time information.
</p>
<p>
Note that there is no property to indicate which field contains the "Task" or
"Event" information. Actually, this information can be anything: a field, a
combination of multiple fields, etc... This is possible since the "Task" data is
provided through a databinding expression in the Item template. Its simplest
form would be something like this:</p>
<pre lang="asp.net"><ItemTemplate>
<%# Eval("taskfieldname") %>
</ItemTemplate></pre>
<p>
</p>
<p>
Optionally, you can set the <code>ItemStyleField</code>. When its value is not
blank, the database field with this name will be used as a css style class for
the item. This lets you set the style for each item separately from the data
source.
</p>
<p>
Then, there's the <code>FullTimeScale</code><b> </b>property. When false (the
default value), only range values occurring in the data source are shown. When
true, a continuous time scale is displayed (like the Outlook calendar). For the
ScheduleGeneral control, this requires the <code>DataRangeStartField</code> and
<code>DataRangeEndField</code> fields in the data source to be of type
Date/Time.
</p>
<p>
The image below shows the the same item (Lunch from 12:30 to 13:30) in both
cases:
</p>
<table id="table1" border="0">
<tr>
<td>
<p>
<code>FullTimeScale = false </code>
<table id="table2" border="1">
<tr>
<td bgcolor="#c0c0c0">
12:30</td>
<td bgcolor="#ffffcc">
<p>
Lunch from 12:30 to 13:30</p>
</td>
</tr>
<tr>
<td bgcolor="#c0c0c0">
13:30</td>
<td>
</td>
</tr>
</table>
</p>
</td>
</tr>
</table>
<table border="0">
<tr>
<td>
<p>
<code>FullTimeScale = true and TimeScaleInterval = 15 </code>
<table border="1">
<tr>
<td bgcolor="#c0c0c0">
12:30</td>
<td bgcolor="#ffffcc" rowspan="4">
<p>
Lunch from 12:30 to 13:30</p>
</td>
</tr>
<tr>
<td bgcolor="#c0c0c0">
12:45</td>
</tr>
<tr>
<td bgcolor="#c0c0c0">
13:00</td>
</tr>
<tr>
<td bgcolor="#c0c0c0">
13:15</td>
</tr>
<tr>
<td bgcolor="#c0c0c0">
13:30</td>
<td>
</td>
</tr>
</table>
</p>
</td>
</tr>
</table>
<p>
When <code>FullTimeScale</code> is true, there are 3 additional properties that
you can set:
</p>
<ol>
<li><code>TimeScaleInterval</code>: an integer value giving the number of minutes
for the interval (default=60) </li>
<li><code>StartOfTimeScale</code>: a timespan value setting the start time of the
time scale (default=8:00) </li>
<li><code>EndOfTimeScale</code>: a timespan value setting the end time of the time
scale (default=17:00). The highest value allowed here is 24:00 (midnight), which
should be entered as "1.00:00" (one day, zero hours and minutes). </li>
</ol>
<p>
Two other important properties are <code>IncludeEndValue</code> and <code>
ShowValueMarks</code>. When <code>IncludeEndValue</code> is <code>True</code>,
the row with the end value will be included in the event. Sometimes, this will
result in a more logical presentation. However, when the items are adjacent (for
instance: one event ends at 10:00 AM, and another starts at the same time), it's
better to set <code>IncludeEndValue</code> to <code>False</code>. Otherwise, the
items will be shown as overlapping. In this case, you can also set <code>
ShowValueMarks</code> to <code>True</code>, which will add marks indicating the
values, and the values will be shown in the middle of the item. The default
value is <code>False</code> for both.
</p>
<p>
The image below shows the the same item (Lunch from 12:30 to 13:30) in all
cases:
</p>
<p>
<code>IncludeEndvalue = False and ShowValueMarks = False</code>
<table border="1" bordercolor="Gray" cellspacing="0">
<tr>
<td bgcolor="#c0c0c0">
12:30</td>
<td bgcolor="#ffffcc" rowspan="2">
<p>
Lunch from 12:30 to 13:30</p>
</td>
</tr>
<tr>
<td bgcolor="#c0c0c0">
13:00</td>
</tr>
<tr>
<td bgcolor="#c0c0c0">
13:30</td>
<td>
</td>
</tr>
<tr>
<td bgcolor="#c0c0c0">
14:00</td>
<td>
</td>
</tr>
</table>
</p>
<p>
<code>IncludeEndValue = True (ShowValueMarks is ignored)</code>
<table border="1" bordercolor="Gray" cellspacing="0">
<tr>
<td bgcolor="#c0c0c0">
12:30</td>
<td bgcolor="#ffffcc" rowspan="3">
<p>
Lunch from 12:30 to 13:30</p>
</td>
</tr>
<tr>
<td bgcolor="#c0c0c0">
13:00</td>
</tr>
<tr>
<td bgcolor="#c0c0c0">
13:30</td>
</tr>
<tr>
<td bgcolor="#c0c0c0">
14:00</td>
<td>
</td>
</tr>
</table>
</p>
<p>
<code>IncludeEndValue = False and ShowValueMarks = True </code>
<table border="1" bordercolor="Gray" cellspacing="0">
<tr>
<td bgcolor="#c0c0c0" rowspan="2" style="border-right:none">
12:30</td>
<td bgcolor="#c0c0c0" style="border-left:none">
</td>
<td>
</td>
</tr>
<tr>
<td bgcolor="#c0c0c0" style="border-left:none">
</td>
<td bgcolor="#ffffcc" rowspan="4">
<p>
Lunch from 12:30 to 13:30</p>
</td>
</tr>
<tr>
<td bgcolor="#c0c0c0" rowspan="2" style="border-right:none">
13:00</td>
<td bgcolor="#c0c0c0" style="border-left:none">
</td>
</tr>
<tr>
<td bgcolor="#c0c0c0" style="border-left:none">
</td>
</tr>
<tr>
<td bgcolor="#c0c0c0" rowspan="2" style="border-right:none">
13:30</td>
<td bgcolor="#c0c0c0" style="border-left:none">
</td>
</tr>
<tr>
<td bgcolor="#c0c0c0" style="border-left:none">
</td>
<td rowspan="2">
</td>
</tr>
<tr>
<td bgcolor="#c0c0c0" rowspan="2" style="border-right:none">
14:00</td>
<td bgcolor="#c0c0c0" style="border-left:none">
</td>
</tr>
<tr>
<td bgcolor="#c0c0c0" style="border-left:none">
</td>
<td>
</td>
</tr>
</table>
</p>
<p>
Finally, you may want to add functionality for inserting new items when the user
clicks on an "empty slot" in the schedule. Set the <code>EnableEmptySlotClick</code>
property to true, and handle the <code>OnEmptySlotClick</code> event.
Optionally, set a tooltip for empty slots with the <code>EmptySlotTooltip</code>
property. For samples, see demo1 and demo2.</p>
<p>
For the <b>ScheduleCalendar</b> control, you should set these additional
properties:
</p>
<ul>
<li><code>NumberOfDays</code>: the number of days to show at a time. The default
value is 7, making it a weekly calendar. </li>
<li><code>NumberOfRepetitions</code>: the number of times to repeat the number of
days (the default setting is 1 repetition). When NumberOfDays=7, this is the
number of weeks that will be shown in the control. </li>
<li><code>StartDay</code>: the day of the week to start the calendar. This property
is only used when the NumberOfDays property is set to 7. The default value is
Monday. </li>
<li><code>StartDate</code>: date to start displaying events. If this date is not on
the same day of the week as the StartDay property, the control will start
displaying on the same day prior to the chosen date. The default value is
today's date. See the demos to learn how to set today's date programmatically.
</li>
<li><code>TimeFieldsContainDate</code>: when false (the default), the <code>
DateField</code> property is used to extract dates for each item. This means
that items must start and end on the same day. If some of your items span
midnight, you should set <code>TimeFieldsContainDate </code>to true, and you
should provide a full date and time in both the <code>StartTimeField</code> and
<code>EndTimeField</code> fields. In this case, the <code>DateField</code>
property is ignored. </li>
</ul>
<p>
The <b>ScheduleGeneral</b> control has two additional properties:
</p>
<ul>
<li><code>AutoSortTitles</code>: When true, the titles are sorted automatically,
even when they are not sorted in the data source. When false, you may provide
your own sorting order for the titles, but make sure that the items with the
same titles are grouped together, and that for each title, the items are sorted
on DataRangeStartField first and on DataRangeEndField next. (for example: if you
want to sort on a field called "SortOrder", the DataRangeStartField is
"StartTime", and the DataRangeEndField is "EndTime", use the sorting expression
"ORDER BY SortOrder ASC, StartTime ASC, EndTime ASC") The default value for
<code>AutoSortTitles</code> is true. </li>
<li><code>SeparateDateHeader</code>: When true, an extra range of cells will be
added to group all events of the same date. This requires <code>
DataRangeStartField</code> and <code>DataRangeEndField</code> to be of type
<code>DateTime</code>. The default is False. </li>
</ul>
<table id="table5" border="0">
<tr>
<td>
<p>
<code>SeparateDateHeader=False </code>
<table id="table6" border="1">
<tr>
<td bgcolor="#c0c0c0">
12/9/2004 14:00</td>
<td align="middle" bgcolor="#ffffcc" rowspan="2">
Task 1</td>
</tr>
<tr>
<td bgcolor="#c0c0c0">
12/9/2004 15:00</td>
</tr>
<tr>
<td bgcolor="#c0c0c0">
12/10/2004 14:00</td>
<td align="middle" bgcolor="#ffffcc" rowspan="2">
Task 2</td>
</tr>
<tr>
<td bgcolor="#c0c0c0">
12/10/2004 15:00</td>
</tr>
</table>
</p>
</td>
</tr>
</table>
<table border="0">
<tr>
<td>
<p>
<code>SeparateDateHeader= True</code>
<table border="1">
<tr>
<td bgcolor="#c0c0c0" rowspan="2">
12/9/2004</td>
<td bgcolor="#c0c0c0">
14:00</td>
<td align="middle" bgcolor="#ffffcc" rowspan="2">
Task 1</td>
</tr>
<tr>
<td bgcolor="#c0c0c0">
15:00</td>
</tr>
<tr>
<td bgcolor="#c0c0c0" rowspan="2">
12/10/2004</td>
<td bgcolor="#c0c0c0">
14:00</td>
<td align="middle" bgcolor="#ffffcc" rowspan="2">
Task 2</td>
</tr>
<tr>
<td bgcolor="#c0c0c0">
15:00</td>
</tr>
</table>
</p>
</td>
</tr>
</table>
<p>
For both the ScheduleCalendar and ScheduleGeneral controls, you can easily
switch between a vertical or a horizontal layout with the <code>Layout</code>
property, even at run time.</p>
<h3>
Providing template content
</h3>
<p>
The next step is to add the content of the templates.</p>
<p>
You can right-click on the control to edit the templates, or you can create the
templates in HTML view. Also look at the templates in the demo pages for
samples.</p>
<p>
First of all, you should provide the
</p>
<ul>
<li><code>ItemTemplate</code> </li>
</ul>
<pre lang="asp.net"><ItemTemplate>
<%# Eval("taskfieldname") %>
</ItemTemplate>
</pre>
If you want, you can combine information from several fields in the database.
You can also add controls, images, just like you can in a Repeater or DataList
control.
<p>
The other templates are for the headers. Especially in the case of a time and
date fields, you may want to format the content for proper display.</p>
<p>
For the <b>ScheduleGeneral</b> control:</p>
<ul>
<li><code>TitleTemplate</code> </li>
</ul>
<p>
You just show the data:</p>
<pre lang="asp.net"><TitleTemplate>
<%# Container.DataItem %>
</TitleTemplate></pre>
<ul>
<li><code>RangeHeaderTemplate</code> </li>
</ul>
<p>
Typically, you could display the range header item as a short time:</p>
<pre lang="asp.net"><RangeHeaderTemplate>
<%# Convert.ToDateTime(Container.DataItem).ToShortTimeString() %>
</RangeHeaderTemplate></pre>
<ul>
<li><code>DateHeaderTemplate</code><b> </b>(only used when <code>SeparateDateHeader</code>
is set to <code>true</code>) </li>
</ul>
<p>
Typically, you could display the date header item as a short date:</p>
<pre lang="asp.net"><DateHeaderTemplate>
<%# Convert.ToDateTime(Container.DataItem).ToShortDateString() %>
</DateHeaderTemplate></pre>
<p>
For the <b>ScheduleCalendar</b> control:</p>
<ul>
<li><code>DateTemplate</code> </li>
</ul>
<p>
You could typically display the date header as a short date:</p>
<pre lang="asp.net"><TitleTemplate>
<%# Convert.ToDateTime(Container.DataItem).ToShortDateString() %>
</TitleTemplate></pre>
<ul>
<li><code>TimeTemplate</code> </li>
</ul>
<p>
Typically, you could display the time header item as a short time:</p>
<pre lang="asp.net"><RangeHeaderTemplate>
<%# Convert.ToDateTime(Container.DataItem).ToShortTimeString() %>
</RangeHeaderTemplate></pre>
<p>
If you don't bind to a data source declaratively, don't forget to call the <code>DataBind()</code> method.
Without this call, nothing will be shown.</p>
<p>
Finally, there's the <code>EmptyDataTemplate</code>. Optionally, you can use
this template to provide a message to be shown when no data is found in the data
source. This template is not used by the ScheduleCalendar control when
FullTimeScale=True.</p>
<p>
You can bind the controls to a DataSourceControl, just like you can with a
GridView control. Use the smart tag menu and the "Select Data Source" wizard.</p>
<p>
The Schedule control can also be used in Master/Detail scenarios. Typically, you
can link it to a FormView or a DetailsView control, which allows for easy
editing of data items. Make sure to include a primary key field in the data
source for the Schedule control, and set the DataKeyNames property to the name
of that primary key field.</p>
<p>
After adding the FormView or the DetailsView control, use the "Select Data
Source" wizard. Use the WHERE button to link the control to the Schedule
control.</p>
<h3>
<a name="upgrade1.5"></a>Upgrading from a version prior to 1.5
</h3>
<p>
If you have projects working with a version prior to 1.5, you need to upgrade
them.<br />
The Schedule class has been removed from the assembly, from now on you'll have
to use either ScheduleCalendar or ScheduleGeneral.
</p>
<p>
If your project contains a Schedule control with <b>DisplayMode=Calendar</b>:
</p>
<ul>
<li>Change the control's type from Schedule to ScheduleCalendar (just change the
type manually in the page and in the codebehind file if you use one) </li>
<li>Rename the TitleTemplate into a DateTemplate (with the same content) </li>
<li>Rename the RangeHeaderTemplate into a TimeTemplate (with the same content)
</li>
<li>Rename the TitleField property into a DateField property (with the same value)
</li>
<li>Rename the RangeHeaderStartField property into a StartTimeField property (with
the same value) </li>
<li>Rename the RangeHeaderEndField property into an EndTimeField property (with the
same value) </li>
<li>Rename the UseTitleFieldAsDate property into a TimeFieldsContainDate property
(with the <b>opposite</b> value, change true into false and false into true)
</li>
<li>Rename the TitleStyle tag to DateStyle, or remove it when there is a DateStyle
tag already </li>
<li>Rename the RangeHeaderStyle tag to TimeStyle, or remove it when there is a
TimeStyle tag already </li>
</ul>
<p>
If your project contains a Schedule control with <b>DisplayMode=General</b>:
</p>
<ul>
<li>Change the control's type from Schedule into ScheduleGeneral (just change the
type manually in the page and in the codebehind file if you use one) </li>
<li>If some properties (such as Weeks, StartDate and UseTitleFieldAsDate) that were
not needed for DisplayMode=General were given a value anyway, remove them.
</li>
</ul>
<h3>
Demo pages
</h3>
<p>
Download the demo pages for samples showing you how the Schedule control could
be used. In each sample, you can set the properties with the help of a form and
you can add items. These samples use an Access database as the data source.
</p>
<ul>
<li><b>demo1.aspx </b>shows a sample of a calendar. It also shows you how to delete
items with a linkbutton. </li>
<li><b>demo2.aspx </b>shows a sample of a task list. It also shows you how to edit
and delete items with a linkbutton. </li>
<li><b>demo3.aspx </b>shows a sample of a TV program schedule. </li>
<li><b>demo4.aspx </b>shows a sample of a calendar with items that span midnight.
</li>
</ul>
<p>
<a href="http://www.rekenwondersoftware.com/aspnet/demosite.aspx"
target="_blank">Try demo1 online</a>
</p>
<h2>
<a name="howitworks"></a>How it works
</h2>
<p>
I decided to use a table for displaying all the items, instead of graphics.
Graphics can put a heavy load on the server, and most importantly: a table can
have child controls such as checkboxes and hyperlinks. By using templates, a
developer has full control about the content of the items.
</p>
<p>
I used Microsoft's sample code for the
<a href="http://msdn.microsoft.com/library/en-us/cpguide/html/cpcontemplateddataboundcontrolsample.asp"
target="_blank">TemplatedList</a> control as a starting point.
</p>
<p>
I created a BaseSchedule control, which contains the code that is common for
ScheduleGeneral and ScheduleCalendar.</p>
<p>
First, all the information is extracted from the data source in order to create
lists for the row and column headers. Any double values are removed, and the
remainder is sorted in ascending order.
</p>
<p>
Next, an empty table object is built, with the correct number of rows and columns.
For simplicity, the table is always built in vertical layout, and only converted
to a horizontal web table later when necessary.
</p>
<p>
Then, the header items are added (row headers and column headers).
</p>
<p>
Next, the scheduled items are added to the body of the table. The most
difficult part is to calculate the position and span of each item, to merge the
corresponding cells, and to check whether items don't overlap.
</p>
<p>
Finally, the table object is converted into an html table.
<p>
For the control to work correctly on postback, the control tree needs to be
rebuilt in exactly the same way (without setting any properties). To make this
possible, some information has to be stored in the control's <code>ViewState</code>:</p>
<ul>
<li>the number of rows </li>
<li>the number of cells in each row </li>
<li>the number of header cells in each row </li>
<li>the position (row and column index) of each item </li>
</ul>
<p>
In the <code>CreateChildControls</code> method, this information is used to
build the control tree.
</p>
<p>
On postback, viewstate will be applied automatically to each child control, and
their state will be restored magically.
</p>
<p>
I derived from the CompositeDataBoundControl class.
I added the SelectedValue property, in order to enable master/detail
scenarios with FormView and DetailsView controls.
</p>
<p>
For designer support, the controls are derived from the DataBoundControlDesigner class.
</p>
<h2>
<a name="future"></a>Future
</h2>
<p>
Here are some ideas for improvement:
</p>
<ul>
<li>Add a <code>DeleteCommand</code> event </li>
<li>Add a <code>TodayStyle</code> property (similar to the one in the Calendar
control) </li>
<li>Provide support for right-to-left languages </li>
<li>Add dragging support for selecting a range (Outlook style) </li>
<li>Support for recurring events </li>
<li>Auto Format option </li>
<li>Windows Forms version</li>
</ul>
<p>
If anyone decides to extend this control, or has any comments, bug reports or
questions, then it would be great to hear from you.
</p>
<h2>
<a name="pointsofinterest"></a>Points of interest
</h2>
<ul>
<li>templated control </li>
<li>databound control </li>
<li>control styles </li>
<li>designer support </li>
<li>property builders </li>
<li>ASP.NET 2.0 databound control </li>
<li>ASP.NET 2.0 designer action lists</li>
</ul>
<h2>
<a name="history"></a>Update history</h2>
<p>
All releases are fully backwards compatible, except when upgrading from a
version prior to 1.5 to version 1.6 or later. For this special case, see the
<a href="#upgrade1.5">upgrading instructions above</a>. In all other cases, your
existing projects will not stop working.
</p>
<h4>
Changes in release 2.4.1</h4>
<ul>
<li>Improved use of the entire column/row in some cases with overlapping cells.</li>
</ul>
<h4>
Changes in release 2.4</h4>
<ul>
<li>Simplified algorithm.</li>
<li>Better stacking algorithm.</li>
<li>Now supports multiple repetitions (weeks) in Horizontal mode.</li>
</ul>
<h4>
Changes in release 2.3</h4>
<ul>
<li>Removed support for ASP.NET 1.x. From now on, ASP.NET 2.0 or higher is required.</li>
<li>Extended support for any data source that implements IEnumerable or IListSource.
Hence, binding to ObjectDataSource or EntityDataSource for instance is possible.
Previous versions only support DataTable and DataView.</li>
<li>Source code is provided as a Visual Studio 2010 project</li>
</ul>
<h4>
Changes in release 2.1</h4>
<ul>
<li>On popular demand, I added the <code>OnEmptySlotClick</code> event. To use it,
set the <code>EnableEmptySlotClick</code> property to true, and optionally, add
a value for the <code>EmptySlotTooltip</code> property. Handle the event in your
page. See demo1 and demo2 for samples.</li>
<li>Added the documentation2.chm help file with documentation for the version for
.NET 2.0.</li>
</ul>
<h4>
Changes in release 2.0</h4>
<ul>
<li>Template editing from the smart tag menu is now working in VS2005. </li>
</ul>
<h4>
Changes in release 1.9</h4>
<ul>
<li><font color="red"><b>Support for ASP.NET 2.0.</b></font><br />
The controls now support declarative binding to ASP.NET 2.0 data source
controls. The controls can also serve as master controls in connection with a
FormView or DetailsView control. As with other ASP.NET 2.0 data controls, this
enables you to create pages without writing any code.<br />
There is only one set of source files, with conditional compilation. Use
build.bat to build schedule.dll for ASP.NET 1.x and build2.bat to build
schedule2.dll for ASP.NET 2.0. Don't use both assemblies in the same project. If
you still want to upgrade your pages one by one, make two sets of source files
with different namespaces (e.g. rw and rw2). </li>
<li>Added the <code>SelectedValue</code> property. </li>
<li>Added the <code>SelectedIndexChanged</code> event. </li>
</ul>
<h4>
Changes in release 1.6.1</h4>
<ul>
<li>Added a new property <code>NumberOfDays</code> for the ScheduleCalendar control
to allow for a number of days other than 7. The default value is still 7.
</li>
<li>Since the ScheduleCalendar control is not limited to a 7 day week anymore, the
Weeks property is replaced by the <code>NumberOfRepetitions</code> property.
Setting the Weeks property will still work, but it will not show up in the
property panel anymore. </li>
<li>Added a new property <code>StartDay</code> for the ScheduleCalendar control to
allow for a starting day other than Monday. This property is ignored when the
NumberOfDays is not 7. The default value is still Monday. </li>
</ul>
<h4>
Changes in release 1.6</h4>
<ul>
<li>A new property <code>ShowValueMarks</code> allows for a better display of
adjacent items. See the demos and the explanation above. </li>
<li>Added the possibility to add titles to the ScheduleGeneral control with no
content. This allows you to show all your titles at all times, even when they
don't have any scheduled items for the given period. In order to do this, you
have to add an extra row in your data source with a <code>DataRangeStartField</code>
value of NULL for every title that you want to show up (this solution courtesy
of K. B. McHugh). </li>
<li>Added the <code>EmptyDataTemplate</code> property. Use this template to provide
content when no rows are found in the data source (typically, this would just be
a message saying something like "No data found". </li>
<li>Added a new property <code>ItemStyleField</code>, which is an optional database
field providing the item styles (in the form of a css class name). If not
provided, then the ItemStyle property and the AlternatingItemStyle property will
be used for all items. This addition is courtesy of David Sanders. </li>
<li>Added a new property <code>AutoSortTitles</code> for the ScheduleGeneral
control. When true (the default value), the titles are sorted alphabetically by
the control according to the values in the RangeValueField (this was also the
method used in previous versions). When false, the titles are not sorted by the
control, and the order will be the one of the items in the datasource. When
using this option, make sure that the items with the same titles are grouped
together in the datasource before databinding. If the titles are not grouped,
unexpected results may occur. </li>
<li>Renamed the database folder in the demos to "App_Data" instead of "db", in
preparation for ASP.NET 2.0 folder naming conventions. </li>
</ul>
<h4>
Changes in release 1.5</h4>
<ul>
<li>The code now provides one base class (BaseSchedule) and 3 derived controls:
ScheduleCalendar, ScheduleGeneral and Schedule (this last one is only for
backwards compatibility). This will greatly simplify the setting of their
properties and templates, because only the relevant properties and templates are
shown for each type of control. <br />
The properties and templates are also more self-explanatory, especially for the
ScheduleCalendar control.<br />
<strong>Upgrading issues</strong>:
<br />
Currently, you can leave your existing projects as they are, because the
included Schedule class provides the same functionality as before, but I plan
to remove this class in the future. Therefore, I suggest that you convert your
existing projects. This can be done with a <a href="#upgrade1.5">few changes</a>
only. It will take you only a minute. </li>
<li>The source code is now split up in separate files for each class. </li>
<li>Added property builders for ScheduleCalendar and ScheduleGeneral. </li>
<li>Solved datasource property bug </li>
<li>Added "&nbsp;" to empty cells </li>
<li>Databinding errors will now cause a page error (same behavior as in other data
controls), instead of silently being suppressed </li>
<li>Solved bug with databinding in header </li>
<li>Solved some minor bugs </li>
</ul>
<h4>
Changes in release 1.4</h4>
<ul>
<li>Support for items that span midnight in Calendar mode (on popular demand). I
added a new property "UseTitleFieldAsDate", which should be set to False if you
want to support items that span midnight. Automatically, these items will be
split into multiple items (one for each day), and added to the schedule. I added
an extra demo page to show you how to implement this situation. </li>
<li>The timescale can now go up to 24:00 hours (12:00 PM or midnight). I found out
that you can enter a 24:00 hours time span in the editor's property pane by
using a dot after the number of days ("1.00:00:00" is the same as 24 hours).
</li>
<li>Solved the DataSource property bug (showing an error in the property editor).
</li>
<li>Added Visual Studio demo files </li>
<li>Solved bug with postback on header items (reported by Deraldo Messner) </li>
<li>Added toolbox bitmap </li>
<li>Important: when upgrading existing projects to this version, you may need to
replace the "rw" namespace with "schedule.rw". </li>
</ul>
<h4>
Changes in release 1.3</h4>
<ul>
<li>Support for designer template editing. </li>
<li>Solved some bugs. </li>
</ul>
<h4>
Changes in release 1.2</h4>
<ul>
<li>Much better designer support by deriving from TemplatedControlDesigner. Almost
any change in the properties settings will now automatically be reflected in the
designer. </li>
<li>Solved bugs when using Schedule with no data in General Mode (reported by Beren
Longstreet). </li>
<li>Added a schedule.xsd file for additional IntelliSense support in Visual Studio
</li>
</ul>
<h4>
Changes in release 1.1</h4>
<ul>
<li>Made the source code compile with Option Strict On. </li>
<li>Added a FullTimeScale option. Previously, only time values occurring in the data
source were used. With this option, the control will show a continuous range of
time values.</li>
</ul>
<!----------------------------- Article Ends ----------------------------->
Submit an article or tip