カレンダー

ドラッグ＆ドロップに対応した月表示のイベントカレンダーと、日付ピッカーが内部で使う低レベルの CalendarGrid。週の開始日と曜日名はロケールに従います。

カレンダー

カレンダー

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)" />

イベントの形: { id, title, date: 'YYYY-MM-DD', color?: ThlSemanticColor }。

API

Calendar

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

Prop	型	デフォルト
events*	array	—

イベント: event-movedate-clickevent-click

CalendarGrid

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

Prop	型	デフォルト
month*	date	—
selected	any	—
rangeStart	any	—
rangeEnd	any	—
hover	any	—
min	any	—
max	any	—

イベント: update:monthselecthover