Vue
EditEdit This DocumentInstall NuGet
Demos
Support
Forum
FREE TRIAL
Search results

ScheduleModel API in Vue Schedule API component

Interface for a class Schedule

Properties

actionBegin

EmitType<ActionEventArgs>

Triggers on beginning of every scheduler action.

actionComplete

EmitType<ActionEventArgs>

Triggers on successful completion of the scheduler actions.

actionFailure

EmitType<ActionEventArgs>

Triggers when a scheduler action gets failed or interrupted and an error information will be returned.

beforePaste

EmitType<BeforePasteEventArgs>

Triggers once when pasting an event on the scheduler.

cellClick

EmitType<CellClickEventArgs>

Triggers when the scheduler cells are single clicked or on single tap on the same cells in mobile devices.

cellDoubleClick

EmitType<CellClickEventArgs>

Triggers when the scheduler cells are double clicked.

created

EmitType<Record>

Triggers after the scheduler component is created.

dataBinding

EmitType<ReturnType>

Triggers before the data binds to the scheduler.

dataBound

EmitType<ReturnType>

Triggers once the event data is bound to the scheduler.

destroyed

EmitType<Record>

Triggers when the scheduler component is destroyed.

drag

EmitType<DragEventArgs>

Triggers when an appointment is being in a dragged state.

dragStart

EmitType<DragEventArgs>

Triggers when an appointment is started to drag.

dragStop

EmitType<DragEventArgs>

Triggers when the dragging of appointment is stopped.

eventClick

EmitType<EventClickArgs>

Triggers when the events are single clicked or on single tapping the events on the mobile devices.

eventDoubleClick

EmitType<EventClickArgs>

Triggers when the events are double clicked or on double tapping the events on the desktop devices.

eventRendered

EmitType<EventRenderedArgs>

Triggers before each of the event getting rendered on the scheduler user interface.

hover

EmitType<HoverEventArgs>

Triggers when the scheduler elements are hovered.

moreEventsClick

EmitType<MoreEventsClickArgs>

Triggers when the more events indicator are clicked.

Triggers before the date or view navigation takes place on scheduler.

popupClose

EmitType<PopupCloseEventArgs>

Triggers before any of the scheduler popups close on the page.

popupOpen

EmitType<PopupOpenEventArgs>

Triggers before any of the scheduler popups opens on the page.

renderCell

EmitType<RenderCellEventArgs>

Triggers before each element of the schedule rendering on the page.

resizeStart

EmitType<ResizeEventArgs>

Triggers when an appointment is started to resize.

resizeStop

EmitType<ResizeEventArgs>

Triggers when the resizing of appointment is stopped.

resizing

EmitType<ResizeEventArgs>

Triggers when an appointment is being in a resizing action.

select

EmitType<SelectEventArgs>

Triggers when multiple cells or events are selected on the Scheduler.

virtualScrollStart

EmitType<ScrollEventArgs>

Triggers when the scroll action is started. This event triggers only when allowVirtualScrolling or enableLazyLoading properties are enabled along with resource grouping.

virtualScrollStop

EmitType<ScrollEventArgs>

Triggers when the scroll action is stopped. This event triggers only when allowVirtualScrolling or enableLazyLoading properties are enabled along with resource grouping.

agendaDaysCount

number

Sets the number of days to be displayed by default in Agenda View and in case of virtual scrolling, the number of days will be fetched on each scroll-end based on this count.

<template>
  <ejs-schedule currentView="Agenda" agendaDaysCount="2"></ejs-schedule>
</template>
<style>
</style>
<script>
import Vue from "vue";
import {
  SchedulePlugin,
  Day,
  Week,
  WorkWeek,
  Month,
  Agenda,
  Resize,
  DragAndDrop
} from "@syncfusion/ej2-vue-schedule";

Vue.use(SchedulePlugin);

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

allowClipboard

boolean

Enables clipboard functionality for appointments, allowing them to be copied using keyboard shortcuts and pasted onto the Scheduler. When set to true, users can use keyboard shortcuts to cut, copy appointments and paste them into different time slots or calendars.

allowDragAndDrop

boolean

When set to true, allows the appointments to move over the time slots. When an appointment is dragged, both its start and end time tends to change simultaneously allowing it to reschedule the appointment on some other time.

allowInline

boolean

This property helps user to add/edit the event in inline. By default, it is set to false.

allowKeyboardInteraction

boolean

When set to true, allows the keyboard interaction to take place on Schedule.

allowMultiCellSelection

boolean

This property helps user to allow/prevent the selection of multiple cells. By default, it is set to true.

allowMultiDrag

boolean

This property helps to drag the multiple selected events. By default, it is set to false.

allowMultiRowSelection

boolean

This property helps user to allow/prevent the selection of multiple days(rows). By default, it is set to true.

allowResizing

boolean

When set to true, allows the resizing of appointments. It allows the rescheduling of appointments either by changing the start or end time by dragging the event resize handlers.

allowSwiping

boolean

Defines whether to enable date navigations via swipe in touch devices or not.

calendarMode

CalendarType

It allows the Scheduler to display in other calendar modes. By default, Scheduler is displayed in Gregorian calendar mode.

<template>
  <ejs-schedule calendarMode="Islamic"></ejs-schedule>
</template>
<style>
</style>
<script>
import Vue from "vue";
import {
  SchedulePlugin,
  Day,
  Week,
  WorkWeek,
  Month,
  Agenda,
  Resize,
  DragAndDrop
} from "@syncfusion/ej2-vue-schedule";

Vue.use(SchedulePlugin);

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

To change the mode, you can set either Gregorian or Islamic as a value to this calendarMode property.

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.

<template>
  <ejs-schedule :cellHeaderTemplate="cellHeaderTemplate"></ejs-schedule>
</template>
<style>
</style>
<script>
import Vue from "vue";
import { Internationalization } from "@syncfusion/ej2-base";
import {
  SchedulePlugin,
  Day,
  Week,
  WorkWeek,
  Month,
  Agenda,
  Resize,
  DragAndDrop
} from "@syncfusion/ej2-vue-schedule";

Vue.use(SchedulePlugin);
let instance = new Internationalization();
var cellHeaderTemplateVue = Vue.component("cellHeaderTemplate", {
  template: `<div class="templatewrap"><div v-html=getDate(data.date)></div></div>`,
  data() {
    return {
      data: {}
    };
  },
  methods: {
    getDate: function(date) {
      return instance.formatDate(date, { skeleton: "Ed" });
    }
  }
});
export default Vue.extend({
  data: function() {
    return {
      cellHeaderTemplate: function(e) {
        return {
          template: cellHeaderTemplateVue
        };
      }
    };
  },
  provide: {
    schedule: [Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop]
  },
  methods: {}
});
</script>

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 fields accessible via template are as follows.

  • date: Returns the date of the cell.
  • groupIndex: Returns the group index of the cell.
  • type: Returns the type of the work cell. Refer to the below code snippet.
<template>
  <ejs-schedule :cellTemplate="cellTemplate"></ejs-schedule>
</template>
<style>
</style>
<script>
import Vue from "vue";
import {
  SchedulePlugin,
  Day,
  Week,
  WorkWeek,
  Month,
  Agenda,
  Resize,
  DragAndDrop
} from "@syncfusion/ej2-vue-schedule";

Vue.use(SchedulePlugin);

var cellTemplateVue = Vue.component("cellTemplate", {
  template: `<div class="templatewrap"><div v-if="data.type==='workCells'"><div v-html=getWorkCellText(data.date)></div></div><div v-else-if="data.type==='monthCells'"><div v-html=getMonthCellText(data.date)></div></div></div>`,
  data() {
    return {
      data: {}
    };
  },
  methods: {
    getWorkCellText: function(date) {
      let weekEnds = [0, 6];
      if (weekEnds.indexOf(date.getDay()) >= 0) {
        return "<img src='https://ej2.syncfusion.com/demos/src/schedule/images/newyear.svg' style='width:80%;height:80%'/>";
      }
      return "";
    },
    getMonthCellText: function(date) {
      if (date.getMonth() === 10 && date.getDate() === 23) {
        return '<img src= "https://ej2.syncfusion.com/demos/src/schedule/images/birthday.svg" style="width:80%;height:80%"/>';
      } else if (date.getMonth() === 11 && date.getDate() === 9) {
        return '<img src= "https://ej2.syncfusion.com/demos/src/schedule/images/get-together.svg" style="width:80%;height:80%"/>';
      }
      return "";
    }
  }
});
export default Vue.extend({
  data: function() {
    return {
      cellTemplate: function(e) {
        return {
          template: cellTemplateVue
        };
      }
    };
  },
  provide: {
    schedule: [Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop]
  },
  methods: {}
});
</script>

cssClass

string

It is used to customize the Schedule which accepts custom CSS class names that defines specific user-defined styles and themes to be applied on the Schedule element.

<template>
  <ejs-schedule cssClass="cell-dimension"></ejs-schedule>
</template>
<style>
</style>
<script>
import Vue from "vue";
import {
  SchedulePlugin,
  Day,
  Week,
  WorkWeek,
  Month,
  Agenda,
  Resize,
  DragAndDrop
} from "@syncfusion/ej2-vue-schedule";

Vue.use(SchedulePlugin);

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

currentView

View

To set the active view on scheduler, the currentView property can be used and it usually accepts either of the following available view options. The view option specified in this property will be initially loaded on the schedule.

  • 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.
<template>
  <ejs-schedule currentView="Day"></ejs-schedule>
</template>
<style>
</style>
<script>
import Vue from "vue";
import {
  SchedulePlugin,
  Day,
  Week,
  WorkWeek,
  Month,
  Agenda,
  Resize,
  DragAndDrop
} from "@syncfusion/ej2-vue-schedule";

Vue.use(SchedulePlugin);

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

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.

<template>
  <ejs-schedule dateFormat='dd-MMM-yyyy'></ejs-schedule>
</template>
<style>
</style>
<script>
import Vue from "vue";
import {
  SchedulePlugin,
  Day,
  Week,
  WorkWeek,
  Month,
  Agenda,
  Resize,
  DragAndDrop
} from "@syncfusion/ej2-vue-schedule";

Vue.use(SchedulePlugin);

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

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.

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.

<template>
  <ejs-schedule :dateHeaderTemplate="dateHeaderTemplate"></ejs-schedule>
</template>
<style>
</style>
<script>
import Vue from "vue";
import { Internationalization } from "@syncfusion/ej2-base";
import {
  SchedulePlugin,
  Day,
  Week,
  WorkWeek,
  Month,
  Agenda,
  Resize,
  DragAndDrop
} from "@syncfusion/ej2-vue-schedule";

Vue.use(SchedulePlugin);
let instance = new Internationalization();
var dateHeaderTemplateVue = Vue.component("dateHeaderTemplate", {
  template: `<div class="templatewrap"><div v-html=getDateHeaderText(data.date)></div></div>`,
  data() {
    return {
      data: {}
    };
  },
  methods: {
    getDateHeaderText: function(date) {
      return instance.formatDate(date, { skeleton: "Ed" });
    }
  }
});
export default Vue.extend({
  data: function() {
    return {
      dateHeaderTemplate: function(e) {
        return {
          template: dateHeaderTemplateVue
        };
      }
    };
  },
  provide: {
    schedule: [Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop]
  },
  methods: {}
});
</script>

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.

dayHeaderTemplate

string | function

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

editorFooterTemplate

string | function

The template option to render the customized footer of the editor window.

editorHeaderTemplate

string | function

The template option to render the customized header of the editor window.

editorTemplate

string | function

The template option to render the customized editor window. The form elements defined within this template should be accompanied with e-field class, so as to fetch and process it from internally.

<template>
  <ejs-schedule :editorTemplate="editorTemplate" :popupOpen="onPopupOpen"></ejs-schedule>
</template>
<style>
</style>
<script>
import Vue from "vue";
import { DropDownList } from "@syncfusion/ej2-dropdowns";
import { DateTimePicker } from "@syncfusion/ej2-calendars";
import {
  SchedulePlugin,
  Day,
  Week,
  WorkWeek,
  Month,
  Agenda,
  Resize,
  DragAndDrop
} from "@syncfusion/ej2-vue-schedule";

Vue.use(SchedulePlugin);
var editorTemplateVue = Vue.component("editorTemplate", {
  template: `<table class="custom-event-editor" width="100%" cellpadding="5"><tbody><tr>
  <td class="e-textlabel">Summary</td><td colspan="4"><input id="Subject" class="e-field e-input" type="text" value="" name="Subject" style="width: 100%" /></td></tr><tr><td class="e-textlabel">Status</td><td colspan="4"><input type="text" id="EventType" name="EventType" class="e-field" style="width: 100%" /></td></tr><tr><td class="e-textlabel">From</td><td colspan="4"><input id="StartTime" class="e-field" type="text" name="StartTime" /></td></tr><tr>
  <td class="e-textlabel">To</td><td colspan="4"><input id="EndTime" class="e-field" type="text" name="EndTime" /></td></tr><tr><td class="e-textlabel">Reason</td><td colspan="4">
  <textarea id="Description" class="e-field e-input" name="Description" rows="3" cols="50"                 style="width: 100%; height: 60px !important; resize: vertical"></textarea></td></tr></tbody></table>`,
  data() {
    return {
      data: {}
    };
  }
});
export default Vue.extend({
  data: function() {
    return {
      editorTemplate: function(e) {
        return {
          template: editorTemplateVue
        };
      }
    };
  },
  provide: {
    schedule: [Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop]
  },
  methods: {
    onPopupOpen: function(args) {
      if (args.type === "Editor") {
        let statusElement = args.element.querySelector("#EventType");
        if (!statusElement.classList.contains("e-dropdownlist")) {
          let dropDownListObject = new DropDownList({
            placeholder: "Choose status",
            value: statusElement.value,
            dataSource: ["New", "Requested", "Confirmed"]
          });
          dropDownListObject.appendTo(statusElement);
          statusElement.setAttribute("name", "EventType");
        }
        let startElement = args.element.querySelector("#StartTime");
        if (!startElement.classList.contains("e-datetimepicker")) {
          new DateTimePicker(
            { value: new Date(startElement.value) || new Date() },
            startElement
          );
        }
        let endElement = args.element.querySelector("#EndTime");
        if (!endElement.classList.contains("e-datetimepicker")) {
          new DateTimePicker(
            { value: new Date(endElement.value) || new Date() },
            endElement
          );
        }
      }
    }
  }
});
</script>

enableAdaptiveUI

boolean

When set to true, the header view navigations are listed under the popup and if we enable resource grouping, the compact view will be enabled.

enableAllDayScroll

boolean

When set to true, If valid, the scroll on the all day row is activated when the all day row height reaches the max height when the all day row is expanded.

enableHtmlSanitizer

boolean

Specifies whether to enable the rendering of untrusted HTML values in the Schedule component. When this property is enabled, the component will sanitize any suspected untrusted strings and scripts before rendering them.

enablePersistence

boolean

Enable or disable persisting component’s state between page reloads.

enableRecurrenceValidation

boolean

The recurrence validation will be done by default. When this property is set to false, the recurrence validation will be skipped.

enableRtl

boolean

Enable or disable rendering component in right to left direction.

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.

<template>
  <ejs-schedule endHour='18:00'></ejs-schedule>
</template>
<style>
</style>
<script>
import Vue from "vue";
import {
  SchedulePlugin,
  Day,
  Week,
  WorkWeek,
  Month,
  Agenda,
  Resize,
  DragAndDrop
} from "@syncfusion/ej2-vue-schedule";

Vue.use(SchedulePlugin);

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

eventDragArea

string

It enables the external drag and drop support for appointments on scheduler, to be able to move them out of the scheduler layout. When the drag area is explicitly set with specific DOM element name, the appointments can be dragged anywhere within the specified drag area location.

<template>
  <ejs-schedule eventDragArea='body'></ejs-schedule>
</template>
<style>
</style>
<script>
import Vue from "vue";
import {
  SchedulePlugin,
  Day,
  Week,
  WorkWeek,
  Month,
  Agenda,
  Resize,
  DragAndDrop
} from "@syncfusion/ej2-vue-schedule";

Vue.use(SchedulePlugin);

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

eventSettings

EventSettingsModel

Complete set of settings related to Schedule events to bind it to local or remote dataSource, map applicable database fields and other validation to be carried out on the available fields.

<template>
  <ejs-schedule :eventSettings="eventSettings"></ejs-schedule>
</template>
<style>
</style>
<script>
import Vue from "vue";
import {
  SchedulePlugin,
  Day,
  Week,
  WorkWeek,
  Month,
  Agenda,
  Resize,
  DragAndDrop
} from "@syncfusion/ej2-vue-schedule";

Vue.use(SchedulePlugin);

let data = [
  {
    Id: 1,
    Subject: "Paris",
    StartTime: new Date(2023, 1, 15, 10, 0),
    EndTime: new Date(2023, 1, 15, 12, 30)
  }
];
export default Vue.extend({
  data: function() {
    return {
      eventSettings: { dataSource: data }
    };
  },
  provide: {
    schedule: [Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop]
  },
  methods: {}
});
</script>

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.

<template>
  <ejs-schedule :firstDayOfWeek="firstDayOfWeek"></ejs-schedule>
</template>
<style>
</style>
<script>
import Vue from "vue";
import {
  SchedulePlugin,
  Day,
  Week,
  WorkWeek,
  Month,
  Agenda,
  Resize,
  DragAndDrop
} from "@syncfusion/ej2-vue-schedule";

Vue.use(SchedulePlugin);

export default Vue.extend({
  data: function() {
    return {
      firstDayOfWeek: 2
    };
  },
  provide: {
    schedule: [Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop]
  },
  methods: {}
});
</script>

firstMonthOfYear

number

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

<template>
  <ejs-schedule :firstMonthOfYear="firstMonthOfYear">
     <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 {
      firstMonthOfYear: 2
    };
  },
  provide: {
    schedule: [Year, TimelineYear, Resize, DragAndDrop]
  },
  methods: {}
});
</script>

group

GroupModel

Allows defining the group related settings of multiple resources. When this property is non-empty, it means that the resources will be grouped on the schedule layout based on the provided resource names.

<template>
  <ejs-schedule id="Schedule" :group="group">
    <e-resources>
      <e-resource
        field="AirlineId"
        title="Airline Name"
        name="Airlines"
        :allowMultiple="allowMultiple"
        :dataSource="resourceDataSource"
        textField="AirlineName"
        idField="AirlineId"
        colorField="AirlineColor"
      ></e-resource>
    </e-resources>
  </ejs-schedule>
</template>
<style>
</style>
<script>
import Vue from "vue";
import {
  SchedulePlugin,
  Day,
  Week,
  WorkWeek,
  Month,
  Agenda,
  Resize,
  DragAndDrop
} from "@syncfusion/ej2-vue-schedule";

Vue.use(SchedulePlugin);

export default Vue.extend({
  data: function() {
    return {
      allowMultiple: true,
      resourceDataSource: [
        { AirlineName: "Airways 1", AirlineId: 1, AirlineColor: "#EA7A57" },
        { AirlineName: "Airways 2", AirlineId: 2, AirlineColor: "#357cd2" },
        { AirlineName: "Airways 3", AirlineId: 3, AirlineColor: "#7fa900" }
      ],
      group: { resources: ["Airlines"] }
    };
  },
  provide: {
    schedule: [Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop]
  },
  methods: {}
});
</script>

headerIndentTemplate

string | function

Template option to customize the header indent bar. Here, the template accepts either the string or HTMLElement as template design and then the parsed design is displayed onto the header indent cell. Refer to the below code snippet.

<template>
  <ejs-schedule id="Schedule" :headerIndentTemplate="headerIndentTemplate">
  </ejs-schedule>
</template>
<style>
</style>
<script>
import Vue from "vue";
import {
  SchedulePlugin,
  Day,
  Week,
  WorkWeek,
  Resize,
  DragAndDrop
} from "@syncfusion/ej2-vue-schedule";

Vue.use(SchedulePlugin);
var headerIndentTemplateVue = Vue.component("headerTemplate", {
  template: `<div class='template-wrap' v-if="data.className[0] == 'e-header-cells'">Template</div>`,
  data() {
    return {
      data: {}
    };
  }
});
export default Vue.extend({
  data: function() {
    return {
      headerIndentTemplate: function() {
        return {
          template: headerIndentTemplateVue
        };
      }
    };
  },
  provide: {
    schedule: [Day, Week, WorkWeek, Resize, DragAndDrop]
  },
  methods: {}
});
</script>

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.

<template>
  <ejs-schedule :views="views" :headerRows="headerRows"></ejs-schedule>
</template>
<style>
</style>
<script>
import Vue from "vue";
import { SchedulePlugin, TimelineViews } from "@syncfusion/ej2-vue-schedule";

Vue.use(SchedulePlugin);

export default Vue.extend({
  data: function() {
    return {
      views: ["TimelineWeek"],
      headerRows: [
        { option: "Year" },
        { option: "Month" },
        { option: "Week" },
        { option: "Date" },
        { option: "Hour" }
      ]
    };
  },
  provide: {
    schedule: [TimelineViews]
  },
  methods: {}
});
</script>

height

string | number

Sets the height of the Schedule component, accepting both string and number values.

<template>
  <ejs-schedule height='550px'></ejs-schedule>
</template>
<style>
</style>
<script>
import Vue from "vue";
import {
  SchedulePlugin,
  Day,
  Week,
  WorkWeek,
  Month,
  Agenda,
  Resize,
  DragAndDrop
} from "@syncfusion/ej2-vue-schedule";

Vue.use(SchedulePlugin);

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

The string type includes either pixel or percentage values. When height is set with specific pixel value, then the Schedule will be rendered to that specified space. In case, if auto value is set, then the height of the Schedule gets auto-adjusted within the given container.

hideEmptyAgendaDays

boolean

The days which does not has even a single event to display will be hidden from the UI of Agenda View by default. When this property is set to false, the empty dates will also be displayed on the Schedule.

locale

string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

maxDate

Date

To define the maximum date on the Schedule, maxDate property can be defined. Usually, it defaults to the new Date(2099, 11, 31).

<template>
  <ejs-schedule :maxDate="maxDate"></ejs-schedule>
</template>
<style>
</style>
<script>
import Vue from "vue";
import { SchedulePlugin, Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop
} from "@syncfusion/ej2-vue-schedule";

Vue.use(SchedulePlugin);

export default Vue.extend({
  data: function() {
    return {
      maxDate:new Date(2021, 0, 1)
    };
  },
  provide: {
    schedule: [Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop]
  },
  methods: {}
});
</script>

minDate

Date

To define the minimum date on the Schedule, minDate property can be defined. Usually, it defaults to the new Date(1900, 0, 1).

<template>
  <ejs-schedule :minDate="minDate"></ejs-schedule>
</template>
<style>
</style>
<script>
import Vue from "vue";
import { SchedulePlugin, Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop
} from "@syncfusion/ej2-vue-schedule";

Vue.use(SchedulePlugin);

export default Vue.extend({
  data: function() {
    return {
      minDate:new Date(2020, 6, 1)
    };
  },
  provide: {
    schedule: [Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop]
  },
  methods: {}
});
</script>

monthHeaderTemplate

string | function

It accepts either the string or HTMLElement as template design content and parse it appropriately before displaying it onto the month header cells. 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.

<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>

quickInfoOnSelectionEnd

boolean

This property helps to show quick popup after multiple cell selection. By default, it is set to false.

quickInfoTemplates

QuickInfoTemplatesModel

The template option to customize the quick window. The three sections of the quick popup whereas the header, content, and footer can be easily customized with individual template option.

<template>
  <ejs-schedule :quickInfoTemplates="quickInfoTemplates"></ejs-schedule>
</template>
<style>
</style>
<script>
import Vue from "vue";
import {
  SchedulePlugin,
  Day,
  Week,
  WorkWeek,
  Month,
  Agenda,
  Resize,
  DragAndDrop
} from "@syncfusion/ej2-vue-schedule";

Vue.use(SchedulePlugin);
var headerTemplateVue = Vue.component("headerTemplate", {
  template: `<div><div v-if= "data.elementType === 'cell' "><div class="e-cell-header">
        <div class="e-header-icon-wrapper"><button class="e-close" title="Close"></button></div></div></div>
        <div v-else><div class="e-event-header"><div class="e-header-icon-wrapper"><button class="e-close" title="CLOSE"></button></div></div></div></div>`,
  data() {
    return {
      data: {}
    };
  }
});

var contentTemplateVue = Vue.component("contentTemplate", {
  template: `<div><div v-if= "data.elementType === 'cell' "><div class="e-cell-content e-template">
        <form class="e-schedule-form"><div><input class="subject e-field" type="text" name="Subject" placeholder="Title"></div><div><input class="location e-field" type="text" name="Location" placeholder="Location"></div></form></div></div><div v-else><div class="e-event-content e-template">
        <div class="e-subject-wrap"><div><div v-if="data.Subject !== undefined"><div class="subject">{{data.Subject}}</div></div></div><div><div v-if="data.Location !== undefined"><div class="location">{{data.Location}}</div></div></div><div><div v-if="data.Description !== undefined"><div class="description">{{data.Description}}</div></div></div></div></div></div></div>`,
  data() {
    return {
      data: {}
    };
  }
});

var footerTemplateVue = Vue.component("footerTemplate", {
  template: `<div><div v-if= "data.elementType === 'cell' "><div class="e-cell-footer">
        <button class="e-event-details" title="Extra Details">Extra Details</button>
        <button class="e-event-create" title="Add">Add</button></div></div>
        <div v-else><div class="e-event-footer"><button class="e-event-edit" title="Edit">Edit</button>
        <button class="e-event-delete" title="Delete">Delete</button></div></div></div>`,
  data() {
    return {
      data: {}
    };
  }
});
export default Vue.extend({
  data: function() {
    return {
      quickInfoTemplates: {
        header: function(e) {
          return {
            template: headerTemplateVue
          };
        },
        content: function(e) {
          return {
            template: contentTemplateVue
          };
        },
        footer: function(e) {
          return {
            template: footerTemplateVue
          };
        }
      }
    };
  },
  provide: {
    schedule: [Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop]
  },
  methods: {}
});
</script>

readonly

boolean

When set to true, makes the Schedule to render in a read only mode. No CRUD actions will be allowed at this time.

resourceHeaderTemplate

string | function

Template option to customize the resource header bar. Here, the template accepts either the string or HTMLElement as template design and then the parsed design is displayed onto the resource header cells. The following can be accessible via template.

  • resource - All the resource fields.
  • resourceData - Object collection of current resource. Refer to the below code snippet.
<template>
  <ejs-schedule :group="group" :resourceHeaderTemplate="resourceHeaderTemplate">
    <e-resources>
      <e-resource
        field="DoctorId"
        title="Doctor Name"
        name="Doctors"
        :dataSource="ownerDataSource"
        textField="text"
        idField="id"
        colorField="color"
      ></e-resource>
    </e-resources>
  </ejs-schedule>
</template>
<style>
</style>
<script>
import Vue from "vue";
import {
  SchedulePlugin,
  Day,
  Week,
  WorkWeek,
  Month,
  Agenda,
  Resize,
  DragAndDrop
} from "@syncfusion/ej2-vue-schedule";

Vue.use(SchedulePlugin);
var resourceHeaderTemplateVue = Vue.component("headerTemplate", {
  template: `<div class='template-wrap'><div class="resource-details"><div class="resource-name">{{data.resourceData.text}}</div><div class="resource-designation">{{data.resourceData.designation}}</div></div></div>`,
  data() {
    return {
      data: {}
    };
  }
});
export default Vue.extend({
  data: function() {
    return {
      group: {
        resources: ["Doctors"]
      },
      ownerDataSource: [
        {
          text: "Will Smith",
          id: 1,
          color: "#ea7a57",
          designation: "Cardioligst"
        },
        { text: "Alice", id: 2, color: "#7fa900", designation: "Neurologist" },
        {
          text: "Robson",
          id: 3,
          color: "#7fa900",
          designation: "Orthopedic Surgeon"
        }
      ],
      resourceHeaderTemplate: function(e) {
        return {
          template: resourceHeaderTemplateVue
        };
      }
    };
  },
  provide: {
    schedule: [Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop]
  },
  methods: {}
});
</script>

resources

ResourcesModel[]

Allows defining the collection of resources to be displayed on the Schedule. The resource collection needs to be defined with unique resource names to identify it along with the respective dataSource and field mapping options.

<template>
  <ejs-schedule :group="group">
    <e-resources>
      <e-resource
        field="AirlineId"
        title="Airline Name"
        name="Airlines"
        :allowMultiple="allowMultiple"
        :dataSource="resourceDataSource"
        textField="AirlineName"
        idField="AirlineId"
        colorField="AirlineColor"
      ></e-resource>
    </e-resources>
  </ejs-schedule>
</template>
<style>
</style>
<script>
import Vue from "vue";
import {
  SchedulePlugin,
  Day,
  Week,
  WorkWeek,
  Month,
  Agenda,
  Resize,
  DragAndDrop
} from "@syncfusion/ej2-vue-schedule";

Vue.use(SchedulePlugin);

export default Vue.extend({
  data: function() {
    return {
      allowMultiple: true,
      resourceDataSource: [
        { AirlineName: "Airways 1", AirlineId: 1, AirlineColor: "#EA7A57" },
        { AirlineName: "Airways 2", AirlineId: 2, AirlineColor: "#357cd2" },
        { AirlineName: "Airways 3", AirlineId: 3, AirlineColor: "#7fa900" }
      ],
      group: { resources: ["Airlines"] }
    };
  },
  provide: {
    schedule: [Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop]
  },
  methods: {}
});
</script>

rowAutoHeight

boolean

when set to true, allows the height of the work-cells to adjust automatically based on the number of appointments present in those time ranges.

selectedDate

Date

To mark the active (current) date on the Schedule, selectedDate property can be defined. Usually, it defaults to the current System date.

<template>
  <ejs-schedule :selectedDate="selectedDate"></ejs-schedule>
</template>
<style>
</style>
<script>
import Vue from "vue";
import {
  SchedulePlugin,
  Day,
  Week,
  WorkWeek,
  Month,
  Agenda,
  Resize,
  DragAndDrop
} from "@syncfusion/ej2-vue-schedule";

Vue.use(SchedulePlugin);

export default Vue.extend({
  data: function() {
    return {
      selectedDate: new Date(2023, 3, 4)
    };
  },
  provide: {
    schedule: [Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop]
  },
  methods: {}
});
</script>

showHeaderBar

boolean

When set to false, hides the header bar of the Schedule from UI. By default, the header bar holds the date and view navigation options, to which the user can add their own custom items onto it.

showQuickInfo

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.

showTimeIndicator

boolean

When set to false, hides the current time indicator from the Schedule. Otherwise, it visually depicts the live current system time appropriately on the user interface.

showWeekNumber

boolean

When set to true, displays the week number of the current view date range. By default, it is set 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.

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.

<template>
  <ejs-schedule startHour='10:00'></ejs-schedule>
</template>
<style>
</style>
<script>
import Vue from "vue";
import {
  SchedulePlugin,
  Day,
  Week,
  WorkWeek,
  Month,
  Agenda,
  Resize,
  DragAndDrop
} from "@syncfusion/ej2-vue-schedule";

Vue.use(SchedulePlugin);

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

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 time duration on Schedule along with the customized grid count. It also has template option to customize the time slots with required time values in its own format.

<template>
  <ejs-schedule :timeScale="timeScale"></ejs-schedule>
</template>
<style>
</style>
<script>
import Vue from "vue";
import {
  SchedulePlugin,
  Day,
  Week,
  WorkWeek,
  Month,
  Agenda,
  Resize,
  DragAndDrop
} from "@syncfusion/ej2-vue-schedule";

Vue.use(SchedulePlugin);

export default Vue.extend({
  data: function() {
    return {
      timeScale: {
        enable: true,
        interval: 60,
        slotCount: 6
      }
    };
  },
  provide: {
    schedule: [Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop]
  },
  methods: {}
});
</script>

timezone

string

Schedule will be assigned with specific timezone, so as to display the events in it accordingly. By default, Schedule dates are processed with System timezone, as no timezone will be assigned specifically to the Schedule at the initial time. Whenever the Schedule is bound to remote data services, it is always recommended to set specific timezone to Schedule to make the events on it to display on the same time irrespective of the system timezone. It usually accepts the valid IANA timezone names.

<template>
  <ejs-schedule timezone='UTC'></ejs-schedule>
</template>
<style>
</style>
<script>
import Vue from "vue";
import {
  SchedulePlugin,
  Day,
  Week,
  WorkWeek,
  Month,
  Agenda,
  Resize,
  DragAndDrop
} from "@syncfusion/ej2-vue-schedule";

Vue.use(SchedulePlugin);

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

timezoneDataSource

TimezoneFields[]

Allows to define the collection of timezone items in the Schedule. Only the items bound to this property get listed out in the timezone dropdown of the appointment window.

<template>
  <ejs-schedule :eventSettings="eventSettings"></ejs-schedule>
</template>
<style>
</style>
<script>
import Vue from "vue";
import {
  SchedulePlugin,
  Day,
  Week,
  WorkWeek,
  Month,
  Agenda,
  Resize,
  DragAndDrop
} from "@syncfusion/ej2-vue-schedule";

Vue.use(SchedulePlugin);

export default Vue.extend({
  data: function() {
    return {
      timezoneDataSource : [
                    { Value: 'Pacific/Niue', Text: 'Niue' },
                    { Value: 'Pacific/Pago_Pago', Text: 'Pago Pago' },
                    { Value: 'Pacific/Honolulu', Text: 'Hawaii Time' },
                    { Value: 'Pacific/Rarotonga', Text: 'Rarotonga' },
                    { Value: 'Pacific/Tahiti', Text: 'Tahiti' },
                ]
    };
  },
  provide: {
    schedule: [Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop]
  },
  methods: {}
});
</script>

toolbarItems

ToolbarItemModel[]

To render the custom toolbar items, the toolbarItems property can be used. It contains built-in and custom toolbar items. To avail the built-in toolbar items, the below string values are assigned to the name property of the ToolbarItemModel.

  • Previous: Schedule component navigates to the previous date from the current date.
  • Next: Schedule component navigates to the next date from the current date.
  • Today: Schedule component navigates to the current date from any date.
  • Views: Schedule component render the defined view options in the toolbar. If view option is not defined, then it will render default view options in the Schedule.
  • DateRangeText: Schedule component displays the current date text range.
  • NewEvent: Schedule component render the icon to add a new event.

views

View[] | ViewsModel[]

This property holds the views collection and its configurations. It accepts either the array of view names or the array of view objects that holds different configurations for each views. By default, Schedule displays all the views namely Day, Week, Work Week, Month and Agenda. Example for array of views:

Example for array of view objects:

weekRule

WeekRule

It allows the Scheduler to display week numbers based on following available week options. The week option specified in this property will be initially loaded on the schedule.

  • FirstDay: Denotes that the first week of the year starts on the first day of the year and ends before the following designated first day of the week.
  • FirstFourDayWeek:Denotes that the first week of the year is the first week with four or more days before the designated first day of the week.
  • FirstFullWeek: Denotes that the first week of the year begins on the first occurrence of the designated first day of the week on or after the first day of the year.
<template>
  <ejs-schedule :showWeekNumber="showWeekNumber" :weekRule="weekRule"></ejs-schedule>
</template>
<style>
</style>
<script>
import Vue from "vue";
import { SchedulePlugin, Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop
} from "@syncfusion/ej2-vue-schedule";

Vue.use(SchedulePlugin);

export default Vue.extend({
  data: function() {
    return {
      showWeekNumber: true,
      weekRule:'FirstFourDayWeek'
    };
  },
  provide: {
    schedule: [Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop]
  },
  methods: {}
});
</script>

width

string | number

Sets the width of the Schedule component, accepting both string and number values.

<template>
  <ejs-schedule width="100%"></ejs-schedule>
</template>
<style>
</style>
<script>
import Vue from "vue";
import {
  SchedulePlugin,
  Day,
  Week,
  WorkWeek,
  Month,
  Agenda,
  Resize,
  DragAndDrop
} from "@syncfusion/ej2-vue-schedule";

Vue.use(SchedulePlugin);

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

The string value can be either pixel or percentage format. When set to auto, the Schedule width gets auto-adjusted and display its content related to the viewable screen size.

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.

<template>
  <ejs-schedule :workDays="workDays"></ejs-schedule>
</template>
<style>
</style>
<script>
import Vue from "vue";
import {
  SchedulePlugin,
  Day,
  Week,
  WorkWeek,
  Month,
  Agenda,
  Resize,
  DragAndDrop
} from "@syncfusion/ej2-vue-schedule";

Vue.use(SchedulePlugin);

export default Vue.extend({
  data: function() {
    return {
      workDays: [1, 3, 5]
    };
  },
  provide: {
    schedule: [Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop]
  },
  methods: {}
});
</script>

workHours

WorkHoursModel

The working hours should be highlighted on Schedule with different color shade and an additional option must be provided to highlight it or not. This functionality is handled through workHours property and the start work hour should be 9 AM by default and end work hour should point to 6 PM. The start and end working hours needs to be provided as Time value of short skeleton type.

<template>
  <ejs-schedule :workHours="workHours"></ejs-schedule>
</template>
<style>
</style>
<script>
import Vue from "vue";
import {
  SchedulePlugin,
  Day,
  Week,
  WorkWeek,
  Month,
  Agenda,
  Resize,
  DragAndDrop
} from "@syncfusion/ej2-vue-schedule";

Vue.use(SchedulePlugin);

export default Vue.extend({
  data: function() {
    return {
      workHours: {
        highlight: true,
        start: "11:00",
        end: "20:00"
      }
    };
  },
  provide: {
    schedule: [Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop]
  },
  methods: {}
});
</script>
Previous
Next