Calendar API

Name: FishtVue
Author: Egoka

This page provides an overview of the Calendar component API, detailing its props, emits, slots, and exposed methods/states.

Props

The Calendar component accepts the following props:

Prop	Default	Type	Description
`paramsDatePicker`	`undefined`	`Partial<IParamsDatePicker>` or `undefined`	Additional parameters for date picker behavior and formatting.
`autoFocus`	`undefined`	`boolean` or `undefined`	Automatically focuses the calendar input on mount.
`isNotCloseOnDateChange`	`undefined`	`boolean` or `undefined`	Prevents the calendar from closing when a date is selected.
`classDataPicker`	`undefined`	`StyleClass` or `undefined`	Custom CSS class for the data picker.
`classPicker`	`undefined`	`StyleClass` or `undefined`	Custom CSS class for the calendar picker.
`classDateText`	`undefined`	`StyleClass` or `undefined`	Custom CSS class for the displayed date text.
`paramsFixWindow`	`undefined`	`FixWindowProps` or `undefined`	Configuration for fixing the calendar window's position.
`id`	`undefined`	`string` or `undefined`	Unique identifier for the calendar component.
`modelValue`	`undefined`	`DateValueCalendar` or `Partial<IRangeValue>`	The current value of the calendar, can be a single date or a date range.

Emits

The Calendar component emits the following events:

Emit	Payload	Description
`update:isInvalid`	`CalendarProps["isInvalid"]`	Emitted when the invalid state of the calendar is updated.
`update:modelValue`	`CalendarProps["modelValue"]`	Emitted when the `modelValue` is updated.
`change:modelValue`	`CalendarProps["modelValue"]`	Emitted when the `modelValue` changes.
`getCalendar`	`ICalendarPicker`	Emitted when the calendar data is retrieved.
`isActive`	`boolean`	Emitted when the calendar's active state changes.

Slots

The Calendar component provides the following slots:

Slot	Payload	Description
`default`	`VNode[]`	Default slot for custom content inside the calendar component.
`before`	`VNode[]`	Slot for content to be displayed before the calendar.
`after`	`VNode[]`	Slot for content to be displayed after the calendar.
`footerPicker`	`VNode[]`	Slot for custom content in the footer of the date picker.

Expose

The Calendar component exposes the following methods and states via ref:

Expose	Value	Description
`layout`	`InputLayoutExpose` or `undefined`	Reference to the layout state of the input field.
`inputLayout`	`Omit<InputLayoutProps, "value">`	Reference to the input layout properties.
`dataPicker`	`HTMLElement` or `undefined`	Reference to the data picker HTML element.
`picker`	`HTMLElement` or `undefined`	Reference to the calendar picker HTML element.
`calendarPicker`	`ICalendarPicker` or `undefined`	Instance of the calendar picker.
`isFocus`	`boolean`	Indicates if the calendar input is focused.
`isOpenPicker`	`boolean`	Indicates if the calendar picker is open.
`datePicker`	`Partial<IParamsDatePicker>`	Parameters for the date picker.
`value`	`CalendarProps["modelValue"]`	Current value of the calendar.
`visibleDate`	`ICalendarPicker["inputValue"]` or `undefined`	The currently visible date in the picker.
`id`	`CalendarProps["id"]`	Current `id` value for the calendar component.
`isValue`	`boolean`	Indicates whether the calendar has a value.
`autoFocus`	`CalendarProps["autoFocus"]`	Indicates if autofocus is enabled.
`isNotCloseOnDateChange`	`CalendarProps["isNotCloseOnDateChange"]`	Indicates if the calendar remains open on date selection.
`mode`	`StyleMode`	The current styling mode of the editor.
`placeholder`	`IParamsDatePicker["placeholder"]` or `undefined`	Placeholder text for the input field.
`isLoading`	`CalendarProps["loading"]`	Indicates if the calendar is in a loading state.
`isDisabled`	`CalendarProps["disabled"]`	Indicates if the calendar is disabled.
`isInvalid`	`CalendarProps["isInvalid"]`	Indicates if the calendar is invalid.
`messageInvalid`	`CalendarProps["messageInvalid"]`	Validation message for the calendar input.
`separator`	`IParamsDatePicker["separator"]` or `undefined`	Separator character for date ranges.
`valueLayout`	`string`	Current layout value.
`paramsFixWindow`	`CalendarProps["paramsFixWindow"]`	Configuration for fixing the calendar window.
`classLayout`	`CalendarProps["class"]`	CSS class for the layout container.
`classDataPicker`	`CalendarProps["classDataPicker"]`	CSS class for the data picker.
`classDateText`	`CalendarProps["classDateText"]`	CSS class for the date text display.
`classPicker`	`CalendarProps["classPicker"]`	CSS class for the calendar picker.

Methods:

openCalendar(): void - Opens the calendar picker.
closeCalendar(event?: MouseEvent): void - Closes the calendar picker.
changeDate(date: ICalendarPicker["inputValue"]): void - Changes the selected date in the calendar.
focus(focus: boolean): void - Sets the focus state for the calendar.
clearDataPicker(): void - Clears the selected date in the calendar.