Angular Scheduler Drag and Drop

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-dnd-example',
  imports: [SchedulerComponent],
  template: `
    <c-scheduler
      [dayStartHour]="8"
      [dayEndHour]="18"
      [snap]="30"
      [events]="events"
      (eventChange)="onEventChange($event)"
    />
    <p class="mt-2 mb-0 text-body-secondary">{{ log }}</p>
  `
})
export class SchedulerDndExample {
  readonly events = [
    {
 id: 'kickoff', title: 'Kickoff', start: `${day(0)}T09:00`, end: `${day(0)}T10:00`
},
    {
 id: 'review', title: 'Review', start: `${day(2)}T13:00`, end: `${day(2)}T14:30`, color: '#2eb85c'
}
  ]
log = ''

  onEventChange(change: EventChangePayload): void {
    this.log = `${change.action}: ${change.event.title} → ${change.event.start}`
  }
}