Vue Scheduler API
The Scheduler is a UI component that represents scheduled data and allows a user to manage and edit it.
Props
An object defining configuration properties for the UI component.
| Name | Description |
|---|---|
| accessKey | Specifies the shortcut key that sets focus on the UI component. |
| adaptivityEnabled | Specifies whether the UI component adapts to small screens. |
| allDayExpr | Specifies the name of the data source item field whose value defines whether or not the corresponding appointment is an all-day appointment. |
| appointmentCollectorComponent | An alias for the appointmentCollectorTemplate property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information. |
| appointmentCollectorRender | An alias for the appointmentCollectorTemplate property specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information. |
| appointmentCollectorTemplate | Specifies a custom template for cell overflow indicators. |
| appointmentComponent | An alias for the appointmentTemplate property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information. |
| appointmentDragging | Configures appointment reordering using drag and drop gestures. |
| appointmentRender | An alias for the appointmentTemplate property specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information. |
| appointmentTemplate | Specifies a custom template for appointments. |
| appointmentTooltipComponent | An alias for the appointmentTooltipTemplate property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information. |
| appointmentTooltipRender | An alias for the appointmentTooltipTemplate property specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information. |
| appointmentTooltipTemplate | Specifies a custom template for tooltips displayed when users click an appointment or cell overflow indicator. |
| cellDuration | Specifies cell duration in minutes. This property's value should divide the interval between startDayHour and endDayHour into even parts. |
| crossScrollingEnabled | Specifies whether or not an end-user can scroll the view in both directions at the same time. |
| currentDate | Specifies the current date. |
| currentView | Specifies the displayed view. Accepts name or type of a view available in the views array. |
| customizeDateNavigatorText | Customizes the date navigator's text. |
| dataCellComponent | An alias for the dataCellTemplate property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information. |
| dataCellRender | An alias for the dataCellTemplate property specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information. |
| dataCellTemplate | Specifies a custom template for table cells. |
| dataSource | Binds the UI component to data. |
| dateCellComponent | An alias for the dateCellTemplate property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information. |
| dateCellRender | An alias for the dateCellTemplate property specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information. |
| dateCellTemplate | Specifies a custom template for day scale items. |
| dateSerializationFormat | Specifies the format in which date-time values should be sent to the server. |
| descriptionExpr | Specifies the name of the data source item field whose value holds the description of the corresponding appointment. |
| disabled | Specifies whether the UI component responds to user interaction. |
| editing | Specifies which editing operations a user can perform on appointments. |
| elementAttr | Specifies the global attributes to be attached to the UI component's container element. |
| endDateExpr | Specifies the name of the data source item field that defines the ending of an appointment. |
| endDateTimeZoneExpr | Specifies the name of the data source item field that defines the timezone of the appointment end date. |
| endDayHour | Specifies the last hour on the time scale. Accepts integer values from 0 to 24. |
| firstDayOfWeek | Specifies the first day of a week. Does not apply to the agenda view. |
| focusStateEnabled | Specifies whether the UI component can be focused using keyboard navigation. |
| groupByDate | If true, appointments are grouped by date first and then by resource; opposite if false. Applies only if appointments are grouped and groupOrientation is "horizontal". |
| groups | Specifies the resource kinds by which the scheduler's appointments are grouped in a timetable. |
| height | Specifies the UI component's height. |
| hint | Specifies text for a hint that appears when a user pauses on the UI component. |
| indicatorUpdateInterval | Specifies the time interval between when the date-time indicator changes its position, in milliseconds. |
| max | The latest date the UI component allows you to select. |
| maxAppointmentsPerCell | Specifies the limit of full-sized appointments displayed per cell. Applies to all views except "agenda". |
| min | The earliest date the UI component allows you to select. |
| noDataText | Specifies the text or HTML markup displayed by the UI component if the item collection is empty. Available for the Agenda view only. |
| onAppointmentAdded | A function that is executed after an appointment is added to the data source. |
| onAppointmentAdding | A function that is executed before an appointment is added to the data source. |
| onAppointmentClick | A function that is executed when an appointment is clicked or tapped. |
| onAppointmentContextMenu | A function that is executed when a user attempts to open the browser's context menu for an appointment. Allows you to replace this context menu with a custom context menu. |
| onAppointmentDblClick | A function that is executed when an appointment is double-clicked or double-tapped. |
| onAppointmentDeleted | A function that is executed after an appointment is deleted from the data source. |
| onAppointmentDeleting | A function that is executed before an appointment is deleted from the data source. |
| onAppointmentFormOpening | A function that is executed before an appointment details form is opened. Use this function to customize the form. |
| onAppointmentRendered | A function that is executed when an appointment is rendered. |
| onAppointmentUpdated | A function that is executed after an appointment is updated in the data source. |
| onAppointmentUpdating | A function that is executed before an appointment is updated in the data source. |
| onCellClick | A function that is executed when a view cell is clicked. |
| onCellContextMenu | A function that is executed when a user attempts to open the browser's context menu for a cell. Allows you to replace this context menu with a custom context menu. |
| onContentReady | A function that is executed when the UI component's content is ready and each time the content is changed. |
| onDisposing | A function that is executed before the UI component is disposed of. |
| onInitialized | A function used in JavaScript frameworks to save the UI component instance. |
| onOptionChanged | A function that is executed after a UI component property is changed. |
| recurrenceEditMode | Specifies the edit mode for recurring appointments. |
| recurrenceExceptionExpr | Specifies the name of the data source item field that defines exceptions for the current recurring appointment. |
| recurrenceRuleExpr | Specifies the name of the data source item field that defines a recurrence rule for generating recurring appointments. |
| remoteFiltering | Specifies whether filtering is performed on the server or client side. |
| resourceCellComponent | An alias for the resourceCellTemplate property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information. |
| resourceCellRender | An alias for the resourceCellTemplate property specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information. |
| resourceCellTemplate | Specifies a custom template for resource headers. |
| resources | Specifies an array of resources available in the scheduler. |
| rtlEnabled | Switches the UI component to a right-to-left representation. |
| scrolling | Configures scrolling. |
| selectedCellData | Currently selected cells' data. |
| shadeUntilCurrentTime | Specifies whether to apply shading to cover the timetable up to the current time. |
| showAllDayPanel | Specifies the "All-day" panel's visibility. Setting this property to false hides the panel along with the all-day appointments. |
| showCurrentTimeIndicator | Specifies the current date-time indicator's visibility. |
| startDateExpr | Specifies the name of the data source item field that defines the start of an appointment. |
| startDateTimeZoneExpr | Specifies the name of the data source item field that defines the timezone of the appointment start date. |
| startDayHour | Specifies the first hour on the time scale. Accepts integer values from 0 to 24. |
| tabIndex | Specifies the number of the element when the Tab key is used for navigating. |
| textExpr | Specifies the name of the data source item field that holds the subject of an appointment. |
| timeCellComponent | An alias for the timeCellTemplate property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information. |
| timeCellRender | An alias for the timeCellTemplate property specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information. |
| timeCellTemplate | Specifies a custom template for time scale items. |
| timeZone | Specifies the time zone for the Scheduler's grid. Accepts values from the IANA time zone database. |
| useDropDownViewSwitcher | Specifies whether a user can switch views using tabs or a drop-down menu. |
| views | Specifies and configures the views to be available in the view switcher. |
| visible | Specifies whether the UI component is visible. |
| width | Specifies the UI component's width. |
Methods
This section describes methods used to manipulate the UI component.
| Name | Description |
|---|---|
| addAppointment(appointment) | Adds an appointment. |
| beginUpdate() | Prevents the UI component from refreshing until the endUpdate() method is called. |
| defaultOptions(rule) | Specifies the device-dependent default configuration properties for this component. |
| deleteAppointment(appointment) | Deletes an appointment from the timetable and its object from the data source. |
| dispose() | Disposes of all the resources allocated to the Scheduler instance. |
| element() | Gets the root UI component element. |
| endUpdate() | Refreshes the UI component after a call of the beginUpdate() method. |
| focus() | Sets focus on the UI component. |
| getDataSource() | Gets the DataSource instance. |
| getEndViewDate() | Gets the current view's end date. |
| getInstance(element) | Gets the instance of a UI component found using its DOM node. |
| getStartViewDate() | Gets the current view's start date. |
| hideAppointmentPopup(saveChanges) | Hides an appointment details form. |
| hideAppointmentTooltip() | Hides an appointment's or cell overflow indicator's tooltip. |
| instance() | Gets the UI component's instance. Use it to access other methods of the UI component. |
| off(eventName) | Detaches all event handlers from a single event. |
| off(eventName, eventHandler) | Detaches a particular event handler from a single event. |
| on(eventName, eventHandler) | Subscribes to an event. |
| on(events) | Subscribes to events. |
| option() | Gets all UI component properties. |
| option(optionName) | Gets the value of a single property. |
| option(optionName, optionValue) | Updates the value of a single property. |
| option(options) | Updates the values of several properties. |
| repaint() | Repaints the UI component without reloading data. Call it to update the UI component's markup. |
| resetOption(optionName) | Resets a property to its default value. |
| scrollTo(date, group, allDay) | Scrolls the current view to a specified position. Available for all views except "agenda". You should specify the height property to use this method. |
| showAppointmentPopup(appointmentData, createNewAppointment, currentAppointmentData) | Shows the appointment details form. |
| showAppointmentTooltip(appointmentData, target, currentAppointmentData) | Shows a tooltip for a target element. |
| updateAppointment(target, appointment) | Updates an appointment. |
Events
This section describes events fired by this UI component.
| Name | Description |
|---|---|
| appointmentAdded | Raised after an appointment is added to the data source. |
| appointmentAdding | Raised before an appointment is added to the data source. |
| appointmentClick | Raised when an appointment is clicked or tapped. |
| appointmentContextMenu | Raised when a user attempts to open the browser's context menu for an appointment. |
| appointmentDblClick | Raised when an appointment is double-clicked or double-tapped. |
| appointmentDeleted | Raised after an appointment is deleted from the data source. |
| appointmentDeleting | Raised before an appointment is deleted from the data source. |
| appointmentFormOpening | Raised before an appointment details form is opened. |
| appointmentRendered | Raised when an appointment is rendered. |
| appointmentUpdated | Raised after an appointment is updated in the data source. |
| appointmentUpdating | Raised before an appointment is updated in the data source. |
| cellClick | Raised when a view cell is clicked. |
| cellContextMenu | Raised when a user attempts to open the browser's context menu for a cell. |
| contentReady | Raised when the UI component's content is ready. |
| disposing | Raised before the UI component is disposed of. |
| initialized | Raised only once, after the UI component is initialized. |
| optionChanged | Raised after a UI component property is changed. |
If you have technical questions, please create a support ticket in the DevExpress Support Center.