Vertical vs Horizontal Time

Scheduling views usually answer one of two questions:

• "What happens during this day or week?"
• "Which resource is booked across this date range?"

Use a vertical time view for the first question. Use a horizontal resource timeline for the second.

Vertical Time Scheduling

Vertical time scheduling is the familiar calendar layout. Time moves down the page, days are arranged across columns, and an event duration is shown by the event height.

This layout is best when users think in days, hours, and appointments:

| Good fit | Why | | :-- | :-- | | Staff shifts | Managers scan a day or week and adjust start/end times. | | Appointments | Users compare open slots in a familiar calendar shape. | | Room bookings for one location | The day is more important than a long resource list. | | Personal or team calendars | The main task is finding a time window. |

Configure it with day, week, or month views:

const verticalWeek = {
  view: 'week',
  weekStartDate: '2026-06-08',
  visibleDays: [1, 2, 3, 4, 5],
  slotMinutes: 30,
  timeRange: { start: '08:00', end: '18:00' },
  timeColumnSize: 88,
  dayColumnSize: 180,
};

Choose vertical time when the primary action is creating, moving, or resizing events inside a day or week.

Horizontal Resource Timeline

Horizontal scheduling puts resources on rows and time on columns. Time moves left to right, and an event duration is shown by the event width.

This layout is best when users compare many resources over the same window:

| Good fit | Why | | :-- | :-- | | Multi-room booking | Rooms stay fixed on the left while the schedule scrolls horizontally. | | Equipment planning | Users compare utilization across machines, vehicles, or tools. | | Field crews | Dispatchers see who is available across several days. | | Open demand planning | Unassigned work can sit beside staffed resources. |

Configure it with resourceTimeline:

const horizontalTimeline = {
  view: 'resourceTimeline',
  dateRange: { start: '2026-06-08', end: '2026-06-12' },
  slotMinutes: 60,
  timeRange: { start: '08:00', end: '18:00' },
  resourceColumnSize: 240,
  timelineColumnSize: 72,
};

Choose a horizontal timeline when the primary action is comparing capacity, coverage, and conflicts across resources.

Same Data, Different Projection

Both orientations use the same scheduler data:

• events define the booked work
• resources define people, rooms, machines, or teams
• assignments connect events to resources when the model needs many-to-many scheduling
• availability, calendars, conflicts, templates, and remote loading work across both layouts

The difference is projection. Vertical views emphasize time within a day or week. Horizontal views emphasize resources across a date range.

Choosing a Default

Start with vertical time scheduling when users mostly edit individual events and think in daily calendars.

Start with a horizontal resource timeline when users mostly compare many resources, load large schedules from a server, or need coverage and utilization signals.

Many applications expose both. For example, a shift planner can use a week view for fast editing and a resource timeline for staffing coverage.