Views in JavaScript Scheduler
The Scheduler provides several view modes, each with its own configuration options. Available modes include Day, Week, Work Week, Month, Agenda, Month Agenda, Year, Timeline Day, Timeline Week, Timeline Work Week, Timeline Year, and Timeline Month. The default active view is Week.
Use the header bar to switch views and navigate dates. The active view is highlighted and the current date range appears at the left of the header; clicking the date range opens a calendar popup for quick selection.
By default, the Scheduler shows the standard calendar views: Day, Week, Work Week, Month, and Agenda.
Setting specific view on scheduler
The Scheduler uses the Week view by default. To change the active view, set the currentView property to the desired view name. The accepted view names are:
- Day
- Week
- WorkWeek
- Month
- Year
- Agenda
- MonthAgenda
- TimelineDay
- TimelineWeek
- TimelineWorkWeek
- TimelineMonth
- TimelineYear
Import and inject the required view modules to enable specific view modes. To limit which views appear, configure the views property.
The example below shows the Scheduler configured with four views: Week, Month, TimelineWeek, and TimelineMonth. The necessary view modules are imported and injected.
To configure the Scheduler with two views but with different configurations on each view, refer to the following code example. Here, the Week view displays the dates in dd-MM-yyyy format, whereas the Month view hides the weekend days and displays in readonly mode.
View specific configuration
Some scenarios require different configurations per view. Define view-specific Scheduler properties using the views property. The available fields are:
| Property | Type | Description | Applicable views |
|---|---|---|---|
option |
View | The Scheduler view name used to apply related properties (for example, Day or Week). |
All views. |
isSelected |
Boolean | Similar to currentView; defines the active view. |
All views. |
dateFormat |
Date | By default, the Scheduler follows the date format as per the default culture assigned to it. When defined under a specific view, only those assigned views follow this date format. | All views. |
readonly |
Boolean | When set to true, prevents the CRUD actions on the respective view where it is defined. |
All views. |
resourceHeaderTemplate |
String | The template option used to customize the resource header cells on the Scheduler. Applied only on the views, where it is defined. | All views. |
dateHeaderTemplate |
String | The template option which is used to customize the date header cells and is applied only on the views, wherever it is defined. | All views. |
eventTemplate |
String | The template option to customize the events content and appearance. It will get applied to the events of the view where it is currently being defined. | All views. |
showWeekend |
Boolean | When set to false, it hides the weekend days of a week from the views on which it is defined. |
All views. |
group |
GroupModel | Allows setting different resource grouping options on all available Scheduler view modes. | All views. |
cellTemplate |
String | The template option to customize the work cells of the Scheduler. Applied only on the views, where it is defined. | Applicable on all views except Agenda view. |
workDays |
Number[] | Used to set the working days on the Scheduler views. | Applicable on all views except Agenda view. |
displayName |
String | Sets an alternative display name for a customized view. | Applicable on all views except Agenda and Month Agenda. |
interval |
Number | It allows to customize the default Scheduler views with different set of days, weeks, work weeks or months on the applicable view type. | Applicable on all views except Agenda and Month Agenda. |
startHour |
String | Specifies the start hour to display. Accepts a short time-skeleton string and hides time earlier than this value. | Applicable on Day, Week, Work Week, Timeline Day, Timeline Week, and Timeline Work Week views. |
endHour |
String | It is used to specify the end hour, at which the Scheduler ends. It accepts the time string in a short skeleton format. | Applicable on Day, Week, Work Week, Timeline Day, Timeline Week, and Timeline Work Week views. |
timeScale |
TimeScaleModel | Configures the timescale for applicable views. | Applicable on Day, Week, Work Week, Timeline Day, Timeline Week, and Timeline Work Week views. |
showWeekNumber |
Boolean | When set to true, shows the week number on the respective weeks. |
Applicable on Day, Week, Work Week, and Month views. |
allowVirtualScrolling |
Boolean | It is used to enable or disable the virtual scrolling functionality. | Applicable on Agenda and Timeline views. |
headerRows |
HeaderRowsModel | Defines custom header rows on timeline views to display year, month, week, date, or hour labels on separate rows. | Applicable only on timeline views. |
Day view
The Day view shows a single day and its appointments. To display multiple consecutive days, set the interval option within the views property. View-specific fields from the table above can be defined in the same views object.
All the table properties apply to Day view except allowVirtualScrolling and headerRows.
Week view
The Week view shows seven days (Sunday through Saturday) and their appointments. Use firstDayOfWeek to change the week’s starting day (Sunday=0, Monday=1, etc.). Click dates in the header to navigate to that date in Day view.
All table properties apply to Week and Work Week views except allowVirtualScrolling and headerRows.
Work Week view
The Work Week view displays only the configured working days (commonly five days) and their appointments. Use workDays to set the working days as an array of integers (Sunday=0, Monday=1, etc.). By default, Work Week shows Monday–Friday. Click a date in the header to open it in Day view.
The following code example depicts how to change the working days only on the Work Week view of the Scheduler.
Week, Work Week, and Day views can show all-day appointments in a separate row with an expand/collapse control.
Month view
The Month view displays the entire days of a particular month and all its related appointments. Navigate to a particular date in the day view by clicking on the appropriate date text on the month cells.
By default, creating an appointment in Month view sets it as an all-day event. Clear the All-day option in the editor to set explicit start/end times (default editor times are 9:00 AM to 9:30 AM).
The + more indicator appears when a day cell contains additional hidden events; click it to view them.
Year view
The Year view displays all the days of a particular year with months and all its related appointments. You can navigate to a particular date in the day view by clicking on the appropriate date text on the year cells.
The Year view displays all months of a year. Dates that contain appointments are highlighted with dots; clicking a date opens the event popup listing those appointments.
Agenda view
The Agenda view lists appointments in a compact, date-based list (7 days by default). Change the visible range with agendaDaysCount. Enable virtual scrolling of dates via allowVirtualScrolling. Hide days with no appointments by setting hideEmptyAgendaDays.
The following code example depicts how to customize the display of events within Agenda view alone.
Set the Scheduler height in pixels when using the Agenda view.
Month Agenda view
Month Agenda shows a month calendar with a list of appointments for the selected day displayed below the calendar. Days that contain appointments are marked with a dot.
The example below demonstrates hiding weekend days on MonthAgenda and customizing the work-days list for that view only.
Timeline views – Day, Week, Work Week
Timeline views render time slots horizontally. The Timeline Day view shows a single day with appointments across horizontal slots. Cell height adapts to the Scheduler height; when content overflows, a + more indicator appears to show hidden events.
Import and inject the TimelineViews module from ej2-schedule to enable Timeline Day, Timeline Week, and Timeline Work Week views.
Similar to the Week view, the timeline week view shows 7 days with its associated appointments with the time slots displayed horizontally.
The example below shows Timeline Work Week on the Scheduler.
Click dates in the header of Timeline views to navigate to Agenda view.
Timeline Month view
Timeline Month shows the month with time slots laid out horizontally and their appointments. Import and inject the TimelineMonth module from ej2-schedule to enable this view.
Click dates in the Timeline Month header to navigate to Timeline Day view.
Timeline Year view
Timeline Year presents a horizontal timeline across the year. In horizontal orientation, each row represents a resource; vertical orientation stacks resources in columns. Resource grouping supports hierarchical child resources.
Import and inject the TimelineYear module from ej2-schedule to use this view.
Timeline Year is available in Horizontal and Vertical orientations; control orientation via the views property.
Resource grouping
The following code example depicts how to group the multiple resources on Timeline Year view and its relevant events are displayed accordingly under those resources.
Auto row height
Timeline Year supports auto row height. When rowAutoHeight is enabled, row heights adjust based on overlapping events. When disabled, a + more indicator appears for hidden appointments.
Extending view intervals
Change the default span of days shown by a view using the interval option. For example, set interval: 3 for the Day view to show three days, or interval: 2 for Week to show two weeks.
Use displayName to provide an alternate label for customized views on the header bar.
The view intervals can be extended for all modes except Agenda and Month-Agenda views.
Use isSelected to mark a view as the current selection. The sample below demonstrates using isSelected.
Refer to the JavaScript Scheduler feature tour for an overview, and visit the Scheduler demo for interactive examples.