# Week View
URL: https://pro.rv-grid.com/guides/event-scheduler/week-view/
Source: src/content/docs/guides/event-scheduler/week-view.mdx
Description: Build a practical calendar-style week scheduler for shifts, appointments, and short-range planning.
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](../introduction/). For choosing between vertical time and horizontal resource rows, see [Vertical vs Horizontal Time](../introduction/vertical-vs-horizontal/). For `day`, `month`, `resourceTimeline`, column widths, and grouped headers, see [Timeline Views](../timeline-views/).

## Build a Week Planner

1. Configure the visible week.

   ```ts
   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.

   ```ts
   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.

   ```ts
   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.

```ts
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](../event-editing/).

## Block Invalid Hours

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

```ts
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](../scheduling-rules/).

## Switch the Visible Week

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

```ts
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](../timeline-views/) covers all scheduler views, date ranges, column widths, framework bindings, grouped headers, and demo source locations.
- [Editing and Interaction](../event-editing/) covers host-owned persistence, mutation events, validation, permissions, selection, clipboard, keyboard shortcuts, and editor replacement.
- [Scheduling Rules](../scheduling-rules/) covers calendar, availability, non-working time, and conflict-rule precedence.
- [Grouping](../grouping/) covers resource timelines, unassigned demand, coverage, utilization, filters, and saved views.
- [Templates and Recurrence](../templates-recurrence/) covers template creation, recurrence, duplicate, paste, selection, and bulk helpers.
- [Remote Data](../remote-data/) covers server-backed loading, optimistic saves, refresh, paging, and remote state events.
- [Customization](../customization/) covers the full visual customization category. Start with [Labels and Formatters](../customization/labels-formatters/), [Event Rendering](../customization/events/), and [Layout, Headers, and Cells](../customization/layout/).
- [Examples](../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](../export/) covers export helpers and production readiness.
- [Event Scheduler API reference](/api/event-scheduler/) lists raw config, hook, and event types.
