Conflicts and States

Conflict display

Conflict customization is separate from general event rendering so products can apply a consistent warning/error treatment without replacing event content.

1
grid.eventScheduler = {
2
  view: 'resourceTimeline',
3
  weekStartDate: '2026-06-08',
4
  customization: {
5
    conflicts: {
6
      className: ({ severity }) => `booking-conflict booking-conflict--${severity}`,
7
      properties: ({ conflictTypes }) => ({
8
        'data-conflict-types': conflictTypes.join(' '),
9
      }),
10
      indicator: (h, { severity }) =>
11
        h('span', { class: 'booking-conflict__badge' }, severity === 'error' ? 'Blocked' : 'Review'),
12
      tooltip: ({ label }) => `Planning issue: ${label}`,
13
    },
14
  },
15
};

The scheduler still adds built-in conflict classes, data attributes, and severity attributes to event blocks. Custom conflict hooks run only for conflicted segments.

Empty, loading, and error states

Remote mode and local empty states can use product-specific wording and markup through labels, emptyStateText, and customization.emptyState.

1
grid.eventScheduler = {
2
  view: 'resourceTimeline',
3
  weekStartDate: '2026-06-08',
4
  emptyStateText: 'No resources match this view.',
5
  labels: {
6
    remoteLoading: 'Loading bookings...',
7
    remoteError: 'Bookings could not be loaded.',
8
    remoteEmpty: 'No bookings in this range.',
9
  },
10
  customization: {
11
    emptyState: {
12
      template: ({ kind, label }) =>
13
        kind === 'error' ? `Action needed: ${label}` : label,
14
      properties: ({ kind }) => ({
15
        class: `booking-scheduler-state booking-scheduler-state--${kind}`,
16
      }),
17
    },
18
  },
19
};

The template can return a string or a DOM node. Property hooks can add classes, style variables, ARIA attributes, and data attributes to the overlay element.