ej-schedule represents the VueJS Schedule Component.
<ejs-schedule></ejs-schedule> 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.
Defaults to 7
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.
Defaults to true
boolean
When set to true, allows the keyboard interaction to take place on Schedule.
Defaults to true
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.
Defaults to true
string
It allows the Scheduler to display in other calendar modes.
By default, Scheduler is displayed in Gregorian calendar mode.
To change the mode, you can set either Gregorian or Islamic as a value to this calendarMode property.
Defaults to ‘Gregorian’
string
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.
Defaults to null
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.
Defaults to null
string
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.
Defaults to ‘Week’
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.
Defaults to null
string
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.
{% codeBlock src=“schedule/date-header-api/index.ts” %}{% endcodeBlock %}
Defaults to null
string
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.
{% codeBlock src=“schedule/editor-api/index.html” %}{% endcodeBlock %}
{% codeBlock src=“schedule/editor-api/index.ts” %}{% endcodeBlock %}
Defaults to null
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.
Defaults to false
boolean
Enable or disable persisting component’s state between page reloads.
Defaults to false
boolean
When set to true, enables the RTL mode on the Schedule, so that the Schedule and its content displays in the direction
from right to left.
Defaults to false
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’
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.
Defaults to null
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.
Defaults to null
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
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. {% codeBlock src=“schedule/group-api/index.ts” %}{% endcodeBlock %}
Defaults to {}
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. {% codeBlock src=“schedule/header-rows-api/index.ts” %}{% endcodeBlock %}
Defaults to []
string | number
Sets the height of the Schedule component, accepting both string and number values.
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.
Defaults to ‘auto’
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.
Defaults to true
string
Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.
Defaults to undefined
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. {% codeBlock src=“schedule/quick-info-template-api/index.html” %}{% endcodeBlock %} {% codeBlock src=“schedule/quick-info-template-api/index.ts” %}{% endcodeBlock %}
Defaults to null
boolean
When set to true, makes the Schedule to render in a read only mode. No CRUD actions will be allowed at this time.
Defaults to false
string
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.
Defaults to null
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. {% codeBlock src=“schedule/resources-api/index.ts” %}{% endcodeBlock %}
Defaults to []
Date
To mark the active (current) date on the Schedule, selectedDate property can be defined.
Usually, it defaults to the current System date.
Defaults to ‘new Date()’
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.
Defaults to true
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.
Defaults to true
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.
Defaults to true
boolean
When set to true, displays the week number of the current view date range.
By default, it is set to false.
Defaults to false
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
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’
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. {% codeBlock src=“schedule/timescale-api/index.ts” %}{% endcodeBlock %}
Defaults to { enable: true, interval: 60, slotCount: 2, majorSlotTemplate: null, minorSlotTemplate: null }
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.
Defaults to null
string[] | 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:
{% codeBlock src=“schedule/view-api/index.ts” %}{% endcodeBlock %}
Example for array of view objects:
{% codeBlock src=“schedule/view-api/array.ts” %}{% endcodeBlock %}
Defaults to ’[‘Day’, ‘Week’, ‘WorkWeek’, ‘Month’, ‘Agenda’]’
string | number
Sets the width of the Schedule component, accepting both string and number values.
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.
Defaults to ‘auto’
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]’
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.
Defaults to { highlight: true, start: ‘09:00’, end: ‘18:00’ }
Adds the newly created event into the Schedule dataSource.
| Parameter | Type | Description |
|---|---|---|
| data | Object | Object[] |
Single or collection of event objects to be added into Schedule. |
Returns void
Adds the resources to the specified index.
Returns void
Deletes the events based on the provided ID or event collection in the argument list.
| Parameter | Type | Description |
|---|---|---|
| id | string | number | Object | [] | Single event objects to be removed from the Schedule. |
|
| currentAction (optional) | string |
Denotes the delete action that takes place either on occurrence or series events. The valid current action names are Delete, DeleteOccurrence or DeleteSeries. |
Returns void
Destroys the Schedule component.
Returns void
Allows the Scheduler events data to be exported as an Excel file either in .xlsx or .csv file formats.
By default, the whole event collection bound to the Scheduler gets exported as an Excel file.
To export only the specific events of Scheduler, you need to pass the custom data collection as
a parameter to this exportToExcel method. This method accepts the export options as arguments such as fileName,
exportType, fields, customData, and includeOccurrences. The fileName denotes the name to be given for the exported
file and the exportType allows you to set the format of an Excel file to be exported either as .xlsx or .csv.
The custom or specific field collection of event dataSource to be exported can be provided through fields option
and the custom data collection can be exported by passing them through the customData option. There also exists
option to export each individual instances of the recurring events to an Excel file, by setting true or false to the
includeOccurrences option, denoting either to include or exclude the occurrences as separate instances on an exported Excel file.
| Parameter | Type | Description |
|---|---|---|
| excelExportOptions (optional) | ExportOptions |
The export options to be set before start with exporting the Scheduler events to an Excel file. |
Returns void
Exports the Scheduler events to a calendar (.ics) file. By default, the calendar is exported with a file name Calendar.ics.
To change this file name on export, pass the custom string value as fileName to get the file downloaded with this provided name.
| Parameter | Type | Description |
|---|---|---|
| fileName (optional) | string |
Accepts the string value. |
Returns void
Retrieves the start and end time information of the specific cell element.
Returns CellClickEventArgs
Retrieves the dates that lies on active view of Schedule.
Returns Object[]
Retrieves the events that lies on the current date range of the active view of Schedule.
Returns Object[]
To retrieve the appointment object from element.
| Parameter | Type | Description |
|---|---|---|
| element | Element |
Denotes the event UI element on the Schedule. |
Returns Object
Retrieves the entire collection of events bound to the Schedule.
Returns Object[]
Retrieves the occurrences of a single recurrence event based on the provided parent ID.
| Parameter | Type | Description |
|---|---|---|
| eventID | number | string |
ID of the parent recurrence data from which the occurrences are fetched. |
Returns Object[]
Retrieves all the occurrences that lies between the specific start and end time range.
| Parameter | Type | Description |
|---|---|---|
| startTime | Date |
Denotes the start time range. |
| endTime | Date |
Denotes the end time range. |
Returns Object[]
Retrieves the resource details based on the provided resource index.
| Parameter | Type | Description |
|---|---|---|
| index | number |
index of the resources at the last level. |
Returns ResourceDetails
When the spinner is shown manually using showSpinner method, it can be hidden using this hideSpinner method.
Returns void
Imports the events from an .ics file downloaded from any of the calendars like Google or Outlook into the Scheduler. This method accepts the blob object of an .ics file to be imported as a mandatory argument.
| Parameter | Type | Description |
|---|---|---|
| fileContent | Blob |
Accepts the file object. |
Returns void
To check whether the given time range slots are available for event creation or already occupied by other events.
| Parameter | Type | Description |
|---|---|---|
| startTime | Date |
Denotes the start time of the slot. |
| endTime | Date |
Denotes the end time of the slot. |
| groupIndex (optional) | number |
Defines the resource index from last level. |
Returns boolean
To manually open the event editor on specific time or on certain events.
| Parameter | Type | Description |
|---|---|---|
| data | Object |
It can be either cell data or event data. |
| action | string |
Defines the action for which the editor needs to be opened such as either for new event creation or for editing of existing events. The applicable action names that can be used here are Add, Save, EditOccurrenceand EditSeries. |
| isEventData (optional) | boolean |
It allows to decide whether the editor needs to be opened with the clicked cell details or with the passed event details. |
| repeatType (optional) | number |
It opens the editor with the recurrence options based on the provided repeat type. |
Returns void
Refreshes the event dataSource. This method may be useful when the events alone in the schedule needs to be re-rendered.
Returns void
Removes the specified resource.
| Parameter | Type | Description |
|---|---|---|
| resourceId | string | number |
Specifies the resource id to be removed. |
| name | string |
Specifies the resource name from which the id should be referred. |
Returns void
Updates the changes made in the event object by passing it as an parameter into the dataSource.
| Parameter | Type | Description |
|---|---|---|
| data | Object | [] | Single or collection of event objects to be saved into Schedule. |
|
| currentAction (optional) | string |
Denotes the action that takes place either for editing occurrence or series. The valid current action names are EditOccurrence or EditSeries. |
Returns void
Scrolls the Schedule content area to the specified time.
| Parameter | Type | Description |
|---|---|---|
| hour | string |
Accepts the time value in the skeleton format of ‘Hm’. |
Returns void
Sets different working hours on the required working days by accepting the required start and end time as well as the date collection as its parameters.
| Parameter | Type | Description |
|---|---|---|
| dates | Date[] |
Collection of dates on which the given start and end hour range needs to be applied. |
| start | string |
Defines the work start hour. |
| end | string |
Defines the work end hour. |
| groupIndex (optional) | number |
Defines the resource index from last level. |
Returns void
Allows to show the spinner on schedule at the required scenarios.
Returns void
Triggers on beginning of every scheduler action.
Triggers on successful completion of the scheduler actions.
Triggers when a scheduler action gets failed or interrupted and an error information will be returned.
Triggers when the scheduler cells are single clicked or on single tap on the same cells in mobile devices.
Triggers when the scheduler cells are double clicked.
EmitType<Object>
Triggers after the scheduler component is created.
EmitType<string>
Triggers before the data binds to the scheduler.
EmitType<string>
Triggers once the event data is bound to the scheduler.
EmitType<Object>
Triggers when the scheduler component is destroyed.
Triggers when an appointment is being in a dragged state.
Triggers when an appointment is started to drag.
Triggers when the dragging of appointment is stopped.
Triggers when the events are single clicked or on single tapping the events on the mobile devices.
Triggers before each of the event getting rendered on the scheduler user interface.
Triggers before the date or view navigation takes place on scheduler.
Triggers before any of the scheduler popups opens on the page.
Triggers before each element of the schedule rendering on the page.
Triggers when an appointment is started to resize.
Triggers when the resizing of appointment is stopped.
Triggers when an appointment is being in a resizing action.