The agenda view lists events chronologically, grouped by day, over a
rolling window of agendaDays days (default 14) from the anchor date.
Days without events are hidden.
All-day
Wednesday, August 12
09:00 AM – 09:15 AMStandup
Thursday, August 13
09:00 AM – 09:15 AMStandup
Friday, August 14
All-dayCoreUI Conf
09:00 AM – 09:15 AMStandup
Saturday, August 15
All-dayCoreUI Conf
09:00 AM – 09:15 AMStandup
Sunday, August 16
09:00 AM – 09:15 AMStandup
Monday, August 17
09:00 AM – 09:15 AMStandup
10:00 AM – 12:00 PMPlanning
Tuesday, August 18
09:00 AM – 09:15 AMStandup
Wednesday, August 19
09:00 AM – 09:15 AMStandup
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-agenda-example',
imports: [SchedulerComponent],
template: `
<c-scheduler view="agenda" [agendaDays]="14" [events]="events" />
`
})
export class SchedulerAgendaExample {
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: '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`
}
]
}Rows are selectable and respond to Delete; the prev/next buttons
step by the same agendaDays window. A range with no events shows the
localizable agendaEmpty placeholder instead of an empty list.