Calendar

Month-view event calendar with drag & drop, plus the lower-level CalendarGrid used by the date pickers. Locale-aware week start and names.

Calendar

Calendar

Vue

<ThlCalendar :events="events" @event-move="move" @date-click="(iso) => toast.info(iso)" @event-click="(e) => toast.success(e.title)" />

React

<Calendar events={events}
  onDateClick={(iso) => add(iso)}
  onEventMove={(id, date) => setEvents((es) => es.map((e) => (e.id === id ? { ...e, date } : e)))}
  onEventClick={(e) => open(e)} />

Angular

<thl-calendar [events]="events()" (dateClick)="add($event)" (eventMove)="move($event)" (eventClick)="open($event)" />

Event shape: { id, title, date: 'YYYY-MM-DD', color?: ThlSemanticColor }.

API

Calendar

<ThlCalendar> · import { ThlCalendar } from '@thl-ui/vue'

Prop	Type	Default
events*	array	—

Events: event-movedate-clickevent-click

CalendarGrid

<ThlCalendarGrid> · import { ThlCalendarGrid } from '@thl-ui/vue'

Prop	Type	Default
month*	date	—
selected	any	—
rangeStart	any	—
rangeEnd	any	—
hover	any	—
min	any	—
max	any	—

Events: update:monthselecthover