Views API in Vue Schedule API component

A class that represents the configuration of view-specific settings on scheduler.

Properties

allowVirtualScrolling

boolean

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

Defaults to false

cellHeaderTemplate

string | function

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.

Defaults to null

cellTemplate

string | function

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.

Defaults to null

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.

Defaults to null

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.

Defaults to null

dateRangeTemplate

string | function

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

Defaults to null

dayHeaderTemplate

string | function

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.

Defaults to null

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.

<template>
  <ejs-schedule>
    <e-views>
        <e-view option="Month" :displayDate="displayDate"></e-view>
    </e-views>
  </ejs-schedule>
</template>
<style>
</style>
<script>
import Vue from "vue";
import { SchedulePlugin, Month, Resize, DragAndDrop } from "@syncfusion/ej2-vue-schedule";

Vue.use(SchedulePlugin);

export default Vue.extend({
  data: function() {
    return {
      displayDate: new Date(2020, 4, 20)
    };
  },
  provide: {
    schedule: [Month, Resize, DragAndDrop]
  },
  methods: {}
});
</script>

Defaults to null

displayName

string

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

Defaults to null

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.

Defaults to false

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.

Defaults to ‘24:00’

eventTemplate

string | function

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.

Defaults to null

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.

Defaults to 0

firstMonthOfYear

number

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

Defaults to 0

group

GroupModel

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

Defaults to { byDate: false, byGroupID: true, allowGroupEdit: false, resources:[], hideNonWorkingDays: false }

headerIndentTemplate

string | function

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.

Defaults to null

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.

Defaults to []

interval

number

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

Defaults to 1

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.

Defaults to false

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.

Defaults to null

monthHeaderTemplate

string | function

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.

Defaults to null

monthsCount

number

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

<template>
  <ejs-schedule :monthsCount="monthsCount">
     <e-views>
      <e-view option='Year'></e-view>
      <e-view option='TimelineYear'></e-view>
     </e-views>
  </ejs-schedule>
</template>
<style>
</style>
<script>
import Vue from "vue";
import {
  SchedulePlugin,
  TimelineYear,
  Year,
  Resize,
  DragAndDrop
} from "@syncfusion/ej2-vue-schedule";

Vue.use(SchedulePlugin);

export default Vue.extend({
  data: function() {
    return {
      monthsCount:16
    };
  },
  provide: {
    schedule: [Year, TimelineYear, Resize, DragAndDrop]
  },
  methods: {}
});
</script>

Defaults to 12

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.

<template>
  <ejs-schedule>
    <e-views>
        <e-view option="Month" :numberOfWeeks='numberOfWeeks'></e-view>
    </e-views>
  </ejs-schedule>
</template>
<style>
</style>
<script>
import Vue from "vue";
import { SchedulePlugin, Month, Resize, DragAndDrop } from "@syncfusion/ej2-vue-schedule";

Vue.use(SchedulePlugin);

export default Vue.extend({
  data: function() {
    return {
      numberOfWeeks: 6
    };
  },
  provide: {
    schedule: [Month, Resize, DragAndDrop]
  },
  methods: {}
});
</script>

Defaults to 0

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.

Defaults to null

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.

Defaults to ‘Horizontal’

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.

Defaults to false

resourceHeaderTemplate

string | function

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.

Defaults to null

showWeekNumber

boolean

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

Defaults to false

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.

Defaults to true

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.

Defaults to ‘00:00’

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.

Defaults to null

timeScale

TimeScaleModel

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

Defaults to { enable: true, interval: 60, slotCount: 2, majorSlotTemplate: null, minorSlotTemplate: null }

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.

Defaults to ’[1, 2, 3, 4, 5]’