CalendarView

Month calendar that highlights days with events and shows the label on hover.

Jump to API reference

Import

Vue
import { UiCalendarView } from '@ziyarago/ui/vue'

With events

October 2026
MTWTFSS
Vue
<UiCalendarView
  v-model="value"
  :events="[{ date: '2026-10-05', label: 'Group departure' }, { date: '2026-10-14', label: 'Visa deadline' }, { date: '2026-10-22', label: 'Return flight' }]"
 />

API reference

Month calendar that marks days with events, wrapping Calendar with a list-style events prop.

Props

PropType and valuesDefaultDescription
events{ date: string; label: string }[][]Marked days. date is "YYYY-MM-DD"; label shows as the day tooltip.
modelValuev-modelstring | number | Date—Selected date. Vue v-model, React modelValue + onChange.
localestring'en-GB'BCP 47 locale for month and weekday names.
weekStartsOn01234560 | 1 | 2 | 3 | 4 | 5 | 61First day of the week, 0 is Sunday and 1 is Monday.

Events

Vue: @name. React: onName.

changeCalled with the clicked Date (local time). Forwarded to Calendar.