Layout, Headers, and Cells

Grouped customization API

Use the grouped customization API when you need precise control over generated scheduler surfaces.

1
grid.eventScheduler = {
2
  view: 'week',
3
  weekStartDate: '2026-06-08',
4
  customization: {
5
    columnSizes: {
6
      week: {
7
        timeColumnSize: 96,
8
        dayColumnSize: 220,
9
      },
10
      resourceTimeline: {
11
        resourceColumnSize: 260,
12
        timelineColumnSize: 144,
13
      },
14
    },
15
    headers: {
16
      dayTemplate: (h, context) =>
17
        h('span', { class: 'scheduler-day-header' }, context.defaultLabel),
18
      dayProperties: (context) => ({
19
        class: context.today ? 'scheduler-day-header--brand-today' : '',
20
        'data-scheduler-date': context.date,
21
      }),
22
      groupTemplate: (h, context) =>
23
        h('strong', { class: 'scheduler-range-header' }, context.defaultLabel),
24
    },
25
    cells: {
26
      resourceProperties: ({ resource }) => ({
27
        'data-resource-role': resource?.role,
28
      }),
29
      timelineProperties: ({ date, slotIndex }) => ({
30
        class: 'scheduler-timeline-slot',
31
        'data-scheduler-slot-key': `${date}:${slotIndex}`,
32
      }),
33
    },
34
    events: {
35
      properties: ({ event }) => ({
36
        'data-event-status': event.status,
37
      }),
38
      content: (h, { event, resource }) =>
39
        h('span', { class: 'scheduler-event-title' }, [
40
          h('strong', {}, event.title),
41
          h('small', {}, resource?.name ?? 'Unassigned'),
42
        ]),
43
      badge: (h, context) =>
44
        h('span', {
45
          class: `scheduler-event-chip scheduler-event-chip--${context.kind}`,
46
        }, context.label),
47
      resizeHandle: (h, context) =>
48
        h('span', {
49
          class: `scheduler-event-resize scheduler-event-resize--${context.edge}`,
50
        }),
51
    },
52
    createPreview: {
53
      createRangeTemplate: (context) =>
54
        `${context.title}: ${context.startLabel}-${context.endLabel}`,
55
      createRangeProperties: () => ({ class: 'scheduler-create-preview' }),
56
    },
57
    conflicts: {
58
      className: ({ severity }) => `scheduler-conflict scheduler-conflict--${severity}`,
59
      indicator: (h, context) =>
60
        h('span', { class: 'scheduler-conflict-badge' }, context.severity),
61
      tooltip: ({ label }) => `Review before saving: ${label}`,
62
    },
63
    emptyState: {
64
      template: ({ kind, label }) => `${kind}: ${label}`,
65
      properties: ({ kind }) => ({
66
        class: `scheduler-state scheduler-state--${kind}`,
67
      }),
68
    },
69
  },
70
};

Template hooks receive RevoGrid's h helper and a scheduler context object. Return a string, a VNode, null, or undefined. Returning null or undefined keeps the built-in section. Property hooks return attributes, class, style, or data attributes for the target element.

Custom properties are merged with built-in scheduler properties. Built-in interaction handlers and scheduler data attributes remain in place, so custom hooks should not attach drag, resize, selection, or mutation behavior directly.

Column sizes

customization.columnSizes controls scheduler-owned column widths by view. These values are resolved before legacy top-level size props such as timeColumnSize, dayColumnSize, resourceColumnSize, and timelineColumnSize.

1
grid.eventScheduler = {
2
  view: 'resourceTimeline',
3
  weekStartDate: '2026-06-08',
4
  customization: {
5
    columnSizes: {
6
      week: {
7
        timeColumnSize: 88,
8
        dayColumnSize: 180,
9
      },
10
      resourceTimeline: {
11
        resourceColumnSize: 280,
12
        timelineColumnSize: 120,
13
      },
14
    },
15
  },
16
};

Use week sizes for day, week, and month style calendar grids. Use resource timeline sizes when the first column is the pinned resource column and the remaining columns are timeline slots.

Header templates and properties

Header customization targets the generated scheduler columns. For day headers, use the direct week-scheduler hooks when you only need day-header customization. Use customization.headers when you need to customize every generated header type.

Direct day-header hooks:

| Hook | Surface | | --- | --- | | dayHeaderFormatter | Formats the built-in day header label. | | dayHeaderTemplate | Replaces the day header content. | | dayHeaderProperties | Adds classes, styles, attributes, data fields, or event handlers to day headers. |

1
grid.eventScheduler = {
2
  view: 'week',
3
  weekStartDate: '2026-06-08',
4
  dayHeaderFormatter: (date) =>
5
    date.toLocaleDateString('en-US', {
6
      weekday: 'short',
7
      month: 'short',
8
      day: 'numeric',
9
      timeZone: 'UTC',
10
    }),
11
  dayHeaderTemplate: (h, context) =>
12
    h('span', { class: 'planner-day-header' }, [
13
      h('span', { class: 'planner-day-header__label' }, context.defaultLabel),
14
      context.today ? h('span', { class: 'planner-day-header__badge' }, 'Today') : null,
15
      context.holiday ? h('span', { class: 'planner-day-header__holiday' }, context.holidayLabel) : null,
16
      h('span', { class: 'planner-day-header__count' }, `${context.eventCount ?? 0} events`),
17
    ]),
18
  dayHeaderProperties: (context) => ({
19
    class: [
20
      context.today ? 'planner-day-header--today' : '',
21
      context.weekend ? 'planner-day-header--weekend' : '',
22
      context.holiday ? 'planner-day-header--holiday' : '',
23
    ].filter(Boolean).join(' '),
24
    style: {
25
      '--planner-day-event-count': context.eventCount ?? 0,
26
      ...(context.holiday ? { '--planner-day-state': 'holiday' } : {}),
27
    },
28
    'data-planner-day': context.date,
29
  }),
30
};

Day header context includes defaultLabel, date, dayIndex, eventCount, today, weekend, holiday, and holidayLabel. Holiday state is date-level: it comes from the primary scheduler calendar or global kind: 'holiday' availability entries. Resource-specific holidays stay on the scheduler body cells.

customization.headers.dayTemplate takes precedence over dayHeaderTemplate when both are provided. This lets applications keep older grouped customization config while adding direct day-header hooks where convenient.

Grouped header customization has one template hook and one matching properties hook per generated header section.

| Hook | Surface | | --- | --- | | timeTemplate / timeProperties | Pinned time header in day/week/month style views. | | resourceTemplate / resourceProperties | Pinned resource header in resource timeline views. | | dayTemplate / dayProperties | Day header cells. | | timelineTemplate / timelineProperties | Resource timeline slot headers. | | groupTemplate / groupProperties | Grouped range/day/timeline headers when column grouping is enabled. |

1
grid.eventScheduler = {
2
  view: 'week',
3
  weekStartDate: '2026-06-08',
4
  customization: {
5
    headers: {
6
      dayTemplate: (h, context) =>
7
        h('span', { class: 'brand-day-header' }, [
8
          h('strong', {}, context.defaultLabel),
9
          context.today ? h('small', {}, 'Today') : null,
10
          context.holiday ? h('small', {}, context.holidayLabel) : null,
11
          context.eventCount ? h('small', {}, `${context.eventCount} events`) : null,
12
        ]),
13
      dayProperties: (context) => ({
14
        class: [
15
          context.today ? 'brand-day-header--today' : '',
16
          context.weekend ? 'brand-day-header--weekend' : '',
17
          context.holiday ? 'brand-day-header--holiday' : '',
18
        ],
19
        'data-brand-date': context.date,
20
      }),
21
    },
22
  },
23
};

Header contexts include the active view, the default label, date or slot fields where relevant, event counts, today/weekend/holiday flags, holiday labels, and group kind for grouped headers.

Cell templates and properties

Cell customization targets the scheduler body cells. Use property hooks when you only need classes, styles, or test/data attributes. Use templates when the default cell body should be replaced.

Use the direct time-axis hooks when the product only needs to control the pinned time column in day, week, or month-style views.

| Config | Purpose | | --- | --- | | timeLabelFormatter | Formats built-in time text such as 06:00, 6 AM, or 6:00. | | timeLabelTemplate | Replaces the pinned time-label cell content. | | timeRowProperties | Adds classes, styles, attributes, data fields, or event handlers to time-label cells. | | timeRange | Sets the visible start/end time and hides time outside that range. | | slotMinutes | Sets row granularity, for example 5, 10, 15, 30, or 60. | | rowSize | Controls row density in pixels. | | nonWorkingTime | Styles closed or outside-business-hours cells in the scheduler body. |

1
grid.eventScheduler = {
2
  view: 'week',
3
  weekStartDate: '2026-06-08',
4
  timeRange: { start: '06:00', end: '22:00' },
5
  slotMinutes: 30,
6
  rowSize: 40,
7
  timeLabelFormatter: (minutes) => {
8
    const hour = Math.floor(minutes / 60);
9
    const minute = minutes % 60;
10
    return `${hour % 12 || 12}:${String(minute).padStart(2, '0')} ${hour < 12 ? 'AM' : 'PM'}`;
11
  },
12
  timeLabelTemplate: (h, context) =>
13
    h('span', { class: 'planner-time-label' }, context.timeLabel),
14
  timeRowProperties: (context) => ({
15
    class: context.currentTimeLabel ? 'planner-time-row--current' : 'planner-time-row',
16
    style: {
17
      '--planner-time-start': context.startMinutes,
18
    },
19
    'data-planner-time': context.timeLabel,
20
  }),
21
  nonWorkingTime: {
22
    enabled: true,
23
    workingDays: [1, 2, 3, 4, 5],
24
    workingHours: { start: '08:00', end: '18:00' },
25
    className: 'planner-closed-hours',
26
  },
27
};

customization.cells.timeTemplate and customization.cells.timeProperties layer over the direct timeLabelTemplate and timeRowProperties hooks when both are provided. Use rowSize for compact, dense, or comfortable density presets, and use timeRange when night hours should be hidden from the grid instead of only styled as closed.

| Hook | Surface | | --- | --- | | timeTemplate / timeProperties | Time-label rows in week-style grids. | | dayTemplate / dayProperties | Day/time slots in week-style grids. | | resourceTemplate / resourceProperties | Resource rows in resource timeline grids. | | resourceGroupTemplate / resourceGroupProperties | Group rows when resource grouping is enabled. | | timelineTemplate / timelineProperties | Timeline cells in resource timeline grids. |

1
grid.eventScheduler = {
2
  view: 'resourceTimeline',
3
  weekStartDate: '2026-06-08',
4
  customization: {
5
    cells: {
6
      resourceProperties: ({ resource, unassigned, depth }) => ({
7
        class: [
8
          resource?.role ? `resource-row--${resource.role.toLowerCase()}` : '',
9
          unassigned ? 'resource-row--open-demand' : '',
10
        ],
11
        style: { '--resource-depth': depth },
12
        'data-resource-role': resource?.role,
13
      }),
14
      timelineProperties: ({ date, slotIndex, segmentCount }) => ({
15
        class: segmentCount > 0 ? 'timeline-slot--busy' : 'timeline-slot--open',
16
        'data-slot-key': `${date}:${slotIndex}`,
17
      }),
18
    },
19
  },
20
};

When a cell template is provided, the scheduler renders that template instead of the default cell content for that slot. For day cells, replacing the template also replaces the built-in visible event slices inside that cell, so prefer dayProperties when the goal is only styling or annotation.