Week View

Use view: 'week' when users think in days and hours: employee shifts, appointment books, clinic rosters, classroom timetables, service windows, and team calendars. Time runs vertically, days are generated as columns, and event duration is shown by event height.

This page focuses on a vertical week scheduler. For the general setup, props, and data model, start with Getting Started. For choosing between vertical time and horizontal resource rows, see Vertical vs Horizontal Time. For day, month, resourceTimeline, column widths, and grouped headers, see Timeline Views.

Build a Week Planner

1. Configure the visible week.

   import {
     EventSchedulerPlugin,
     type EventSchedulerConfig,
     type EventSchedulerEventEntity,
     type EventSchedulerResourceEntity,
   } from '@revolist/revogrid-enterprise';
   
   const eventScheduler: EventSchedulerConfig = {
     view: 'week',
     weekStartDate: '2026-06-08',
     weekStartsOn: 1,
     locale: 'en-US',
     timeZone: 'UTC',
     visibleDays: [1, 2, 3, 4, 5],
     slotMinutes: 30,
     snapMinutes: 15,
     timeRange: { start: '06:00', end: '22:00' },
     timeColumnSize: 88,
     dayColumnSize: 190,
     editable: true,
     allowCreate: true,
     allowMove: true,
     allowResize: true,
     allowDelete: true,
   };

   slotMinutes controls visible row granularity. Use values such as 5, 10, 15, 30, or 60 minutes depending on the planning detail your product needs. snapMinutes controls create, drag, resize, paste, and keyboard snapping and defaults to slotMinutes. Use a smaller snap interval when the grid should display 30-minute rows but allow 15-minute edits.

   timeRange controls the visible start/end time, so night hours can be hidden instead of rendered. rowSize controls density for compact, dense, or comfortable schedules, and timeLabelFormatter / timeLabelTemplate can replace the default 06:00 style labels.

   locale and timeZone control built-in day and range labels. Use dayHeaderFormatter, timeLabelFormatter, and timelineHeaderFormatter when your product needs a fully custom display format.

2. Provide the events and optional resources.

   const resources: EventSchedulerResourceEntity[] = [
     { id: 'alex', name: 'Alex Kim', role: 'Coordinator', group: 'Front desk' },
     { id: 'maria', name: 'Maria Cruz', role: 'Nurse', group: 'Clinical' },
   ];
   
   const events: EventSchedulerEventEntity[] = [
     {
       id: 'shift-alex-mon',
       resourceId: 'alex',
       title: 'Front desk',
       startDateTime: '2026-06-08T08:00:00.000Z',
       endDateTime: '2026-06-08T14:00:00.000Z',
       status: 'confirmed',
       type: 'shift',
     },
     {
       id: 'shift-maria-mon',
       resourceId: 'maria',
       title: 'Clinical floor',
       startDateTime: '2026-06-08T10:00:00.000Z',
       endDateTime: '2026-06-08T18:00:00.000Z',
       status: 'planned',
       type: 'shift',
     },
   ];

   In week view, resources do not become rows; days and time slots define the grid. Resource ids still matter for ownership, permissions, conflicts, calendars, availability, filters, exports, and later switching the same data to resourceTimeline.

3. Attach the scheduler to an empty grid.

   const grid = document.querySelector('revo-grid')!;
   
   grid.plugins = [EventSchedulerPlugin];
   grid.eventScheduler = eventScheduler;
   grid.eventSchedulerResources = resources;
   grid.eventSchedulerEvents = events;

Keep Edits Controlled

The scheduler emits the next event array after accepted create, move, resize, edit, delete, template, paste, recurrence, and bulk actions. Replace eventSchedulerEvents with that array and persist it from your app.

function syncEvents(event: CustomEvent<{ events: readonly EventSchedulerEventEntity[] }>) {
  grid.eventSchedulerEvents = [...event.detail.events];
  void saveSchedule(event.detail.events);
}

grid.addEventListener('event-scheduler-event-created', syncEvents as EventListener);
grid.addEventListener('event-scheduler-event-changed', syncEvents as EventListener);
grid.addEventListener('event-scheduler-event-deleted', syncEvents as EventListener);

Use event-scheduler-before-event-change, validateMutation, or permission hooks when your product needs to reject a pending change before it is committed. The full lifecycle is covered in Editing and Interaction.

Block Invalid Hours

To make a week planner practical, define working time with calendars or availability and make the resulting conflicts blocking.

grid.eventScheduler = {
  ...eventScheduler,
  calendars: {
    primaryCalendarId: 'weekday',
    calendars: [{
      id: 'weekday',
      name: 'Weekday shifts',
      timeZone: 'UTC',
      workingDays: [1, 2, 3, 4, 5],
      workingHours: { start: '08:00', end: '18:00' },
      holidays: ['2026-06-19'],
      hoursPerDay: 8,
    }],
  },
  conflicts: {
    enabled: true,
    policy: 'mark',
    rules: {
      'outside-availability': 'error',
      'blocked-time': 'error',
      overlap: 'warning',
    },
  },
};

Calendars are the recurring baseline. Use eventSchedulerAvailability for dated changes such as PTO, lunch breaks, holiday closures, maintenance, or temporary extra coverage. nonWorkingTime is useful for visual closed-cell styling, but it does not block edits by itself. The precedence model is covered in Scheduling Rules.

Switch the Visible Week

Keep weekStartDate, visibleDays, and timeRange in application state when the host toolbar owns navigation.

function setScheduler(next: Partial<EventSchedulerConfig>) {
  grid.eventScheduler = {
    ...grid.eventScheduler,
    ...next,
  };
}

grid.addEventListener('event-scheduler-navigate-request', (event) => {
  const { action } = (event as CustomEvent<{ action: 'previous' | 'next' | 'today' }>).detail;
  setScheduler({ weekStartDate: resolveNextWeekStart(grid.eventScheduler.weekStartDate, action) });
});

grid.addEventListener('event-scheduler-view-request', (event) => {
  const { view } = (event as CustomEvent<{ view: EventSchedulerConfig['view'] }>).detail;
  setScheduler({ view });
});

Use day for a focused daily schedule, week for the main shift-planning workflow, and month for a higher-level calendar. Use resourceTimeline when resources need their own rows and users compare capacity horizontally.

Production Checklist

• Use ISO datetime strings and stable event ids.
• Decide whether weekStartsOn and visibleDays follow locale, business rules, or user settings.
• Keep source and columns empty while the scheduler owns the grid projection.
• Enable only the edit permissions your persistence flow can handle.
• Configure calendars or availability before turning outside-hours conflicts into blocking errors.
• Add resources even in week view when conflicts, permissions, reporting, or future resource timelines need them.
• Use the Employee Shift Planner demo as a focused week-view reference.

Next Pages

• Timeline Views covers all scheduler views, date ranges, column widths, framework bindings, grouped headers, and demo source locations.
• Editing and Interaction covers host-owned persistence, mutation events, validation, permissions, selection, clipboard, keyboard shortcuts, and editor replacement.
• Scheduling Rules covers calendar, availability, non-working time, and conflict-rule precedence.
• Grouping covers resource timelines, unassigned demand, coverage, utilization, filters, and saved views.
• Templates and Recurrence covers template creation, recurrence, duplicate, paste, selection, and bulk helpers.
• Remote Data covers server-backed loading, optimistic saves, refresh, paging, and remote state events.
• Customization covers the full visual customization category. Start with Labels and Formatters, Event Rendering, and Layout, Headers, and Cells.
• Examples has compact weekly scheduler examples for custom event bars, day headers, current-time markers, closed hours, read-only mode, cancelable selection state, and themes.
• Export covers export helpers and production readiness.
• Event Scheduler API reference lists raw config, hook, and event types.