The event calendar component supports 5 view types.

Automatic Modes

  • Day (one day)
  • WorkWeek (five days of work week)
  • Week (seven days of week)

These modes simplify work with the standard views:

  • They automatically set the day property value.
  • They automatically set the startDate to the first day of week in "WorkWeek" and "Week" modes (using the current culture).

Manual Modes

  • Days (custom number of subsequent days)
  • Resources (custom columns, allows showing resources or any set of days)

Daily Calendar

html5 javascript daily event calendar

The daily calendar (viewType="Day") displays a single day specified using startDate property.

Work Week Calendar

html5 javascript calendar work week

The work week calendar (viewType="WorkWeek") displays 5 days (Monday to Friday). The starting Monday is calculated from the value of startDate.

Weekly Calendar

html5 javascript weekly event calendar

The weekly calendar (viewType="Week") displays 7 days. The first day of week is calculated from the value of startDate using the current locale.

Calendar with Custom Number of Days

html5 javascript calendar custom days

In the days view (viewType="Days"), the event calendar displays a custom number of days, starting with the startDate.

Resource Calendar

html5 javascript resource calendar

The resource calendar (viewType="Resources") allows full customization of the columns that will be displayed. The columns can display custom set of days (which don't need to be consecutive). The columns can display resources instead of days. The resource calendar supports a hierarchy of resources (the columns can be grouped). When displaying a hierarchy of columns, resources can be combined with days to create special view types.