Calendar Data Binding

Calendar.NET Control support databinding. You can use databinding to populate control with data from database, xml, collections or any other resource. StartDate and EndDate are the only required fields for datasource collection to have. Those fields are needed to determine item location withing calendar views. Calendar Holidays is also a bindable property.

Property Name Description

DataSource Required. Gets or sets the data source that populates the items of the control.

DataStartDateField Required. Gets or sets the field of the data source that provides the start date value.

DataEndDateField Required. Gets or sets the field of the data source that provides the end date value.

AbbreviatedDayNames Optional. Gets or sets if day names are Abbreviated. True if not defined.

AllowNewOverlappingEvents Optional. Should enable/disable addnew links based on if allow overlapping events is on or off.

AutoPostBack Optional. Gets or sets a value indicating whether an automatic postback to the server will occur whenever the user changes the selected index. False if not defined.

ContextMenuFormat Optional. Gets or sets the link to be used with hours. If none set link won't be rendered. Format must include replacement parameter {0} which will be replaced by full date/time variable during runtime.

CurrentOwner Optional. Gets or sets the active Calendar Owner.

DataColorField Optional. Gets or sets the field of the data source that provides the background color for spanning element.

DataDescriptionField Optional. Gets or sets the field of the data source that provides the description content.

DataLinkField Optional. Gets or sets the field of the data source that provides the url content.

DataLinkFormat Optional. Gets or sets the field of the data source that provides the url format.

DataMember Optional. Gets or sets the specific data member in a multimember data source to bind to a calendar control.

DataOwnerField Optional. Gets or sets the field of the data source that provides the owner content.

DataTextField Optional. Gets or sets the field of the data source that provides the text/title content.

DayEndHour Optional. Gets or sets work day end hour. Hours after that will be rendered with inactive style or won't be rendered at all. Default value is 17.

DayHourFormat Optional. Gets or sets a value that defines how hours will be rendered within a day view.

DayLinkFormat Optional. Gets or sets the link to be used with hours on Days view. If none set link won't be rendered. Format must include replacement parameter {0} which will be replaced by full date/time variable during runtime.

DayStartHour Optional. Gets or sets work day start hour. Hours before that will be rendered with inactive style or won't be rendered at all. Default value is 8.

DisplayEndDate Optional. Returns actual displayed Start Date depending on the view type.

DisplayStartDate Optional. Returns actual displayed Start Date depending on the view type.

DrillDownEnabled Optional. Gets or sets drill down. True if not defined.

EventBarShow Optional. Gets or sets to either show Event Bar or not.

FirstDayOfWeek Optional. Gets or Sets First Day Of the Week.

HolidayDataDateField Optional. Gets or sets the field of the data source that provides the start date value.

HolidayDataMember Optional. Gets or sets the specific data member in a multimember data source to bind to a calendar control.

HolidayDataSource Optional. Gets or sets the data source that populates the items of the control.

HolidayDataTextField Optional. Gets or sets the field of the data source that provides the end date value.

ItemHeight Optional. Calendar Item default height. 18 if not defined. Not used for Day, Week and Year views, where it's set to 100%.

Items Optional. Gets the collection of items in the control.

ItemsRenderStyle Optional. Gets or sets default rendering style for a calendar item. Auto if not defined.

MaxDisplayedItems Optional. Gets or sets maximum displayed items in the cell. Only affects month and year view, default value is 6.

MergeEvents Optional. Gets or sets the default if we merge events with same name or not.

MinutesInterval Optional. Gets or sets minute's interval for hour. 60 must be multiple of this value. Range: 1-60. Default value is 30.

MonthStartDate Optional. Sets month start date.

MoreItemsText Optional. Text shown when there are more items than MaxDisplayedItems value. "..." as default.

MultiOwner Optional. Gets or sets a value that indicates whether the control has multiple CalendarItem owners.

MultiOwnerFormat Optional. Gets or sets the link to be used with owners. If none set link won't be rendered. Format must include replacement parameter {0} which will be replaced by full date/time variable during runtime and {1} which will be replaced by owner id.

NewLinkFormat Optional. Gets or sets the link to be used with hours. If none set link won't be rendered. Format must include replacement parameter {0} which will be replaced by full date/time variable during runtime.

NewMultiOwnerLinkFormat Optional. Gets or sets the link to be used with multi owner day view. If none set link NewLinkFormat property will be used. Format must include replacement parameter {0} which will be replaced by full date/time variable during runtime and parameter {1} which will be replaced by owner key.

OwnerDataMember Optional. Gets or sets the specific data member in a multimember data source to bind to a calendar control.

OwnerDataSource Optional. Gets or sets the data source that populates the items of the control.

OwnerDataTextField Optional. Gets or sets a string that specifies the property of the data source to map to the Owner property of the CalendarItem objects.

OwnerDataValueField Optional. Gets or sets a string that specifies the property of the data source to map to the Owner property of the CalendarItem objects.

Owners Optional. This property enables you to obtain a reference to the list of the owners that are currently stored in the Calendar. With this reference, you can add, remove and obtain a count of the owners in the collection.

Palette Optional. Color palette to use with calendar control.

RemoveItems Optional. Gets or sets the if events out of scope are removed. True by default, will affect performance if set to false.

SelectedDate Optional. The selected date. Defines which view is rendered.

SpanType Optional. Gets or sets control span type. This only affects monthly calendar view. And will render span bars. Default value is Overflowed.

SystemImagesPath Optional. Path to the directory holding images required by the control.

TaskItemWidth Optional. Calendar Task Item Control Width. Default value is 14.

UseShadows Optional. Display shadows for items.

ViewType Optional. Gets or sets calendar view type.

WeekDayHeight Optional. Gets or sets the default height for week day cell. Default is 180 pixels.

WeeksInMonth Optional. Gets or sets number of weeks displaying in MonthView. Range: 1-53. 0 for displaying weeks in current month only. Default value is 6.

WorkWeek Optional. Gets or sets work days of the week.

YearStartMonth Optional. Gets or sets first month for year. Range: 1-12. Default value is 1.

Templates
Calendar.NET Control supports templates for rendering almost all the content. Here is a list of all the templates and short description on when specific template is used. If no template defined the default built in style is used.

Template Name Description

AllDayItemTemplate Used to render all day items in DayView.

DayItemTemplate Used to render multi cell/spanning (hour or more in length) item in DayView.

DayTextItemTemplate Used to render one cell item in DayView.

DefaultItemTemplate Universal template, used when template is not defined for specific item.

MonthItemTemplate Used to render spanning item in Month View.

MonthTextItemTemplate Used to render non spanning item in Month View.

TaskItemBoxTemplate Template for task block item. Use it to customize how data is rendered inside tasks bar within task view.

TaskItemHeaderTemplate Template for task header. Use it to customize how data is rendered inside tasks bar within task view.

TaskItemTemplate Template for task item. Use it to customize how data is rendered inside tasks bar within task view.

WeekItemTemplate Used to render spanning item in all Week Views.

WeekTextItemTemplate Used to render non spanning item in all Week Views.

YearItemTemplate Used to render item in Year View.

The process of populating calendar from database invloves following steps:

1. Connect to database and retrieve data in either DataSet or DataTable object.

C# VB

SqlConnection myConnection = new SqlConnection( "server=(local)\\NetSDK;database=pubs;Integrated Security=SSPI"); SqlDataAdapter myCommand = new SqlDataAdapter( String.Format("select OrderName, ShippedDate, DeliveredDate from Orders where ShippedDate >= {0} and DeliveredDate <= {1}", CalendarCtrl.DisplayStartDate, CalendarCtrl.DisplayEndDate), myConnection); DataSet ds = new DataSet(); myCommand.Fill(ds, "Orders");

Dim myConnection As New SqlConnection( "server=(local)\NetSDK;database=pubs;Integrated Security=SSPI") Dim myCommand As New SqlDataAdapter( String.Format("select OrderName, ShippedDate, DeliveredDate from Orders where ShippedDate >= {0} and DeliveredDate <= {1}", CalendarCtrl.DisplayStartDate, CalendarCtrl.DisplayEndDate), myConnection) Dim ds As New DataSet() myCommand.Fill(ds, "Orders")

Note: note that in select query we use two special calendar properties called DisplayStartDate and DisplayEndDate, those are calendar read only properties and they will contain current dates displayed by the calendar. They will change based on view and very convinient way to minimize data loading.

2. Associate calendar properties with appropriate DataTable fields. (If returned object is DataSet use DataMember property to specify DataTable).

C# VB

<ie:calendar id="CalendarCtrl" runat="server" Palette="Windows" DataEndDateField="DeliveredDate" DataStartDateField="ShippedDate" DataLinkField="OrderName" ViewType="MonthView" SpanType="Overflowed"> </ie:calendar> CalendarCtrl.DataMember = "Orders";

<ie:calendar id="CalendarCtrl" runat="server" Palette="Windows" DataEndDateField="DeliveredDate" DataStartDateField="ShippedDate" DataLinkField="OrderName" ViewType="MonthView" SpanType="Overflowed"> </ie:calendar> CalendarCtrl.DataMember = "Orders"

3. Databind control by assigning DataSource property and calling DataBind method.

C# VB

CalendarCtrl.DataMember = "Orders"; CalendarCtrl.DataSource = getDataFromDatabase(); CalendarCtrl.DataBind();

CalendarCtrl.DataMember = "Orders" CalendarCtrl.DataSource = getDataFromDatabase() CalendarCtrl.DataBind()

DataView Binding

Binding source: Use data fields (DataEndDateField, DataStartDateField, DataLinkField, DataTextField, DataColorField, DataDescriptionField) to map datasource(in this case DataView) fields to calendar item properties.
ASP.NET Form Code:

<ie:calendar id="CalendarCtrl" runat="server" Palette="Windows" 
             DataEndDateField="EndDate" DataStartDateField="StartDate" ViewType="MonthView" 
             DataLinkField="Link" DataTextField="Label" DataColorField="Color"
             DataDescriptionField="Description"
             SpanType="Overflowed">
</ie:calendar>

C# VB

private void BindData() { CalendarCtrl.DataSource = CreateDataSource(); CalendarCtrl.DataBind(); } private ICollection CreateDataSource() { DataTable dt = new DataTable(); DataRow dr; dt.Columns.Add(new DataColumn("Label", typeof(string))); dt.Columns.Add(new DataColumn("Date", typeof(DateTime))); dt.Columns.Add(new DataColumn("EndDate", typeof(DateTime))); dt.Columns.Add(new DataColumn("Link", typeof(string))); dt.Columns.Add(new DataColumn("Description", typeof(string))); dt.Columns.Add(new DataColumn("NewItem", typeof(string))); dt.Columns.Add(new DataColumn("Color", typeof(string))); // add days for(int index=0;index<100;index++) { dr = dt.NewRow(); dr[0] = "<img src='../Layouts/images/event.gif' width=16 height=12 border=0 hspace=2 align=middle> Project number " + index; dr[1] = DateTime.Now.AddDays(-7).AddDays(index); dr[2] = DateTime.Now.AddDays(-4).AddDays(index); dr[3] = "http://www.mediachase.com"; dr[4] = "Event project description goes here"; dr[5] = "Some event"; dr[6] = getRandomColor(); dt.Rows.Add(dr); } // add hours for(int index=0;index<10;index++) { dr = dt.NewRow(); dr[0] = "<img src='../Layouts/images/task.gif' width=16 height=12 border=0 hspace=2 align=middle> Task number " + index; dr[1] = DateTime.Now.AddHours(index-2); dr[2] = DateTime.Now.AddHours(index+2); dr[3] = "http://www.mediachase.com"; dr[4] = "Task description goes here"; dr[5] = "Some hourly task"; dr[6] = getRandomColor(); dt.Rows.Add(dr); } DataView dv = new DataView(dt); return dv;}

Private Sub BindData() CalendarCtrl.DataSource = CreateDataSource CalendarCtrl.DataBind End Sub Private Function CreateDataSource() as ICollection Dim dt as DataTable = new DataTable() Dim dr as DataRow dt.Columns.Add(new DataColumn("Label", GetType(string))) dt.Columns.Add(new DataColumn("Date", GetType(DateTime))) dt.Columns.Add(new DataColumn("EndDate", GetType(DateTime))) dt.Columns.Add(new DataColumn("Link", GetType(string))) dt.Columns.Add(new DataColumn("Description", GetType(vstring))) dt.Columns.Add(new DataColumn("NewItem", GetType(string))) dt.Columns.Add(new DataColumn("Color", GetType(string))) Dim index as Integer For index=0 to 100 dr = dt.NewRow() dr(0) = "<img src='../Layouts/images/event.gif' width=16 height=12 border=0 " & _ "hspace=2 align=middle> Project number " & index dr(1) = DateTime.Now.AddDays(-7).AddDays(index) dr(2) = DateTime.Now.AddDays(-4).AddDays(index) dr(3) = "http://www.mediachase.com" dr(4) = "Event project description goes here" dr(5) = "Some event" dr(6) = getRandomColor dt.Rows.Add(dr) Next index For index=0 to 10 dr = dt.NewRow() dr(0) = "<img src='../Layouts/images/task.gif' width=16 height=12 border=0 " & _ "hspace=2 align=middle> Task number " & index dr(1) = DateTime.Now.AddHours(index-2) dr(2) = DateTime.Now.AddHours(index+2) dr(3) = "http://www.mediachase.com" dr(4) = "Task description goes here" dr(5) = "Some hourly task" dr(6) = getRandomColor dt.Rows.Add(dr) Next index CreateDataSource = new DataView(dt) End Function

[View C# Code] | [View VB.NET Code]

Custom Collections Binding

Custom collection binding offers great flexibility and together with templates allows to bind and display any object withing the calendar.
ASP.NET Form Code:

<ie:calendar id="CalendarCtrl" runat="server" Palette="Windows" 
	DataEndDateField="EndDate" DataStartDateField="StartDate"
	ViewType="MonthView" DataColorField="Color" SpanType="Overflowed">
	<MonthItemTemplate>
		<%#DataBinder.Eval(Container.DataItem, "StartDate")%> - 
		<%#DataBinder.Eval(Container.DataItem, "EndDate")%> 
		<%#DataBinder.Eval(Container.DataItem, "Author.FullName")%>
	</MonthItemTemplate>
	<YearItemTemplate>
		<%#DataBinder.Eval(Container.DataItem, "StartDate")%> - 
		<%#DataBinder.Eval(Container.DataItem, "EndDate")%> 
		<%#DataBinder.Eval(Container.DataItem, "Author.FullName")%>
	</YearItemTemplate>
	<AllDayItemTemplate>
		All day: <%#DataBinder.Eval(Container.DataItem, "StartDate")%> - 
		<%#DataBinder.Eval(Container.DataItem, "EndDate")%> 
		<%#DataBinder.Eval(Container.DataItem, "Author.FullName")%>
	</AllDayItemTemplate>			
	<DayItemTemplate>
		<%#DataBinder.Eval(Container.DataItem, "StartDate")%> - 
		<%#DataBinder.Eval(Container.DataItem, "EndDate")%> 
		<%#DataBinder.Eval(Container.DataItem, "Author.FullName")%>
	</DayItemTemplate>					
	<WeekItemTemplate>
		<%#DataBinder.Eval(Container.DataItem, "StartDate")%> - 
		<%#DataBinder.Eval(Container.DataItem, "EndDate")%> 
		<%#DataBinder.Eval(Container.DataItem, "Author.FullName")%>
	</WeekItemTemplate>
</ie:calendar>

Source Code:


private void BindData()
{
	CalendarCtrl.DataSource = CreateDataSource();
	CalendarCtrl.DataBind();
}

private ICollection CreateDataSource()
{
	ArrayList list = new ArrayList();
	Task task = null;

	// add days
	for(int index=0;index<100;index++)
	{
		task = new Task(DateTime.Now.AddDays(-7).AddDays(index), 
			DateTime.Now.AddDays(-4).AddDays(index), getRandomColor());
		task.Author = new Person("John Doe");
											  list.Add(task);
	}

	// add hours
	for(int index=0;index<10;index++)
	{
		task = new Task(DateTime.Now.AddHours(index-2), 
			DateTime.Now.AddHours(index+2), getRandomColor());
		task.Author = new Person("Mike Doe");
		list.Add(task);
	}

	return list;
}

public class Task
{
	DateTime _StartDate;
	DateTime _EndDate;
	string _Color;
	Person _author = null;

	public DateTime StartDate
	{
		set
		{
			_StartDate = value;
		}
		get 
		{
			return _StartDate;
		}
	}

	public DateTime EndDate
	{
		set
		{
			_EndDate = value;
		}
		get 
		{
			return _EndDate;
		}
	}

	public string Color
	{
		set
		{
			_Color = value;
		}
		get 
		{
			return _Color;
		}
	}

	public Person Author
	{
		set
		{
			_author = value;
		}
		get 
		{
			return _author;
		}
	}

	public Task(DateTime start, DateTime end, string color)
	{
		StartDate = start;
		EndDate = end;
		Color = color;
	}
}

public class Person
{
	string _FullName = "";

	public string FullName
	{
		set
		{
			_FullName = value;
		}
		get 
		{
			return _FullName;
		}
	}

	public Person(string name)
	{
		FullName = name;
	}
}


Private Sub BindData()
	CalendarCtrl.DataSource = CreateDataSource
	CalendarCtrl.DataBind
End Sub

Private Sub CreateDataSource() As ICollection
	Dim list As ArrayList =  new ArrayList()
	Dim task As Task = Nothing

	' add days
	Dim index As Integer
	For index=0 to 100
		task = New Task(DateTime.Now.AddDays(-7).AddDays(index),_ 
			DateTime.Now.AddDays(-4).AddDays(index), GetRandomColor)
		task.Author = New Person("John Doe")
		list.Add(task)
	Next index

	' add hours
	For index=0 to 10
		task = New Task(DateTime.Now.AddHours(index-2), _
			DateTime.Now.AddHours(index+2), GetRandomColor)
		task.Author = New Person("Mike Doe")
		list.Add(task)
	Next index

	CreateDataSource=list
End Sub

Public Class Task
    Dim _StartDate As DateTime
    Dim _EndDate As DateTime
    Dim _Color As String
    Dim _author As Person = Nothing

    Public Property StartDate() As DateTime
        Get
            StartDate = _StartDate
        End Get
        Set(ByVal Value As DateTime)
            _StartDate = Value
        End Set
    End Property

    Public Property EndDate() As DateTime
        Get
            EndDate = _EndDate
        End Get
        Set(ByVal Value As DateTime)
            _EndDate = Value
        End Set
    End Property


    Public Property Color() As String
        Get
            Color = _Color
        End Get
        Set(ByVal Value As String)
            _Color = Value
        End Set
    End Property
    
    Public Property Author() As Person
        Get
            Author = _author
        End Get
        Set(ByVal Value As Person)
            _author = Value
        End Set
    End Property

    Public Sub Task(ByVal start As DateTime, ByVal _end As DateTime, ByVal color As String)
	    StartDate = start        
	    EndDate = _end
	    Color = color
    End Sub

End Class

Public Class Person
    Dim _FullName As String = ""

    Public Property FullName() As String
        Get
            FullName = _FullName
        End Get
        Set(ByVal Value As String)
            _FullName = Value
        End Set
    End Property

    Public Sub Person(ByVal name As String)
        FullName = name
    End Sub

End Class

[View C# Code] [View VB.NET Code]

Example source codes are included in Control Download.