Appointments in JavaScript Scheduler control

Appointments in the Scheduler represent events scheduled for specific time periods. Each appointment can be configured for various time ranges and categorized based on its duration and recurrence pattern. The Scheduler supports the following appointment types:

• Normal events
• Spanned events
• All-day events
• Recurring events

Normal events

Normal events are appointments scheduled within a specific time interval on a single day.

Creating a normal event

Here’s an example of how to create a normal event in the Scheduler using simple JSON data:

Spanned events

Spanned events are appointments that extend beyond 24 hours. By default, these events display in the all-day row. This category also includes events spanning multiple days but lasting less than 24 hours, which appear appropriately on both days.

For example, an appointment scheduled from November 25, 2018, at 11:00 PM to November 26, 2018, at 2:00 AM (spanning less than 24 hours) will be split and displayed across both days.

Customize the rendering of the spanned events

By default, the Scheduler renders spanned events (appointments lasting more than 24 hours) in the all-day row. To display these events within work cells instead, set the spannedEventPlacement option to TimeSlot within the eventSettings property. The following example demonstrates this customization:

All-day events

All-day events are appointments that occupy an entire day, such as holidays or full-day conferences. These events typically display in a separate all-day row below the date header section. In Timeline views, all-day appointments appear within the main content area since these views do not include a separate all-day row.

To designate a normal appointment as an all-day event, set the isAllDay field to true.

Hide all-day row events

The all-day row appointments can be hidden from the Scheduler UI using CSS customization:

    <style>
        .e-schedule .e-date-header-wrap .e-schedule-table thead {
           display: none;
        }
    </style>

The all-day row supports scrolling functionality. For more information, refer to the enable scroll option on all-day section documentation.

Expand all day appointments view on initial load

When numerous appointments exist in the all-day view, the dataBound event can be utilized to automatically display all all-day events on initial load, eliminating the need for users to manually click the expand toggle.

Recurring events

Recurring events are appointments that repeat at regular intervals according to a defined recurrence rule. These events can recur daily, weekly, monthly, or yearly, and are typically indicated by a repeat marker icon at the bottom-right corner of the appointment.

Creating a recurring event

The following example demonstrates how to create a recurring event in the Scheduler with a specific recurrenceRule. In this example, an event recurs daily and ends after 5 occurrences:

Adding exceptions

Specific dates can be excluded from a recurrence series by adding them to the recurrenceException field. Exception dates must be provided in ISO date-time format without hyphens (-) separating date elements.

For example, February 22, 2018, should be represented as “20180222”. The time component in UTC format requires a “Z” suffix without spaces. For instance, “07:30:00 UTC” becomes “073000Z”.

Editing an occurrence from a series

To edit a particular occurrence from an event series and display it on the initial Scheduler load, add the edited occurrence as a new event to the dataSource collection. Include an additional recurrenceID field that references the ID value of the parent event.

In the following example, a recurring instance appearing on January 30, 2018, is modified with alternative timings. This date is removed from the parent repeating event (running from January 28 to February 4, 2018) by populating the recurrenceException field on the parent event with the excluded date value. The edited occurrence, created as a new event, includes a recurrenceID field that references the parent event’s Id value.

Edit only the current and following events

To edit only the current and following events in a recurring series, enable the editFollowingEvents property within eventSettings. Add the edited occurrence as a new event to the dataSource collection with an additional followingID field that references the ID value of the immediate parent event.

In the following example, a recurring instance appearing on January 30, 2018, and all following dates are modified with a different subject. These dates are removed from the parent repeating event (repeating from January 28 to February 4, 2018) by modifying the recurrenceRule field on the parent event with an until date value. The updated events, created as new events, include a followingID field that references the immediate parent event’s Id value.

Recurrence options and rules

Events can repeat on daily, weekly, monthly, or yearly bases using recurrence rules. The following details must be assigned to the recurrenceRule property to generate recurring instances:

• Repeat type (daily/weekly/monthly/yearly)
• Repetition frequency
• Interval duration
• Time period for rendering the appointment

Four repeat types are available:

• Daily - Creates recurring instances on a daily basis.
• Weekly - Creates recurring instances on a weekly basis for selected days.
• Monthly - Creates recurring instances on a monthly basis for selected months and other specified recurrence criteria.
• Yearly - Creates recurring instances on a yearly basis.

Recurrence properties

The following table describes the properties used to create recurrence appointments with their respective time periods. Valid rule strings can be referenced from iCalendar specifications.

Refer to iCalendar specifications for valid recurrence rule string formats.

Property	Purpose	Example
FREQ	Maintains the repeat type (Daily, Weekly, Monthly, Yearly) value of the appointment.	FREQ=DAILY;INTERVAL=1
INTERVAL	Maintains the interval value of the appointments. When you create the daily appointment at an interval of 2, the appointments are rendered on the days Monday, Wednesday and Friday (Creates an appointment on all days by leaving the interval of one day gap).	FREQ=DAILY;INTERVAL=2
COUNT	It holds the appointment’s count value. When the COUNT value is 10, then 10 instances of appointments are created in the recurrence series.	FREQ=DAILY;INTERVAL=1;COUNT=10
UNTIL	This property holds the end date value (in ISO format) denoting when the recurrence actually ends.	FREQ=DAILY;INTERVAL=1;UNTIL=20180530T041343Z;
BYDAY	It holds the day value(s), representing on which the appointments actually renders. Create the weekly appointment, and select the day(s) from the day options (Monday/Tuesday/Wednesday/Thursday/Friday/Saturday/Sunday). When Monday is selected, the first two letters of the selected day “MO” is saved in the BYDAY property. When multiple days are selected, the values are separated by commas.	FREQ=WEEKLY;INTERVAL=1;BYDAY=MO,WE;COUNT=10
BYMONTHDAY	This property is used to store the date value of the Month, while creating the Month recurrence appointment. When you create a Monthly recurrence appointment for every 3rd day of the month, then BYMONTHDAY holds the value 3 and creates the appointment on 3rd day of every month.	FREQ=MONTHLY;BYMONTHDAY=3;INTERVAL=1;COUNT=10
BYMONTH	This property is used to store the index value of the selected Month while creating the yearly appointments. When you create the yearly appointment on June month, the index value of June month 6 will get stored in the BYMONTH field. The appointment is created on every 6th month of a year.	FREQ=YEARLY;BYMONTHDAY=16;BYMONTH=6;INTERVAL=1;COUNT=10
BYSETPOS	This property is used to store the index value of the week. When you create the monthly appointment in second week of a month, the index value of the second week (2) is stored in BYSETPOS.	FREQ=MONTHLY;BYDAY=MO;BYSETPOS=2;COUNT=10

The default recurrence validation for appointments follows Outlook-style validation. This validation occurs during the creation, editing, dragging, dropping, or resizing of recurrence appointments, and when any single occurrence is modified.

Daily Frequency

Description	Example
Daily recurring event that never ends	FREQ=DAILY;INTERVAL=1
Daily recurring event that ends after 5 occurrences	FREQ=DAILY;INTERVAL=1;COUNT=5
Daily recurring event that ends exactly on 12/12/2018	FREQ=DAILY;INTERVAL=1;UNTIL=20181212T041343Z
Daily event that recurs on alternative days and repeats for 10 occurrences	FREQ=DAILY;INTERVAL=2;COUNT=10

Weekly Frequency

Description	Example
Weekly recurring event that repeats on every Monday, Wednesday and Friday and never ends	FREQ=WEEKLY;INTERVAL=1;BYDAY=MO,WE,FR
Repeats every week Thursday and ends after 10 occurrences	FREQ=WEEKLY;INTERVAL=1;BYDAY=TH; COUNT=10
Repeats every week Monday and ends on 12/12/2018	FREQ=WEEKLY;INTERVAL=1;BYDAY=MO; UNTIL=20181212T041343Z
Repeats on Monday, Wednesday and Friday of alternative weeks and ends after 10 occurrences	FREQ=WEEKLY;INTERVAL=2;BYDAY=MO,WE,FR;COUNT=10

Monthly Frequency

Description	Example
Monthly recurring event that repeats on every 15th day of a month and never ends	FREQ=MONTHLY; BYMONTHDAY=15;INTERVAL=1
Monthly recurring event that repeats on every 16th day of a month and ends after 10 occurrences	FREQ=MONTHLY;BYMONTHDAY=16;INTERVAL=1;COUNT=10
Repeats every 17th day of a month and ends on 12/12/2018	FREQ=MONTHLY;BYMONTHDAY=17; INTERVAL=1;UNTIL=20181212T041343Z
Repeats every 2nd Friday of a month and never ends	FREQ=MONTHLY;BYDAY=FR;BYSETPOS=2; INTERVAL=1
Repeats every 4th Wednesday of a month and ends after 10 occurrences	FREQ=MONTHLY;BYDAY=WE; BYSETPOS=4;INTERVAL=1;COUNT=10
Repeats every 4th Friday of a month and ends on 12/12/2018	FREQ=MONTHLY;BYDAY=FR;BYSETPOS=4; INTERVAL=1;UNTIL=20181212T041343Z;

Yearly Frequency

Description	Example
Yearly event that repeats on every 15th day of December month and never ends	FREQ=YEARLY; BYMONTHDAY=15;BYMONTH=12;INTERVAL=1
Event that repeats on every 10th day of December month and ends after 10 occurrences	FREQ=YEARLY; BYMONTHDAY=10;BYMONTH=12;INTERVAL=1;COUNT=10
Repeats on every 12th day of December month and ends on 12/12/2025	FREQ=YEARLY;BYMONTHDAY=12; BYMONTH=12;INTERVAL=1;UNTIL=20251212T041343Z
Repeats on every 3rd Friday of December month and never ends	FREQ=YEARLY;BYDAY=FR;BYMONTH=12; BYSETPOS=3;INTERVAL=1
Repeats on every 3rd Tuesday of December month and ends after 10 occurrences	FREQ=YEARLY; BYDAY=TU;BYMONTH=12;BYSETPOS=3;INTERVAL=1;COUNT=10
Repeats on every 4th Wednesday of December month and ends on 12/12/2028	FREQ=YEARLY;BYDAY=WE; BYMONTH=12;BYSETPOS=4;INTERVAL=1;UNTIL=20281212T041343Z

Recurrence Validation

Built-in validation support is enabled by default for recurring appointments during creation, editing, drag and drop, and resize actions. The following validation alerts may display in the Scheduler when creating or editing recurring events:

Validation messages	Description
The recurrence pattern is not valid.	This alert will raise, when the selected recurrence rule value is not a valid one. For example, when you try to select the end date value (using Until option) for a recurring event, which occurs before the start date, an alert will popup out saying that the chosen pattern is invalid.
The changes made to specific instances of this series will be cancelled and those events will match the series again.	This alert will raise, when you try to edit the whole series, whose occurrence might have been already edited. For example, If there are five occurrences and one of the occurrence is already edited. Now, when you try to edit the entire series, you will get this validation alert.
The duration of the event must be shorter than how frequently it occurs. Shorten the duration, or change the recurrence pattern in the recurrence event editor.	This validation will occur, if the event duration is longer than the selected frequency. For example, if you create a recurring appointment with two days duration in Daily frequency with no intervals set to it, you may get this alert.
Some months have fewer than the selected date. For these months, the occurrence will fall on the last date of the month.	When you try to create a recurring appointment on 31st of every month, where few months won’t have 31 days and in this scenario, you will get this alert.
Two occurrences of the same event cannot occur on the same day.	This validation will occur, when you try to edit or move any single occurrence to some other date, where another occurrence of the same event is already present.

Event fields

The Scheduler dataSource contains event instances, where each instance includes a collection of appropriate fields. When binding remote data, these fields must be mapped to their equivalent database fields. For local JSON data, the field names defined within instances must be correctly mapped with the Scheduler event fields.

To create an event in the Scheduler, defining startTime and endTime is sufficient. The id field becomes mandatory for processing CRUD actions on appropriate events.

Built-in fields

The built-in fields available on Scheduler event objects are as follows:

Field name	Description
id	The id field needs to be defined as mandatory and this field usually assigns a unique ID value to each of the events.
subject	The subject field is optional, and usually assigns the summary text to each of the events.
startTime	The startTime field defines the start time of an event and it is mandatory to provide it for any of the valid event objects.
endTime	The endTime field defines the end time of an event and it is mandatory to provide the end time for any of the valid event objects.
startTimezone	It maps the startTimezone field from the dataSource and usually accepts the valid IANA timezone names. It is assumed that the value provided for this field is taken into consideration while processing the startTime field. When this field is not mapped with any timezone names, then the events will be processed based on the timezone assigned to the Scheduler.
endTimezone	It maps the endTimezone field from the dataSource and usually accepts the valid IANA timezone names. It is assumed that the value provided for this field is taken into consideration while processing the endTime field. When this field is not mapped with any timezone names, then the events will be processed based on the timezone assigned to the Scheduler.
location	It maps the location field from the dataSource and the location text value will be displayed over the events.
description	It maps the description field from the dataSource and denotes the event description which is optional.
isAllDay	The isAllDay field is mapped from the dataSource and is used to denote whether an event is created for an entire day or for specific time alone. Usually, an event with isAllDay field set to true will be considered as an all-day event.
recurrenceID	It maps the recurrenceID field from dataSource and usually holds the ID value of the parent recurrence event. This field is applicable only for the edited occurrence events.
recurrenceRule	It maps the recurrenceRule field from dataSource and holds the recurrence rule value in a string format. Also, it uniquely identifies whether the event belongs to a recurring type or normal ones.
recurrenceException	It maps the recurrenceException field from dataSource and is used to hold the collection of exception dates, on which the recurring occurrences needs to be excluded. The recurrenceException should be specified in UTC format.
isReadonly	It maps the isReadonly field from dataSource. It is mainly used to make specific appointments as readonly when set to true.
isBlock	It maps the isBlock field from dataSource. It is used to block the particular time ranges in the Scheduler and prevents the event creation on those time slots.

Binding different field names

When event instances have default mapping names, manual mapping is unnecessary. However, if the Scheduler’s dataSource contains events with different field names, mapping them to their equivalent field names within the eventSettings property becomes necessary.

The mapper field id is of string type with no additional validation options, whereas all other fields are of Object type with additional options available.

Event field settings

Each Scheduler event field includes additional settings, such as options to set default values, map to appropriate dataSource fields, validate each event field, and provide label values for the event window.

Options	Description
default	Accepts the default value to the applicable fields (Subject, Location and Description), when no values are provided to them from dataSource.
name	Accepts the field name to be mapped from the dataSource fields.
title	Accepts the label values to be displayed for the fields of event editor.
validation	Defines the validation rules to be applied on the event fields within the event editor.

In the following example, the Subject field in the event editor displays the label Summary. If no subject value is provided when saving an event, the appointment is saved with the default subject value Add Summary.

Adding Custom fields

In addition to default Scheduler fields, any number of custom fields can be included for appointments. The following code example demonstrates how to incorporate two custom fields, Status and Priority, within the event collection. Binding custom fields within eventSettings is optional; however, these additional fields can be easily accessed for internal processing and from the application end.

Customize the order of the overlapping events

By default, the Scheduler renders overlapping events based on their start and end times. The order of overlapping events can be customized using the sortComparer property within the eventSettings property. The following code example demonstrates how to sort appointments based on a custom field:

Preventing Overlapping Events

By default, the Scheduler displays overlapping events according to their start and end times. To prevent overlapping, set the allowOverlap property to false.

When this property is set to false, any new or updated events overlapping with existing ones will trigger an overlap alert. Overlapping events are collected in the overlapEvents property within the PopupOpenEventArgs.

When allowOverlap is set to false, the Scheduler behaves as follows:

Initial Load Behavior: Upon initial loading, the Scheduler prioritizes non-overlapping events based on duration and all-day status. Events with longer durations and all-day designations receive higher priority to ensure no overlaps.

Recurring Appointments: If conflicts exist within a recurring appointment series during initial load, the Scheduler displays all occurrences except the conflicting instance.

Event Modifications: When users edit, save, or remove appointments, the Scheduler checks for potential overlaps. If a conflict is detected, the action is blocked, and a conflict alert is displayed to the user.

Dynamic Recurrence Series Creation or Editing: When users create or edit a recurrence series dynamically, the Scheduler prevents any occurrences from being added if a conflict is found within the series.

The following code example demonstrates how to enable the allowOverlap property:

Limitations

The allowOverlap property checks for event overlaps only within the currently visible date range. Events scheduled outside the rendered date range are not included in the overlap check by default.

To check for overlaps with events outside the visible date range, leverage the promise field within the actionBegin event to validate all events before proceeding. By implementing a custom validation method inside the actionBegin event, the result (a boolean) can be assigned to the promise field. If the result is true, the action (e.g., adding or saving the event) proceeds; if false, the action is blocked.

Additionally, the public method openOverlapAlert can be used to display an alert popup whenever an overlap occurs and the result is false.

The following code example demonstrates how to check for overlaps when adding an event. If an overlap is found, the event is not added, and an alert is displayed:

Drag and drop appointments

Appointments can be rescheduled to any time by dragging and dropping them to the desired location. To use drag-and-drop functionality, inject the DragAndDrop module and ensure allowDragAndDrop is set to true (the default value). In mobile mode, tap and hold an event, then drop it at the desired location.

By default, drag-and-drop is available in all Scheduler views except Agenda, Month-Agenda, and Year views.

Drag and drop multiple appointments

Multiple appointments can be dragged and dropped by enabling the allowMultiDrag property. Select multiple appointments by holding the CTRL key, then release it and begin dragging the events.

Multiple events can also be dragged from one resource to another. If all selected events belong to different resources, they will all be moved to the single resource associated with the target event.

Note: Dragging and dropping multiple events is not supported on mobile devices.

Disable the drag action

By default, events can be dragged and dropped within any applicable Scheduler view. To disable this functionality, set the allowDragAndDrop property to false.

Preventing drag and drop on specific targets

Drag actions on specific targets can be prevented by specifying the target to exclude in the excludeSelectors option within the dragStart event. In the following example, drag actions are prevented on the all-day row:

Disable scrolling on drag action

By default, when dragging an appointment to the edges (top or bottom in vertical Scheduler, or left or right in timeline Scheduler), automatic scrolling occurs. To prevent this scrolling action, set the scroll value to false within the dragStart event arguments.

Controlling scroll speed while dragging an event

The scrolling speed while dragging an appointment to the Scheduler edges can be controlled within the dragStart event by setting desired values for scrollBy and timeDelay options. Default values are 30 minutes for scrollBy and 100 ms for timeDelay.

Auto navigation of date ranges on dragging an event

When an event is dragged to either the left or right extreme edges of the Scheduler and held for a few seconds without dropping, auto-navigation of date ranges can be enabled. This allows the Scheduler to navigate back and forth between the current date range. By default, this action is set to false. To enable it, set navigation to true within the dragStart event.

By default, the navigation delay is set to 2000 ms, determining how long a user must drag and hold appointments at the extremities. A custom delay value can be set using the timeDelay option within the dragStart event.

Setting drag time interval

By default, when dragging an appointment, it moves in 30-minute intervals. To change the dragging time interval, pass appropriate values to the interval option within the dragStart event.

Drag and drop items from external source

It is possible to drag and drop unplanned items from any external source into the scheduler by manually saving the dropped items as new appointment data using the addEvent method of the scheduler.

In the following example, the tree view control serves as the external source, with child nodes dragged and dropped onto the Scheduler. The [nodeDragStop] event of the TreeView component is utilized to create an event object and save it using the addEvent method.

Opening the editor window on drag stop

In scenarios where opening the editor filled with data at a newly dropped location is desired, proceeding to save only when the Save button is clicked, and reverting changes when Cancel is clicked, use the dragStop event of the Scheduler.

Inline Appointment

The Scheduler provides inline Add/Edit support for managing appointment subjects directly. This feature enables users to quickly manage appointments without opening a separate dialog.

To add an appointment inline:

1. Single-click on any Scheduler cell or press enter on selected cells.
2. A text box appears within the clicked cell with a blinking cursor.
3. Enter the appointment subject.
4. Press enter to save the appointment.

To edit an appointment inline:

1. Single-click on an existing appointment’s subject.
2. The subject becomes editable.
3. Make changes.
4. Press enter to update the appointment.

Enable or disable this feature using the allowInline property, which is set to false by default.

Important notes:

• When allowInline is enabled, showQuickInfo is turned off.
• The quick popup does not appear when clicking on a work cell or appointment if allowInline is set to true.
• In work cells, multiple cells can be selected using the keyboard, then press enter to create an appointment wrapper.
• Be aware of potential overlapping scenarios when creating inline events.

Normal Event

For editing appointments, single-click the appointment subject. The editable option is enabled in the UI with cursor focus at the text end. Inline editing is available for all possible views.

Recurrence Event

When editing an occurrence from a recurrence series, only a single occurrence can be edited, not the entire series.

Appointment Resizing

Another way to reschedule appointments is by resizing them. To use resizing functionality, inject the Resize module and ensure the allowResizing property is set to true (the default value).

Disable the resize action

By default, resizing events is allowed on all Scheduler views except Agenda and Month-Agenda view. To disable event resizing, set allowResizing to false.

Disable scrolling on resize action

By default, when resizing an appointment and its handler reaches the edge of the Scheduler, scrolling occurs along with event resizing. To prevent this scrolling action, set the scroll value to false within the resizeStart event.

Controlling scroll speed while resizing an event

The scrolling speed when resizing an appointment to the Scheduler edges can be controlled by setting the desired value for the scrollBy option within the resizeStart event.

Setting resize time interval

By default, when resizing an appointment, it extends or shrinks at 30-minute intervals. To change this default resize interval, set appropriate values to the interval option within the resizeStart event.

Appointment customization

The Scheduler provides multiple approaches to customize the appearance of appointments. Use the most appropriate method based on requirements:

• Customize appointments using templates
• Customize appointments using using eventRendered event
• Customize appointments using CSS classes

Using template

Add text, images, and links to customize the appearance of events. Use the template option within the eventSettings property to format and change the default appearance of events. The following example customizes the appointment’s default color and time format:

All built-in fields mapped to appropriate field properties within eventSettings, as well as custom mapped fields from the Scheduler dataSource, can be accessed within the template code.

Customize appointments using eventRendered event

The eventRendered event triggers before an appointment is rendered on the Scheduler. Use this client-side event to customize the appearance of appointments based on specific criteria before rendering them.

Customize appointments using CSS classes

You can also customize event appearance using the cssClass property of the Scheduler. The following example changes the background of appointments using cssClass:

Setting minimum height

You can set a minimal height for appointments on the Scheduler using the eventRendered event when the start and end time duration is less than the default duration of a single slot.

Block Dates and Times

Block a set of dates or specific time ranges on the Scheduler by defining an appointment object within eventSettings with the required time range and setting the isBlock field to true. Appointments with the isBlock field set to true will prevent users from creating new appointments, dragging existing appointments, or resizing appointments within the specified time ranges defined by startTime and endTime fields.

Block appointments can also be defined to repeat on several days as shown in the following code example.

Readonly

Enable or disable interaction with Scheduler appointments using the readonly property. When enabled, navigation between Scheduler dates and views is allowed, and appointment details can be viewed in the quick info window. However, CRUD actions cannot be performed on the Scheduler. By default, this property is set to false.

Make specific events readonly

In some scenarios, CRUD actions on specific appointments may need to be restricted based on certain conditions. For example, past appointments can be made readonly. This can be achieved by setting the isReadonly field of readonly appointments to true.

By default, the event editor is prevented from opening on readonly events when the isReadonly field is set to true.

Restricting appointment creation on specific time slots

Restrict users from creating and updating more than one appointment on specific time slots using the Scheduler’s public method isSlotAvailable. CRUD actions also be disabled on occupied time slots using the Scheduler’s public method isSlotAvailable.

The isSlotAvailable method focuses on verifies appointments within the current view’s date range. It does not evaluate availability for recurrence occurrences outside this particular date range.

Differentiate the past time appointments

Differentiate the appearance of appointments based on specific criteria, such as displaying past hour appointments with different colors on the Scheduler, using the eventRendered event. This event triggers before an appointment renders on the Scheduler.

Appointments occupying entire cell

The Scheduler allows appointments to occupy the full height of the cell without its header part by setting true for the enableMaxHeight property.

When multiple appointments are available in the same cell, an indicator can be displayed by setting true to the enableIndicator property. Its default value is false.

Display tooltip for appointments

Tooltips provide additional information about appointments in a formatted style. Here’s how to work with tooltips:

Show or hide built-in tooltip

Display tooltips for appointments by setting true to the enableTooltip option within the eventSettings property.

Customize tooltip content using templates

Customize the content and appearance of tooltips using templates. To implement this:

1. Enable the default tooltip.
2. Use the tooltipTemplate option within the eventSettings property to define a custom template.

The following example demonstrates tooltip customization:

Note: All field names mapped from the Scheduler dataSource can be accessed within the template, including subject, description, location, startTime, and endTime.

Prevent tooltips for specific appointments

Selectively control when tooltips appear based on appointment data or other custom conditions using the tooltipOpen event.

To prevent a tooltip from appearing for certain events, set the cancel property to true within the tooltipOpen event. This ensures that tooltips are only displayed for the relevant appointments, improving user experience by minimizing unnecessary distractions.

Appointment filtering

Filter appointments based on specific criteria using the query option in eventSettings.

The following example demonstrates filtering to render only selected appointments:

Appointment selection

Select appointments using mouse or keyboard actions. Selected appointments are visually distinguished with a box shadow effect.

Action	Description
Mouse click or Single tap on appointments	Selects a single appointment.
Ctrl + [Mouse click] or Ctrl + [Single tap] on appointments	Selects multiple appointments.

Deleting multiple appointments

After selecting multiple appointments, you can delete them all at once by pressing the delete key.

Note: When deleting multiple selected occurrences of a recurring event series, only the selected occurrences will be deleted, not the entire series.

Retrieve appointment details from UI elements

Access information about an appointment’s fields directly from its UI element using the public method getEventDetails. Pass the appointment element as an argument to this method.

The following example displays the subject of a clicked appointment:

Get current view appointments

To retrieve the appointments visible in the current Scheduler view using the getCurrentViewEvents public method. In the following example, the count of current view appointment collection rendered has been traced in dataBound event.

Get all appointments

To access all appointments rendered on the Scheduler, regardless of the current view, use the getEvents public method. In the following example, the count of entire appointment collection rendered on the Scheduler has been traced in dataBound event.

Refresh appointments

Update only the appointments without refreshing the entire Scheduler using the refreshEvents public method.

scheduleObj.refreshEvents();

This method is useful when changes have been made to the appointment data and those changes need to be reflected in the UI without a full Scheduler refresh.

You can refer to our JavaScript Scheduler feature tour page for its groundbreaking feature representations. You can also explore our JavaScript Scheduler example to knows how to present and manipulate data.