Hire UsGet CoreUI Scheduler →

Creating Events

Creating events

MarkdownChatGPTClaude

Create events by dragging across empty slots — or entirely from the keyboard.

On this page

Press on an empty slot and drag to select a range — releasing creates an event and emits eventChange with action: 'create'. In the month view the same gesture spans days and creates an all-day event.

Aug 10 – 16, 2026
10 Mon
11 Tue
12 Wed
13 Thu
14 Fri
15 Sat
16 Sun
08:00
09:00
10:00
11:00
12:00
13:00
14:00
15:00
16:00
17:00
10:00 AM – 11:00 AM
Busy

ts
import { Component } from '@angular/core'
import { SchedulerComponent } from '@coreui/angular-scheduler'
import type { EventChangePayload } 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-create-example',
  imports: [SchedulerComponent],
  template: `
    <c-scheduler
      [dayStartHour]="8"
      [dayEndHour]="18"
      [snap]="15"
      [events]="events"
      (eventChange)="onEventChange($event)"
    />
    <p class="mt-2 mb-0 text-body-secondary">{{ log }}</p>
  `
})
export class SchedulerCreateExample {
  readonly events = [
    {
 id: 'busy', title: 'Busy', start: `${day(1)}T10:00`, end: `${day(1)}T11:00`
}
  ]
log = ''

  onEventChange(change: EventChangePayload): void {
    if (change.action === 'create') {
      this.log = `Created: ${change.event.start} → ${change.event.end}`
    }
  }
}

Set [selectable]="false" to turn range selection (and click selection) off.

From the keyboard

The time grid is keyboard-navigable: Tab into it, move between slots with the arrow keys, press Enter to anchor a selection, extend it with ↑/↓ (by snap) and ←/→ (by day), then Enter to create — or Escape to cancel.