ViewsModel API in Angular Schedule API component

Interface for a class Views

Properties

allowOverlap

boolean

Specifies whether overlapping appointments are allowed within the same time slot in the Scheduler.

allowVirtualScrolling

boolean

It is used to allow or disallow the virtual scrolling functionality.

cellHeaderTemplate

string | object

It accepts either the string or HTMLElement as template design content and parse it appropriately before displaying it onto the month date cells. This template is only applicable for month view day cells.

cellTemplate

string | object

The template option which is used to render the customized work cells on the Schedule. Here, the template accepts either the string or HTMLElement as template design and then the parsed design is displayed onto the work cells. The field accessible via template is date. It gets applied only to the view objects on which it is defined.

dateFormat

string

By default, Schedule follows the date-format as per the default culture assigned to it. It is also possible to manually set specific date format by using the dateFormat property. The format of the date range label in the header bar depends on the dateFormat value or else based on the locale assigned to the Schedule. It gets applied only to the view objects on which it is defined.

dateHeaderTemplate

string | Function

It accepts either the string or HTMLElement as template design content and parse it appropriately before displaying it onto the date header cells. The field that can be accessed via this template is date. It gets applied only to the view objects on which it is defined.

dateRangeTemplate

string | object

It accepts either the string or HTMLElement as template design content and parse it appropriately before displaying it onto the header date range.

dayHeaderTemplate

string | object

It accepts either the string or HTMLElement as template design content and parse it appropriately before displaying it onto the Year view day cell header. This template is only applicable for year view header cells.

displayDate

Date

Specifies the starting week date at an initial rendering of month view. This property is only applicable for month view. If this property value is not set, then the month view will be rendered from the first week of the month.

<ejs-schedule>
    <e-views>
        <e-view option='Month' [displayDate]="displayDate"></e-view>
    </e-views>
</ejs-schedule>

import { Component, ViewEncapsulation } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "app.component.html",
  styleUrls: ["app.component.css"],
  encapsulation: ViewEncapsulation.None
})

export class AppComponent {
  public displayDate: Date = new Date(2020, 4, 20);
}

displayName

string

When the same view is customized with different intervals, this property allows the user to set different display name for those views.

enableLazyLoading

boolean

Enables the lazy loading of events for scrolling actions only when the resources grouping property is enabled. Lazy loading allows the scheduler to fetch the appointments dynamically during scroll actions for the currently rendered resource collection. New event data is fetched on-demand as the user scrolls through the schedule content.

endHour

string

It is used to specify the end hour, at which the Schedule ends. It too accepts the time string in a short skeleton format.

eventTemplate

string | object

It accepts either the string or HTMLElement as template design content and parse it appropriately before displaying it onto the event background. All the event fields mapped to Schedule from dataSource can be accessed within this template code. It is similar to that of the template option available within the eventSettings property, whereas it will get applied only on the events of the view to which it is currently being defined.

firstDayOfWeek

number

This option allows the user to set the first day of a week on Schedule. It should be based on the locale set to it and each culture defines its own first day of week values. If needed, the user can set it manually on his own by defining the value through this property. It usually accepts the integer values, whereby 0 is always denoted as Sunday, 1 as Monday and so on.

firstMonthOfYear

number

This property helps render the year view customized months. By default, it is set to 0.

group

GroupModel

Allows to set different resource grouping options on all available schedule view modes.

headerIndentTemplate

string | object

The template option which is used to render the customized header indent cell on the schedule. Here, the template accepts either the string or HTMLElement as template design and then the parsed design is displayed onto the header indent cell. It gets applied only to the view objects on which it is defined.

headerRows

HeaderRowsModel[]

Allows defining the collection of custom header rows to display the year, month, week, date and hour label as an individual row on the timeline view of the scheduler.

interval

number

It accepts the number value denoting to include the number of days, weeks, workweeks or months on the defined view type.

isSelected

boolean

To denote whether the view name given on the option is active or not. It acts similar to the currentView property and defines the active view of Schedule.

maxEventsPerRow

number

Specifies the maximum number of events to be displayed in a single row. This property is applicable when the ‘rowAutoHeight’ property is disabled. This property is only applicable for the month view, timeline views, and timeline year view.

monthHeaderTemplate

string | object

It accepts either the string or HTMLElement as template design content and parse it appropriately before displaying it onto the Year view day cell header. This template is only applicable for year view header cells.

monthsCount

number

This option allows the user to set the number of months count to be displayed on the Schedule.

<ejs-schedule [monthsCount]="16">
  <e-views>
    <e-view option="TimelineYear"></e-view>
    <e-view option="Year"></e-view>
  </e-views>
</ejs-schedule>

import { Component } from '@angular/core';
import { YearService, TimelineYearService, DragAndDropService } from '@syncfusion/ej2-angular-schedule';

@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    providers: [YearService,TimelineYearService, DragAndDropService]
})
export class AppComponent {
}

numberOfWeeks

number

This property customizes the number of weeks that are shown in month view. By default, it shows all weeks in the current month. Use displayDate property to customize the starting week of month.

<ejs-schedule>
    <e-views>
        <e-view option='Month' [numberOfWeeks]=6></e-view>
    </e-views>
</ejs-schedule>

option

View

It accepts the schedule view name, based on which we can define with its related properties in a single object. The applicable view names are,

• Day - Denotes Day view of the scheduler.
• Week - Denotes Week view of the scheduler.
• WorkWeek - Denotes Work Week view of the scheduler.
• Month - Denotes Month view of the scheduler.
• Year - Denotes Year view of the scheduler.
• Agenda - Denotes Agenda view of the scheduler.
• MonthAgenda - Denotes Month Agenda view of the scheduler.
• TimelineDay - Denotes Timeline Day view of the scheduler.
• TimelineWeek - Denotes Timeline Week view of the scheduler.
• TimelineWorkWeek - Denotes Timeline Work Week view of the scheduler.
• TimelineMonth - Denotes Timeline Month view of the scheduler.
• TimelineYear - Denotes Timeline Year view of the scheduler.

orientation

Orientation

It is used to specify the year view rendering orientation on the schedule. The applicable orientation values are,

• Horizontal - Denotes the horizontal orientation of Timeline Year view.
• Vertical - Denotes the vertical orientation of Timeline Year view.

overscanCount

number

Specifies the number of additional rows or columns to render outside the visible area during virtual scrolling. This property helps in achieving smoother scrolling by pre-loading data just outside the visible region.

readonly

boolean

When set to true, displays a quick popup with cell or event details on single clicking over the cells or on events. By default, it is set to true. It gets applied only to the view objects on which it is defined.

resourceHeaderTemplate

string | object

The template option which is used to render the customized header cells on the schedule. Here, the template accepts either the string or HTMLElement as template design and then the parsed design is displayed onto the header cells. All the resource fields mapped within resources can be accessed within this template code. It gets applied only to the view objects on which it is defined.

showWeekNumber

boolean

When set to true, displays the week number of the current view date range.

showWeekend

boolean

When set to false, it hides the weekend days of a week from the Schedule. The days which are not defined in the working days collection are usually treated as weekend days. Note: By default, this option is not applicable on Work Week view. For example, if the working days are defined as [1, 2, 3, 4], then the remaining days of that week will be considered as the weekend days and will be hidden on all the views.

startHour

string

It is used to specify the starting hour, from which the Schedule starts to display. It accepts the time string in a short skeleton format and also, hides the time beyond the specified start time.

timeFormat

string

By default, Schedule follows the time-format as per the default culture assigned to it. It is also possible to manually set specific time format by using the timeFormat property.

timeScale

TimeScaleModel

Allows to set different timescale configuration on each applicable view modes such as day, week and work week.

workDays

number[]

It is used to set the working days on schedule. The only days that are defined in this collection will be rendered on the workWeek view whereas on other views, it will display all the usual days and simply highlights the working days with different shade.