Slots, Hours, and Markers

Create previews

Create preview customization affects empty-slot hover labels and the drag-create range preview.

1
grid.eventScheduler = {
2
  view: 'week',
3
  weekStartDate: '2026-06-08',
4
  editable: true,
5
  allowCreate: true,
6
  customization: {
7
    createPreview: {
8
      hoverTimeProperties: ({ startDateTime }) => ({
9
        class: 'create-hover-slot',
10
        'data-hover-start': startDateTime,
11
      }),
12
      createRangeTemplate: ({ title, startLabel, endLabel, durationLabel, resource }) =>
13
        `${title} for ${resource?.name ?? 'Unassigned'}: ${startLabel}-${endLabel} (${durationLabel})`,
14
      createRangeProperties: ({ durationMinutes }) => ({
15
        class: durationMinutes >= 240 ? 'create-range--long' : 'create-range--short',
16
      }),
17
    },
18
  },
19
};

Use hoverTimeProperties for attributes and styling on the slot while the pointer is over a creatable time. Use createRangeTemplate and createRangeProperties for the range ghost shown during drag-create interactions.

Empty slot customization

Empty slots are a primary extension point for booking, staffing, room planning, maintenance windows, pricing, capacity, and availability workflows. Use direct slot hooks when a product needs custom empty-cell content or behavior without replacing event bars.

| Hook | Purpose | | --- | --- | | slotTemplate | Renders custom content inside empty week or resource-timeline slots. Occupied slots keep their event bars. | | slotProperties | Adds classes, styles, attributes, data fields, or event handlers to scheduler slot cells. | | slotTooltip | Overrides the native tooltip for disabled, closed, priced, or capacity-based slots. | | onSlotClick | Runs custom click behavior before built-in editor-open behavior. | | onSlotDoubleClick | Runs custom double-click behavior for immediate create or custom workflows. | | onSlotContextMenu | Receives the resolved slot when the scheduler context menu opens. | | isSlotDisabled | Marks slots as disabled and blocks built-in create/editor behavior. | | isSlotSelectable | Marks slots as non-selectable for create/selection UX. |

1
grid.eventScheduler = {
2
  view: 'resourceTimeline',
3
  weekStartDate: '2026-06-08',
4
  editable: true,
5
  allowCreate: true,
6
  slotTemplate: (h, context) =>
7
    h('span', { class: 'booking-slot-capacity' }, [
8
      context.disabled ? 'Closed' : `${getCapacity(context)} seats`,
9
    ]),
10
  slotProperties: (context) => ({
11
    class: [
12
      context.disabled ? 'booking-slot--closed' : '',
13
      !context.selectable ? 'booking-slot--invalid' : '',
14
      context.segmentCount > 0 ? 'booking-slot--busy' : 'booking-slot--open',
15
    ].filter(Boolean).join(' '),
16
    style: {
17
      '--booking-slot-capacity': getCapacity(context),
18
    },
19
    'data-booking-slot': context.startDateTime,
20
  }),
21
  slotTooltip: (context) =>
22
    context.disabled ? 'Outside working hours' : `Available from ${context.startDateTime}`,
23
  isSlotDisabled: (context) => isClosedForBusiness(context),
24
  isSlotSelectable: (context) => !hasBlockedAvailability(context),
25
  onSlotClick: (context, event) => {
26
    if (context.disabled) {
27
      event.preventDefault();
28
      showClosedSlotPopover(context);
29
    }
30
  },
31
  onSlotDoubleClick: (context) => {
32
    if (!context.disabled) createBookingImmediately(context);
33
  },
34
  onSlotContextMenu: (context) => {
35
    trackSlotMenuOpened(context);
36
  },
37
  contextMenu: {
38
    enabled: true,
39
    hiddenItems: {
40
      create: true,
41
      'assign-open': true,
42
    },
43
    items: ({ target, slot }) => target === 'slot' && slot
44
      ? [
45
          { name: 'Create booking', action: () => createBookingImmediately(slot) },
46
          { name: 'Block this time', action: () => blockSlot(slot) },
47
        ]
48
      : [],
49
  },
50
};

slotTemplate is intentionally limited to empty cells so products can customize available space without removing visible event bars. Use customization.cells.dayTemplate or customization.cells.timelineTemplate only when the whole scheduler body cell, including event rendering, should be replaced. Use isSlotDisabled and isSlotSelectable with allowCreate or conflict rules when closed hours should block create, drag, paste, and editor flows.

Working and closed hours

Use working and closed-hour APIs when availability is part of the scheduler contract: business hours, weekends, holidays, lunch breaks, maintenance windows, or capacity holds. These hooks build on the existing nonWorkingTime, calendars, availability data, and conflict rules.

| Config | Purpose | | --- | --- | | workingHours | Defines global or per-weekday working ranges. Use false in byDay to close a weekday. | | closedHours | Defines closed ranges such as lunch, maintenance, holidays, or blocked planning windows. | | availabilityRules | Applies product-specific availability rules from slot context. | | closedSlotTemplate | Renders custom content inside closed slots. | | closedSlotProperties | Adds classes, styles, attributes, data fields, or event handlers to closed slots. | | closedSlotTooltip | Overrides the native tooltip/title for closed slots. | | isTimeSlotAvailable | Blocks built-in create/editor behavior when it returns false. |

Use workingHours for global business hours, workingHours.byDay for weekday-specific hours or closed weekends, closedHours for explicit closed ranges such as lunch or maintenance, and date-specific closedHours entries for holidays. Closed slots can be styled with closedSlotProperties, replaced with closedSlotTemplate, and explained through closedSlotTooltip.

1
grid.eventScheduler = {
2
  view: 'week',
3
  weekStartDate: '2026-06-08',
4
  editable: true,
5
  allowCreate: true,
6
  workingHours: {
7
    byDay: {
8
      1: { start: '08:00', end: '18:00' },
9
      2: { start: '08:00', end: '18:00' },
10
      3: { start: '08:00', end: '18:00' },
11
      4: { start: '08:00', end: '18:00' },
12
      5: { start: '08:00', end: '16:00' },
13
      0: false,
14
      6: false,
15
    },
16
  },
17
  closedHours: [
18
    {
19
      id: 'lunch',
20
      days: [1, 2, 3, 4, 5],
21
      ranges: { start: '12:00', end: '13:00' },
22
      title: 'Closed',
23
      reason: 'Lunch break',
24
      className: 'planner-slot--lunch',
25
    },
26
    {
27
      id: 'maintenance',
28
      dates: ['2026-06-10'],
29
      ranges: { start: '15:00', end: '17:00' },
30
      reason: 'Maintenance window',
31
      className: 'planner-slot--maintenance',
32
    },
33
  ],
34
  availabilityRules: ({ date, startMinutes }) =>
35
    date === '2026-06-12' && startMinutes >= 14 * 60
36
      ? { available: false, reason: 'Capacity hold', className: 'planner-slot--held' }
37
      : undefined,
38
  isTimeSlotAvailable: ({ date, slotIndex }) =>
39
    !isCompanyHoliday(date) && slotIndex !== 0,
40
  closedSlotProperties: ({ availabilityKind, reason }) => ({
41
    class: `planner-slot--closed planner-slot--${availabilityKind}`,
42
    style: {
43
      '--planner-closed-opacity': reason === 'Lunch break' ? 0.6 : 0.85,
44
    },
45
  }),
46
  closedSlotTooltip: ({ title, reason }) =>
47
    [title, reason].filter(Boolean).join(' - '),
48
  closedSlotTemplate: (h, { reason }) =>
49
    h('span', { class: 'planner-slot__closed-label' }, reason ?? 'Closed'),
50
};

Closed-slot context extends normal slot context with available, availabilityKind, availabilityId, title, and reason. Built-in create/editor behavior is blocked when isTimeSlotAvailable returns false, when closedHours/availabilityRules mark the slot unavailable, or when isSlotDisabled / isSlotSelectable deny the slot. For resource-specific calendars, remote availability, and holidays, continue using calendars and eventSchedulerAvailability; the closed-slot hooks style those states too.

Current time marker

The current-time marker can use the built-in red line and badge, or it can be replaced by product-specific marker content. Week-style views render a horizontal marker on the active date. Resource timeline views render a vertical marker in the active timeline slot.

| Config | Purpose | | --- | --- | | showCurrentTimeMarker | Simple show/hide alias. | | currentTimeMarker | Detailed marker config, including fixed dateTime for deterministic demos/tests. | | currentTimeUpdateInterval | Live refresh interval in milliseconds. Defaults to 60000; use 0 to disable automatic live refresh. | | currentTimeLabelFormatter | Formats the marker label, such as 12:26, Now, or a localized time. | | currentTimeMarkerTemplate | Replaces marker content in week and resource timeline cells. | | currentTimeMarkerProperties | Adds classes, styles, attributes, data fields, or event handlers to the marker cell. |

1
grid.eventScheduler = {
2
  view: 'week',
3
  weekStartDate: '2026-06-08',
4
  showCurrentTimeMarker: true,
5
  currentTimeUpdateInterval: 60_000,
6
  currentTimeLabelFormatter: ({ dateTime }) =>
7
    new Intl.DateTimeFormat('en-US', {
8
      hour: 'numeric',
9
      minute: '2-digit',
10
    }).format(new Date(dateTime)),
11
  currentTimeMarkerProperties: ({ orientation }) => ({
12
    class: orientation === 'horizontal'
13
      ? 'planner-now-marker planner-now-marker--horizontal'
14
      : 'planner-now-marker planner-now-marker--vertical',
15
    style: {
16
      '--event-scheduler-current-time-color': '#dc2626',
17
      '--planner-now-marker-thickness': '2px',
18
    },
19
  }),
20
  currentTimeMarkerTemplate: (h, context) =>
21
    h('span', { class: 'planner-now-marker__label' }, context.label),
22
};

Marker context includes view, date, dayIndex, slotIndex, startMinutes, endMinutes, dateTime, label, position, orientation, and, when available, row, resourceId, and resource. The marker is hidden when disabled, outside the visible date range, or outside the visible time range. Use currentTimeMarker: { dateTime } when the marker should point at a fixed instant rather than live now.