Resource View

Resources

One column per room, person or machine — with automatic column virtualization past a dozen resources.

On this page

The resource view shows a single day with one column per resource. Events are routed to their column by resourceId, and dragging an event into another column reassigns it.

Room 1

Room 2

Room 3

08:00

09:00

10:00

11:00

12:00

13:00

14:00

15:00

16:00

17:00

import { Component } from '@angular/core'
import { SchedulerComponent } from '@coreui/angular-scheduler'

const pad = (n: number) => String(n).padStart(2, '0')
const day = (offset: number) => {
  const date = new Date()
  date.setDate(date.getDate() - ((date.getDay() + 6) % 7) + offset)
  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`
}

@Component({
  selector: 'docs-scheduler-resources-example',
  imports: [SchedulerComponent],
  template: `
    <c-scheduler
      view="resource"
      [dayStartHour]="8"
      [dayEndHour]="18"
      [resources]="resources"
      [events]="events"
    />
  `
})
export class SchedulerResourcesExample {
  readonly resources = [
    { id: 'room-1', label: 'Room 1' },
    { id: 'room-2', label: 'Room 2', color: '#2eb85c' },
    { id: 'room-3', label: 'Room 3', color: '#e55353' }
  ]
  readonly events = [
    {
 id: 'a', title: 'Board meeting', resourceId: 'room-1', start: `${day(0)}T09:00`, end: `${day(0)}T11:00`
},
    {
 id: 'b', title: 'Workshop', resourceId: 'room-2', start: `${day(0)}T09:30`, end: `${day(0)}T12:00`
},
    {
 id: 'c', title: 'Interview', resourceId: 'room-3', start: `${day(0)}T10:00`, end: `${day(0)}T10:45`
},
    {
 id: 'd', title: 'All hands', resourceId: 'room-1', start: `${day(0)}T14:00`, end: `${day(0)}T15:00`
}
  ]
}

Resources

<c-scheduler view="resource" [resources]="resources" [events]="events" />

A resource color becomes the default color for its events — an event’s own color still wins. Events without a resourceId are not shown in this view.

Virtualization

Past 12 resources the columns render through a horizontal virtualizer: only the visible window plus a small overscan exists in the DOM, the header and all-day rows scroll in sync, and the time axis stays pinned. Column width is controlled by resourceColumnWidth (default 160).