Event Rendering

Event branding

Event blocks support a lightweight styling layer before you use the grouped customization.events API.

1
grid.eventScheduler = {
2
  view: 'week',
3
  weekStartDate: '2026-06-08',
4
  statusColorResolver: (event) => {
5
    if (event.status === 'confirmed') return '#2563eb';
6
    if (event.status === 'planned') return '#d97706';
7
    if (event.status === 'blocked') return '#dc2626';
8
  },
9
  eventProperties: ({ event }) => ({
10
    class: `scheduler-event--${event.type ?? 'default'}`,
11
    style: {
12
      '--shift-accent': event.status === 'blocked' ? '#dc2626' : '#2563eb',
13
    },
14
    'data-shift-status': event.status,
15
  }),
16
  eventTemplate: (h, { event }) =>
17
    h('span', { class: 'shift-event-title' }, event.title),
18
};

statusColorResolver resolves the scheduler event accent color when the event does not already provide event.color and the status does not map to a built-in status class. eventProperties is merged onto the event button and can return class, style, attributes, data fields, or event handlers. eventTemplate replaces the default event content only; it does not replace the outer interactive event shell.

Event section templates

Use direct event hooks when a product needs a simple public API for event bars in week and resource-timeline views.

Config	Purpose
`eventTemplate`	Legacy top-level event content renderer.
`eventContentTemplate`	Replaces the default title, time, badge, and resource content block.
`eventProperties`	Adds classes, styles, attributes, data fields, or event handlers to the event button.
`eventTooltipTemplate`	Overrides the event `title` tooltip with custom details.
`eventBadgeTemplate`	Replaces individual status, type, category, or required-role badges.
`eventResizeHandleTemplate`	Replaces the visual content inside start/end resize handles.

1
grid.eventScheduler = {
2
  view: 'week',
3
  weekStartDate: '2026-06-08',
4
  eventProperties: (context) => ({
5
    class: [
6
      'event-card',
7
      context.isSelected ? 'event-card--selected' : '',
8
      context.isLocked ? 'event-card--locked' : '',
9
      context.hasConflict ? 'event-card--conflict' : '',
10
      context.isShortEvent ? 'event-card--short' : '',
11
    ].filter(Boolean).join(' '),
12
    style: {
13
      '--event-accent': context.hasConflict ? '#dc2626' : context.event.color ?? '#2563eb',
14
    },
15
    'data-event-duration': context.duration,
16
  }),
17
  eventContentTemplate: (h, { event, resource, start, end, isFromPreviousDay, isContinuedToNextDay }) =>
18
    h('span', { class: 'event-card__content' }, [
19
      h('strong', { class: 'event-card__title' }, event.title),
20
      h('span', { class: 'event-card__time' }, `${start.slice(11, 16)}-${end.slice(11, 16)}`),
21
      resource ? h('span', { class: 'event-card__resource' }, resource.name) : null,
22
      isFromPreviousDay ? h('span', { class: 'event-card__continuation' }, 'From previous day') : null,
23
      isContinuedToNextDay ? h('span', { class: 'event-card__continuation' }, 'Continues') : null,
24
    ]),
25
  eventBadgeTemplate: (h, { kind, label, isLocked }) =>
26
    h('span', { class: `event-card__badge event-card__badge--${kind}` }, isLocked ? 'Locked' : label),
27
  eventResizeHandleTemplate: (h, { edge }) =>
28
    h('span', { class: `event-card__resize event-card__resize--${edge}` }),
29
  eventTooltipTemplate: ({ event, resource, duration, hasConflict }) =>
30
    `${event.title} | ${resource?.name ?? 'Unassigned'} | ${duration} minutes${hasConflict ? ' | Conflict' : ''}`,
31
};

Event render contexts include event, resource, the first real projected segment, the ordered segments represented by the bar, aggregate start, end, and duration, plus day, status, type, isSelected, isDragging, isResizing, isLocked, hasConflict, isReadonly, isFromPreviousDay, isContinuedToNextDay, and isShortEvent. Dragging and resizing state are currently reserved and remain false until the scheduler exposes public pointer-state rendering.

The legacy first, last, and sliceSlot fields remain available for source compatibility but are deprecated. Because hooks now run once per continuous bar, first and last are always true, while sliceSlot is the primary segment’s startSlot. New code should use segment.startSlot, segments, and the aggregate range fields instead.

customization.events provides the grouped form of the same customization surface and layers on top of direct event properties where both are supplied. It customizes the event button and its internal sections. It applies to both week and resource timeline render modes.

When customization.events.content is configured, it is the authoritative content hook. Returning null or undefined restores the built-in event content rather than invoking eventContentTemplate or legacy eventTemplate. Without the grouped hook, Scheduler tries eventContentTemplate, then eventTemplate, and finally the built-in content.

Hook	What it customizes
`className`	Adds one or more classes to the event button.
`style`	Adds inline styles or CSS custom properties to the event button.
`properties`	Adds attributes, classes, styles, or data attributes to the event button.
`content`	Replaces the default title, time, badge, and resource content block.
`continuationLabels`	Replaces previous/next-day continuation labels.
`badgeTray`	Replaces the tray that holds badges for multi-slot events.
`badge`	Replaces individual status, type, category, or required-role badges.
`resizeHandle`	Replaces the visual content inside start/end resize handles.
`tooltip`	Overrides the event `title` tooltip.
`ariaLabel`	Overrides the event button accessible label.

1
grid.eventScheduler = {
2
  view: 'week',
3
  weekStartDate: '2026-06-08',
4
  customization: {
5
    events: {
6
      className: ({ event }) => `event-card event-card--${event.status ?? 'default'}`,
7
      style: ({ event }) => ({
8
        '--event-border-color': event.status === 'blocked' ? '#dc2626' : '#2563eb',
9
      }),
10
      properties: ({ event, segment }) => ({
11
        'data-event-id': event.id,
12
        'data-event-start-slot': segment.startSlot,
13
      }),
14
      content: (h, { event, resource, segment }) =>
15
        h('span', { class: 'event-card__content' }, [
16
          h('strong', { class: 'event-card__title' }, event.title),
17
          h('span', { class: 'event-card__resource' }, resource?.name ?? 'Unassigned'),
18
          segment.conflict ? h('span', { class: 'event-card__warning' }, 'Conflict') : null,
19
        ]),
20
      badge: (h, { kind, label }) =>
21
        h('span', { class: `event-card__badge event-card__badge--${kind}` }, label),
22
      tooltip: ({ event, resource }) => `${event.title} - ${resource?.name ?? 'Unassigned'}`,
23
      ariaLabel: ({ event }) => `Scheduled event ${event.title}`,
24
    },
25
  },
26
};

The outer event element remains a scheduler-managed button. It keeps click, double-click, pointer, selection, disabled move/resize state, conflict state, and accessibility wiring. Custom event content should avoid interactive controls inside the event button unless the product has tested the keyboard and pointer behavior carefully.

Rendering content at the bottom of a bar

Each event assignment is rendered as one continuous visual bar. In vertical views the bar is anchored from the day’s first slot cell; in resource timeline it is attached to the resource row. Event customization hooks therefore run once per visible bar rather than once per grid cell.

Use context.segment for the first real projected segment and context.segments when you need every day segment represented by a multi-day timeline bar. The aggregate context.start, context.end, and context.duration fields describe the complete visible bar.

To render content pinned to the bottom of a multi-slot bar — such as a status badge, category chip, or summary — use badgeTray. Its return value is placed directly inside the event button.

Include the event-scheduler-event__badge-tray wrapper class in the returned element to get the built-in absolute bottom positioning:

1
grid.eventScheduler = {
2
  view: 'week',
3
  weekStartDate: '2026-06-08',
4
  customization: {
5
    events: {
6
      content: (h, context) =>
7
        h('span', { class: 'my-event' }, [
8
          h('strong', { class: 'my-event__title' }, context.event.title),
9
          h('span', { class: 'my-event__time' }, `${context.start.slice(11, 16)}-${context.end.slice(11, 16)}`),
10
          h('span', { class: 'my-event__badge' }, String(context.event.status ?? '')),
11
        ]),
12
      badgeTray: (h, context) => {
13
        // Runs once for a multi-slot bar whose visible end is in this view.
14
        const status = String(context.event.status ?? '');
15
        if (!status) return null;
16
        return h('span', { class: 'event-scheduler-event__badge-tray' }, [
17
          h('span', { class: 'my-event__badge' }, status),
18
        ]);
19
      },
20
    },
21
  },
22
};

badgeTray does not fire for single-slot bars or for a bar whose visible end continues beyond the current view (isContinuedToNextDay). When badgeTray returns null or undefined, the default badge tray — which displays type, category, and required-role chips — is rendered instead.