calendar

Calendar

Lets the shopper pick a date from a month grid, within a minimum and maximum, starting the week where the locale it is given does, one or several months side by side.

States: Default, Hover, Focus, Disabled, Invalid

Parts

Part	File	Does
Calendar	Calendar.vue	Lets the user pick a date from a monthly calendar.
CalendarCell	CalendarCell.vue	Holds one day in a row of the calendar grid.
CalendarCellTrigger	CalendarCellTrigger.vue	Lets the user select a single day of the calendar.
CalendarGrid	CalendarGrid.vue	Lays out the days of one month in a grid.
CalendarGridBody	CalendarGridBody.vue	Holds the weeks of the calendar grid.
CalendarGridHead	CalendarGridHead.vue	Holds the row of weekday names above the calendar days.
CalendarGridRow	CalendarGridRow.vue	Groups the days of one week in the calendar grid.
CalendarHeadCell	CalendarHeadCell.vue	Labels one column of the calendar grid with a weekday name.
CalendarHeader	CalendarHeader.vue	Groups the heading and month navigation above the calendar grid.
CalendarHeading	CalendarHeading.vue	Shows the month and year the calendar currently displays.
CalendarNextButton	CalendarNextButton.vue	Lets the user move the calendar to the next month.
CalendarPrevButton	CalendarPrevButton.vue	Lets the user move the calendar to the previous month.

Anatomy

<Calendar>
  <CalendarHeader>
    <CalendarHeading />
    <CalendarPrevButton />
    <CalendarNextButton />
  </CalendarHeader>
  <CalendarGrid>
    <CalendarGridHead>
      <CalendarGridRow>
        <CalendarHeadCell />
      </CalendarGridRow>
    </CalendarGridHead>
    <CalendarGridBody>
      <CalendarGridRow>
        <CalendarCell>
          <CalendarCellTrigger />
        </CalendarCell>
      </CalendarGridRow>
    </CalendarGridBody>
  </CalendarGrid>
</Calendar>

Styling

Part	Recipe
Calendar	calendar
Calendar	calendar-select-label
CalendarCell	calendar-cell
CalendarCellTrigger	calendar-cell-trigger
CalendarGridRow	calendar-grid-row
CalendarHeadCell	calendar-head-cell
CalendarHeader	calendar-header
CalendarHeading	calendar-heading
CalendarNextButton	calendar-nav
CalendarPrevButton	calendar-nav

Install

Writes 13 files into components/ui/calendar/. For agents, npx @frontic/ui docs calendar prints this reference as markdown; the MCP server serves the same.

Installs with it: native-select
npm packages: @internationalized/date; @lucide/vue; @vueuse/core; class-variance-authority; reka-ui

Built from

Native Select

API reference

Calendar Calendar.vue

Lets the user pick a date from a monthly calendar. Renders a <div>.

Prop	Type	Default
defaultValue	DateValue	—

defaultPlaceholder	DateValue	—

placeholder	DateValue	—

pagedNavigation	boolean	false

preventDeselect	boolean	false

weekStartsOn	WeekStartsOn	—

weekdayFormat	WeekDayFormat	'narrow'

calendarLabel	string	—

fixedWeeks	boolean	false

maxValue	DateValue	—

minValue	DateValue	—

locale	string	—

numberOfMonths	number	1

disabled	boolean	false

readonly	boolean	false

initialFocus	boolean	false

isDateDisabled	Matcher	—

isDateUnavailable	Matcher	—

dir	Direction	—

nextPage	((placeholder: DateValue) => DateValue)	—

prevPage	((placeholder: DateValue) => DateValue)	—

modelValue	DateValue \| DateValue[] \| null

multiple	boolean	false

disableDaysOutsideCurrentView	boolean	false

asChild	boolean	false

as	AsTag \| Component	'div'
Name as Description The element or component this component should render as. Can be overwritten by `asChild`. Type ComponentOptions<any, any, any, ComputedOptions, MethodOptions, any, any, any, string, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions> \| (props: any, ctx: Omit<{ attrs: Attrs; slots: Readonly<InternalSlots>; emit: (event: string, ...args: any[]) => void; expose: <Exposed extends Record<string, any> = Record<string, any>>(exposed?: Exposed \| undefined) => void; }, 'expose'>): any \| ComponentPublicInstanceConstructor<any, any, any, any, ComputedOptions, MethodOptions> \| 'a' \| 'button' \| 'div' \| 'form' \| 'h2' \| 'h3' \| 'img' \| 'input' \| 'label' \| 'li' \| 'nav' \| 'ol' \| 'p' \| 'span' \| 'svg' \| 'ul' \| 'template' \| {} & string Default 'div'
class	ClassValue	—

layout	LayoutTypes

yearRange	DateValue[]	—

Event	Payload
update:modelValue	date: DateValue \| undefined

update:placeholder	date: DateValue

Slot	Slot props
calendar-heading	{ date: DateValue; month: ReuseTemplateComponent<{ date: DateValue; }, Record<"default", undefined>>; year: ReuseTemplateComponent<{ date: DateValue; }, Record<"default", undefined>>; }

calendar-prev-icon	—

calendar-next-icon	—

Data attribute	Values
data-disabled	—

data-invalid	—

data-readonly	—

Recipe calendar	Sets
base: calendar	1 property

Recipe calendar-select-label	Sets
base: calendar-select-label	2 properties

Parts

Anatomy

Styling

Install

Built from

API reference

Calendar Calendar.vue

CalendarCell CalendarCell.vue

CalendarCellTrigger CalendarCellTrigger.vue

CalendarGrid CalendarGrid.vue

CalendarGridBody CalendarGridBody.vue

CalendarGridHead CalendarGridHead.vue

CalendarGridRow CalendarGridRow.vue

CalendarHeadCell CalendarHeadCell.vue

CalendarHeader CalendarHeader.vue

CalendarHeading CalendarHeading.vue

CalendarNextButton CalendarNextButton.vue

CalendarPrevButton CalendarPrevButton.vue