Shade non-working hours and days, and mark the current time in today's column.
On this page
businessHours shades everything outside the given hours — and whole days
not listed in daysOfWeek (ISO weekday numbers, Monday = 1). By default the
shading is visual only.
10 Mon
11 Tue
12 Wed
13 Thu
14 Fri
15 Sat
16 Sun
All-day
06:00
07:00
08:00
09:00
10:00
11:00
12:00
13:00
14:00
15:00
16:00
17:00
18:00
19:00
20:00
21:00
09:00 AM – 10:00 AM
Kickoff
07:00 PM – 08:00 PM
After hours deploy
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-business-hours-example',
imports: [SchedulerComponent],
template: `
<c-scheduler
[businessHours]="businessHours"
[dayStartHour]="6"
[dayEndHour]="22"
[events]="events"
/>
`
})
export class SchedulerBusinessHoursExample {
readonly businessHours = { daysOfWeek: [1, 2, 3, 4, 5], startHour: 9, endHour: 17 }
readonly events = [
{
id: 'kickoff', title: 'Kickoff', start: `${day(0)}T09:00`, end: `${day(0)}T10:00`
},
{
id: 'late', title: 'After hours deploy', start: `${day(3)}T19:00`, end: `${day(3)}T20:00`, color: '#e55353'
}
]
}Enforcing business hours
Add enforce: true to reject moves, resizes and creations that would land
outside the working hours or on a non-working day — the operation simply
does not commit, and the rejection is announced through the live region
(localizable outsideBusinessHours label). All-day events are exempt.
<c-scheduler [businessHours]="{ daysOfWeek: [1, 2, 3, 4, 5], startHour: 9, endHour: 17, enforce: true }" />Now indicator
Whenever today is visible in a time-grid view, a line marks the current time
in its column and follows it minute by minute. Style it through the
--cui-scheduler-now-color token.