Editing and Interaction

Enable editing with the master editable flag and the specific allow* permissions your product needs.

Editing is checked in layers. The scheduler first applies editable, allowCreate, allowMove, allowResize, allowDelete, event/resource locks, date locks, and permission hooks. It then projects the next schedule and rejects the mutation when conflicts resolve to severity: 'error'. Use this to block edits outside working hours.

1
grid.eventScheduler = {
2
  view: 'resourceTimeline',
3
  weekStartDate: '2026-06-08',
4
  editable: true,
5
  allowCreate: true,
6
  allowMove: true,
7
  allowResize: true,
8
  allowDelete: true,
9
  conflicts: {
10
    enabled: true,
11
    rules: { 'outside-availability': 'error' },
12
  },
13
  createEventDraft: (context) => ({
14
    id: `event-${crypto.randomUUID()}`,
15
    resourceId: context.resourceId,
16
    title: 'New booking',
17
    startDateTime: context.startDateTime,
18
    endDateTime: context.endDateTime,
19
    status: 'draft',
20
  }),
21
  validateMutation: (detail) => {
22
    if (detail.event?.locked) {
23
      return 'Locked events cannot be changed.';
24
    }
25
  },
26
};

To enforce working hours, define them with calendars or eventSchedulerAvailability; then block the outside-availability conflict as shown above. nonWorkingTime can make closed cells visible, but it does not by itself reject create, move, resize, or editor changes.

Conflicts are evaluated against the projected next event array before the local mutation is committed. This means move, resize, create, edit, delete, bulk, template, paste, and recurrence actions can all be stopped by the same conflict configuration. Use conflicts.policy: 'prevent' when every detected conflict should block by default, or keep policy: 'mark' and promote only selected rules such as overlap, outside-availability, or blocked-time to error.

The before-change detail includes the projected conflicts array. Use it when the UI needs custom messages or business-specific decisions on top of configured conflict rules.

1
grid.addEventListener('event-scheduler-before-event-change', (event) => {
2
  const blockingConflict = event.detail.conflicts?.find((conflict) =>
3
    conflict.severity === 'error' &&
4
    event.detail.eventId !== null &&
5
    conflict.eventIds.includes(event.detail.eventId)
6
  );
7

8
  if (blockingConflict) {
9
    event.preventDefault();
10
  }
11
});

For one-off business rules that are not calendar rules, use permissions.canCreate, permissions.canMutate, or validateMutation. These hooks are useful for role checks, approval states, custom capacity rules, or backend-specific constraints.

If you prefer event-based validation, listen for event-scheduler-before-event-change and call event.preventDefault(). This is the same cancelable-before-event pattern used by RevoGrid editing events. Do not use event-scheduler-event-changed for cancellation; it fires after the scheduler has already accepted and applied the change.

1
grid.addEventListener('event-scheduler-before-event-change', (event) => {
2
  if (event.detail.action === 'move' && event.detail.event?.locked) {
3
    event.preventDefault();
4
  }
5
});

Persist successful changes from the emitted next event array.

1
function persistSchedulerEvents(event) {
2
  grid.eventSchedulerEvents = event.detail.events;
3
  void saveEvents(event.detail.events);
4
}
5

6
grid.addEventListener('event-scheduler-event-created', persistSchedulerEvents);
7
grid.addEventListener('event-scheduler-event-changed', persistSchedulerEvents);
8
grid.addEventListener('event-scheduler-event-deleted', persistSchedulerEvents);

validateMutation is the config-level equivalent of the cancelable before-change event. It receives the same detail shape and can return false or a string to reject.

1
grid.eventScheduler = {
2
  view: 'resourceTimeline',
3
  weekStartDate: '2026-06-08',
4
  validateMutation: ({ action, event, changes }) => {
5
    if (action === 'delete' && event?.status === 'completed') {
6
      return 'Completed events cannot be deleted.';
7
    }
8
    if (changes?.resourceId === 'locked-room') {
9
      return 'That room is locked.';
10
    }
11
  },
12
};

Custom editor

Set eventEditor: false to disable the built-in editor, or provide a custom editor hook when the host app owns a drawer, modal, or approval flow:

1
grid.eventScheduler = {
2
  view: 'week',
3
  weekStartDate: '2026-06-08',
4
  eventEditor: (context) => {
5
    openProductDrawer({
6
      mode: context.mode,
7
      event: context.event,
8
      resources: context.resources,
9
      readOnly: context.readonly,
10
      validationMessage: context.validationMessage,
11
      onSave: context.submit,
12
      onDelete: context.delete,
13
      onClose: context.close,
14
    });
15
    return true;
16
  },
17
};

The editor helpers still route changes through permissions, conflicts, event-scheduler-before-event-change, local mutation, post-commit events, and remote mutation hooks.

Interaction callbacks

Use named before hooks to validate or cancel user actions before local scheduler state changes. Return false to cancel with the default message, or return a string to cancel with a product-specific validation message.

| Before hook | Action | | --- | --- | | beforeEventCreate | Create from slot, editor create, template create, recurrence create | | beforeEventUpdate | Editor/API updates and status changes | | beforeEventMove | Drag move and bulk move | | beforeEventResize | Drag resize | | beforeEventDelete | Delete and bulk delete | | beforeEventDuplicate | Duplicate selected events | | beforeEventLock | Lock or unlock changes | | beforeSlotSelect | Empty-slot selection/click before create behavior |

Final callbacks fire after the scheduler has committed local state and include enough context to update app state or persist to a backend.

| Final callback | Action | | --- | --- | | onEventCreate | Event created, including paste/duplicate/template-created events | | onEventUpdate | Event updated or status changed | | onEventMove | Event moved | | onEventResize | Event resized | | onEventDelete | Event deleted | | onEventDuplicate | Duplicated event created | | onEventLock | Event locked or unlocked | | onEventCopy | Event copied into the scheduler clipboard | | onEventPaste | Pasted event created | | onSelectionChange | Event selection changed | | onSlotSelect | Empty slot selected/clicked | | contextMenu.onContextMenuAction | Scheduler context-menu item selected |

1
grid.eventScheduler = {
2
  view: 'week',
3
  weekStartDate: '2026-06-08',
4
  beforeEventMove: ({ event, changes }) => {
5
    if (event?.locked) return 'Locked events cannot be moved.';
6
    return validateMoveOnServerCache(event, changes);
7
  },
8
  beforeEventResize: ({ event, changes }) =>
9
    isOutsidePolicyWindow(event, changes) ? 'Outside policy window.' : undefined,
10
  beforeEventDelete: ({ event }) =>
11
    event?.metadata?.protected ? 'Protected events cannot be deleted.' : undefined,
12
  beforeSlotSelect: ({ date, startDateTime }) =>
13
    isClosedForBooking(date, startDateTime) ? 'This slot is closed.' : undefined,
14
  onEventMove: ({ event, previousEvent }) =>
15
    saveEventMove({ event, previousEvent }),
16
  onEventResize: ({ event, previousEvent }) =>
17
    saveEventResize({ event, previousEvent }),
18
  onEventDelete: ({ event }) =>
19
    archiveDeletedEvent(event),
20
  onSelectionChange: ({ eventIds }) =>
21
    setSelectedPlannerEvents(eventIds),
22
  contextMenu: {
23
    onContextMenuAction: ({ itemId, target, segment, slot }) =>
24
      trackSchedulerCommand({ itemId, target, eventId: segment?.event.id, slot }),
25
  },
26
};

The lower-level event-scheduler-before-event-change, event-scheduler-before-event-select, event-scheduler-before-slot-select, event-scheduler-event-created, event-scheduler-event-changed, event-scheduler-event-deleted, and event-scheduler-event-selected DOM events remain available for integrations that prefer event listeners. Call preventDefault() on the before events to cancel the pending scheduler action. validateMutation still runs in the same mutation pipeline for shared validation logic.

Selection, clipboard, and keyboard

Scheduler selection supports selected events, selected slots, selected time ranges, multi-select, range select, copy, paste, duplicate, and keyboard-driven commands. Use the cancelable event-scheduler-before-event-select event when the host application owns selected event state: prevent the pending selection, update application state, then pass the accepted ids back through selection.selectedEventIds.

1
let selectedEventIds: readonly string[] = [];
2

3
grid.addEventListener('event-scheduler-before-event-select', (event) => {
4
  event.preventDefault();
5
  selectedEventIds = event.detail.eventIds;
6
  renderScheduler();
7
});
8

9
function renderScheduler() {
10
  grid.eventScheduler = {
11
    ...grid.eventScheduler,
12
    selectionMode: 'multiple',
13
    selection: {
14
      ...grid.eventScheduler?.selection,
15
      selectedEventIds,
16
      selectedSlot,
17
      selectedRange,
18
      clipboard: true,
19
      copyOffsetDays: 7,
20
      onChange: ({ eventIds }) => setSelectedEventIds(eventIds),
21
    },
22
    onSelectionChange: ({ eventIds, events }) =>
23
      syncInspectorSelection({ eventIds, events }),
24
    onSlotSelect: (slot) =>
25
      setSelectedSlot(slot),
26
  };
27
}

Accepted selections still emit event-scheduler-event-selected, onSelectionChange, and selection.onChange. A prevented selection does not emit final selection callbacks; the host re-applies its accepted state through the config.

1
grid.eventScheduler = {
2
  view: 'week',
3
  weekStartDate: '2026-06-08',
4
  beforeSlotSelect: ({ date }) =>
5
    isClosedForBooking(date) ? 'This slot is closed.' : undefined,
6
};
7

8
grid.addEventListener('event-scheduler-before-slot-select', (event) => {
9
  if (isReadOnlyResource(event.detail.resourceId)) {
10
    event.preventDefault();
11
  }
12
});

Use clipboardAdapter when copy/paste must integrate with product state, permissions, or a custom clipboard store. Paste remains disabled when there is no internal payload and clipboardAdapter.hasPayload() is false.

1
grid.eventScheduler = {
2
  view: 'resourceTimeline',
3
  weekStartDate: '2026-06-08',
4
  clipboardAdapter: {
5
    hasPayload: () => appClipboard.has('scheduler-events'),
6
    read: () => appClipboard.get('scheduler-events'),
7
    write: (payload) => appClipboard.set('scheduler-events', payload),
8
    clear: () => appClipboard.delete('scheduler-events'),
9
  },
10
  onCopy: ({ eventIds }) => trackCopy(eventIds),
11
  onPaste: ({ event }) => persistCreatedEvent(event),
12
  onDuplicate: ({ event }) => persistCreatedEvent(event),
13
};

Keyboard shortcuts can be disabled globally, disabled per command, or rebound. Use Mod for Cmd on macOS and Ctrl on Windows/Linux.

1
grid.eventScheduler = {
2
  view: 'week',
3
  weekStartDate: '2026-06-08',
4
  keyboardShortcuts: {
5
    enabled: true,
6
    helpPanel: true,
7
    shortcuts: {
8
      copy: 'Mod+c',
9
      paste: 'Mod+v',
10
      duplicate: 'Mod+Shift+d',
11
      delete: false,
12
      lock: false,
13
      today: ['t', 'Home'],
14
    },
15
  },
16
};

Available keyboard commands are escape, help, today, search, previous, next, cyclePrevious, cycleNext, open, create, edit, lock, delete, copy, paste, duplicate, and viewWeek.