Labels and Formatters

Labels and formatters

Use labels and formatters for text-level customization. This keeps the built-in DOM, accessibility attributes, selection, tooltips, and editing behavior intact.

grid.eventScheduler = {
  view: 'resourceTimeline',
  weekStartDate: '2026-06-08',
  locale: 'en-US',
  timeZone: 'America/New_York',
  labels: {
    resourceColumn: 'Crew',
    unassignedResource: 'Open demand',
    newEvent: 'New assignment',
    createEvent: 'Create shift',
    editEvent: 'Edit shift',
  },
  dayHeaderFormatter: (date) =>
    date.toLocaleDateString('en-US', {
      weekday: 'short',
      month: 'short',
      day: 'numeric',
      timeZone: 'America/New_York',
    }),
  timeLabelFormatter: (minutes) => `${Math.floor(minutes / 60)}:00`,
  timelineHeaderFormatter: ({ startDateTime, endDateTime }) =>
    `${startDateTime.slice(11, 16)}-${endDateTime.slice(11, 16)}`,
  hoverTimeFormatter: (minutes) => `Create at ${String(Math.floor(minutes / 60)).padStart(2, '0')}:00`,
  resourceLabelFormatter: (resource) => resource.name,
  resourceMetaFormatter: (resource) =>
    [resource.role, resource.metadata?.location].filter(Boolean).join(' - '),
  tooltipFormatter: ({ event, resource }) =>
    `${event.title}\n${resource?.name ?? 'Unassigned'}\n${event.startDateTime}`,
};

Built-in day, range, and timeline date labels use locale and timeZone. Formatter hooks take precedence when you need product-specific date or time strings, including date-only labels that should not shift when displayed in a non-UTC timezone.

Formatters are the best first choice when the content is still a string. Move to templates only when you need nested markup, custom badges, custom attributes, or section-specific replacement.