Timeline View

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-timeline-example',
  imports: [SchedulerComponent],
  template: `
    <c-scheduler
      view="timeline"
      [timelineDays]="5"
      [timelineHourWidth]="40"
      [resources]="resources"
      [events]="events"
    />
  `
})
export class SchedulerTimelineExample {
  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: 'board', title: 'Board meeting', resourceId: 'room-1', start: `${day(0)}T09:00`, end: `${day(0)}T11:00`
},
    {
 id: 'sprint', title: 'Sprint', resourceId: 'room-1', start: `${day(0)}T10:00`, end: `${day(1)}T16:00`
},
    {
 id: 'workshop', title: 'Workshop', resourceId: 'room-2', start: `${day(1)}T09:00`, end: `${day(2)}T12:00`
},
    {
 id: 'audit', title: 'Audit', resourceId: 'room-3', start: day(2), end: day(4), allDay: true
}
  ]
}