Month 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-month-example',
  imports: [SchedulerComponent],
  template: `
    <c-scheduler view="month" [monthMaxEventsPerDay]="3" [events]="events" />
  `
})
export class SchedulerMonthExample {
  readonly events = [
    {
 id: 'standup', title: 'Standup', start: `${day(0)}T09:00`, end: `${day(0)}T09:15`, rrule: 'FREQ=DAILY;COUNT=10'
},
    {
 id: 'design', title: 'Design review', start: `${day(1)}T10:00`, end: `${day(1)}T11:30`, color: '#2eb85c'
},
    {
 id: 'sync', title: 'Team sync', start: `${day(1)}T10:30`, end: `${day(1)}T11:00`
},
    {
 id: 'one', title: '1:1', start: `${day(1)}T13:00`, end: `${day(1)}T13:30`, color: '#e55353'
},
    {
 id: 'conf', title: 'CoreUI Conf', start: day(4), end: day(6), allDay: true
},
    {
 id: 'planning', title: 'Planning', start: `${day(7)}T10:00`, end: `${day(7)}T12:00`
}
  ]
}