Event calendar

import { Component } from '@angular/core';
import { WrEventCalendar } from 'ngwr/event-calendar';

@Component({ imports: [WrEventCalendar] })
export class MyComponent {}

// Only for another date library:
import { provideWr } from 'ngwr';
import { withDates } from 'ngwr/date';

bootstrapApplication(App, { providers: [provideWr(withDates({ adapter: AppDateAdapter }))] });

<wr-event-calendar [events]="events()" [(view)]="view" [(date)]="anchor" />

protected readonly events = signal<readonly WrCalendarEvent[]>([
  { id: 1, title: 'Design review', start: at(0, 10), end: at(0, 11, 30), color: 'primary' },
  { id: 5, title: 'Conference', start: at(2, 0), end: at(5, 0), allDay: true, color: 'info' },
  { id: 7, title: 'Frozen — no deploys', start: at(6, 0), end: at(7, 0), allDay: true, editable: false },
]);

<wr-event-calendar
  editable
  [events]="events()"
  [(view)]="view"
  [(date)]="anchor"
  (eventChange)="apply($event)"
/>

protected apply(change: WrCalendarEventChange): void {
  this.events.update(events =>
    events.map(event =>
      event.id === change.event.id ? { ...event, start: change.start, end: change.end } : event
    )
  );
}

<wr-event-calendar
  view="week"
  [slotMinutes]="15"
  [dayStartHour]="9"
  [dayEndHour]="14"
  [events]="events()"
/>

<wr-event-calendar [events]="events()" (slotClick)="compose($event)" />

<!-- imports: [WrEventCalendar, WrCalendarEventTemplate] -->
<wr-event-calendar [events]="events()">
  <ng-template wrCalendarEvent let-event>
    <strong>{{ event.title }}</strong>
    <small>{{ event.data.room }}</small>
  </ng-template>
</wr-event-calendar>