Calendar

Month calendar to pick a single date; days can carry event markers. Supports a size prop: xs, sm, md (default), lg, xl.

Jump to API reference

Import

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

Selected date

March 2027
MTWTFSS
Vue
<UiCalendar v-model="value" />

With events

March 2027
MTWTFSS
Vue
<UiCalendar
  v-model="value"
  :events="{ '2027-03-05': 'Departure', '2027-03-20': 'Return flight', '2027-03-26': 'Eid' }"
 />

Sizes

March 2027
MTWTFSS
March 2027
MTWTFSS
March 2027
MTWTFSS
March 2027
MTWTFSS
March 2027
MTWTFSS
Vue
<UiCalendar size="xs" v-model="value" />

<UiCalendar size="sm" v-model="value" />

<UiCalendar size="md" v-model="value" />

<UiCalendar size="lg" v-model="value" />

<UiCalendar size="xl" v-model="value" />

API reference

Month grid for picking one date. Use inline, or inside a popover via DatePicker.

Props

PropType and valuesDefaultDescription
modelValuev-modelDate | string | number—Selected date: a Date, ISO string or timestamp. Also sets the visible month. A date-only string like "2026-10-21" is read as a local date, so the day does not shift with the time zone.
localestring'en-GB'BCP 47 locale for month and weekday names.
weekStartsOnnumber1First day of the week: 0 = Sunday, 1 = Monday.
minDate | string | number—Earliest selectable day; earlier days are disabled.
maxDate | string | number—Latest selectable day; later days are disabled.
disabledDate(date: Date) => boolean—Return true to disable a specific day.
eventsRecord<string, string>'{}'Marked days: keys are YYYY-MM-DD, values are the tooltip text.
sizexssmmdlgxl'md'Day cell and header size.

Events

Vue: @name. React: onName.

changeCalled with a Date object (local time) for the clicked day.

Notes

  • The event payload is a Date, not a string: convert to ISO yourself if the model is a string.