All chapters on a single page

You don't need to install anything to start using the DayPilot component . Just reference the assembly in your project and go on. However, it's also possible to add the DayPilot to yout Visual Studio 2005 Toolbox so you drag the component onto your web form and set the properties visually.

Adding the component to the Visual Studio 2005 Toolbox:

1. Right-click the toolbox and select "Choose Items...".

2. In the "Choose Toolbox Items" dialog click "Browse...".

2. Find the DayPilot assembly and click OK.

3. Close the "Choose Toolbox Items" dialog by clicking "OK" and you will see the DayPilot icon in the toolbox:

4. Now you can drag the icon to your WebForm and you will see the DayPilot object:

5. You can set the DayPilot properties in the "Properties" window:

Here are the data-related properties of DayPilotCalendar:

Property	Description	Type	Default value
DataSource	Source of event data.	IListSource, IEnumerable, or IDataSource (including DataSet, DataTable, DataView, ArrayList)	null
DataSourceID	Id of data source component.	string	null
DataStartField	Name of the data source column that contains the event start date and time.	string	null
DataEndField	Name of the data source column that contains the event end  date and time.	string	null
DataTextField	Name of the data source column that contains the event name.	string	null
DataValueField	Name of the data source column that contains the event ID. The Id will be passed to the event handling code when clicking on the event.	string	null
StartDate	The first date that should be shown by the calendar.	DateTime	DateTime.Today
Days	The number of days to be shown. Minimum is 1 and maximum 21.	int	1

For switching the date you can use the standard .NET Framework control System.Web.UI.WebControls.Calendar. You can use the PostBack event to change the DayPilot StartDate and Days properties.

In our sample we will use the DayRender event to improve the calendar:

• the days will become links to a specific day (i.e. no PostBack)
• the days that contain an event will be bold

private void Calendar1_DayRender(object sender, System.Web.UI.WebControls.DayRenderEventArgs e)
{
	string fontWeight = "normal";
	if (isThereEvent(e.Day.Date))
		fontWeight = "bold";

	string color = "black";
	if (e.Day.IsOtherMonth)
		color = this.Calendar1.OtherMonthDayStyle.ForeColor.Name;

	e.Cell.Text = String.Format("<a href='Default.aspx?day={0:d}' style='color: "
		+ color + ";text-decoration:none; font-weight:" 
		+ fontWeight + "'>{1}</a>", e.Day.Date, e.Day.Date.Day);		
}

The method isThereEvent() returns true if a specific day contains any event. This method will be specific to your application. You can go through the data returned from the database (and supplied to DayPilotCalendar.DataSource) to avoid another database request.  We are not using the database in our sample so it is hard-coded:

private bool isThereEvent(DateTime date)
{
	DateTime today = DateTime.Now;
	DateTime tomorrow = today.AddDays(1);
	DateTime anotherDay = today.AddDays(3);

	// there are events today
	if ((date.DayOfYear == today.DayOfYear) && (date.Year == today.Year))
		return true;

	// there are events tomorrow
	if ((date.DayOfYear == tomorrow.DayOfYear) && (date.Year == tomorrow.Year))
		return true;

	// there are events on another day
	if ((date.DayOfYear == anotherDay.DayOfYear) && (date.Year == anotherDay.Year))
		return true;

	return false;
}

There are two types of user actions:

• clicking a free time (you will typically use this action to create a new event)
• clicking an event (you will typically use this action to show event details)

The actions can be handled on the client (by custom JavaScript code) or on the server (by handling the server event).

Property	Description	Type	Default value
EventClickHandling	Handling of a click on a calendar event.	UserActionHandling	UserActionHandling.JavaScript
FreetimeClickHandling	Handling of a click on a free-time slot.	UserActionHandling	UserActionHandling.JavaScript
JavaScriptEventAction	JavaScript code that should be executed when the user clicks on a calendar event (provided that EventClickHandling is set to JavaScript). The string "{0}" will be replaced with an event ID.	string	"alert('{0}');"
JavaScriptFreeAction	JavaScript code that should be executed when the user clicks on a free-time slot (provided that FreetimeClickHandling is set to JavaScript). The string "{0}" will be replaced with the date and time specified in the standard format produced by DateTime.ToString("s") - e.g. "2006-05-15T07:00:00".	string	"alert('{0}');"

Event	Description
EventClick	Occurs when the user clicks on an event and EventClickHandling property is set to UserActionHandling.PostBack.
FreeTimeClick	Occurs when the user clicks on an event and FreetimeClickHandling property is set to UserActionHandling.PostBack.

Your server-side event handling methods will get the important data:

EventClick knows the event value (PK column)

The argument of EventClick handler is set to the value of the clicked event (DataValueField).

private void DayPilotCalendar1_EventClick(string pk)
{
	Label1.Text = "Selected event: " + pk;
}

FreeTimeClick knows the time clicked

private void DayPilotCalendar1_FreeTimeClick(System.DateTime start)
{
	Label1.Text = "Selected time: " + start.ToString("s");
}

Custom format examples

DayFormat value	Sample header
"dddd"	Monday
"ddd"	Mo
"dd"	05
"%d"	5
"M/dd"	6/05
"M/d"	6/5
"MM/dd"	06/05
"d MMMM yyyy"	5 June 2006
"yyyy-MM-dd"	2006-06-05