Vue Calendar Component API

Calendar API

Explore the API reference for the Vue Calendar component and discover how to effectively utilize its props for customization.

On this page

CCalendar

jsx
import { CCalendar } from '@coreui/vue-pro'

Props

PropertyDefaultType
ariaNavNextMonthLabel5.4.0+'Next month'string

A string that provides an accessible label for the button that navigates to the next month in the calendar. This label is read by screen readers to describe the action associated with the button.

ariaNavNextYearLabel5.4.0+'Next year'string

A string that provides an accessible label for the button that navigates to the next year in the calendar. This label is intended for screen readers to help users understand the button's functionality.

ariaNavPrevMonthLabel5.4.0+'Previous month'string

A string that provides an accessible label for the button that navigates to the previous month in the calendar. Screen readers will use this label to explain the purpose of the button.

ariaNavPrevYearLabel5.4.0+'Previous year'string

A string that provides an accessible label for the button that navigates to the previous year in the calendar. This label helps screen reader users understand the button's function.

calendarDate-

Default date of the component

calendars1number

The number of calendars that render on desktop devices.

dayFormat4.6.0+'numeric'func, string

Set the format of days.

disabledDates-DisabledDate, DisabledDate[]

Specify the list of dates that cannot be selected.

endDate-

Initial selected to date (range).

firstDayOfWeek1number

Sets the day of start week. - 0 - Sunday, - 1 - Monday, - 2 - Tuesday, - 3 - Wednesday, - 4 - Thursday, - 5 - Friday, - 6 - Saturday,

locale'default'string

Sets the default locale for components. If not set, it is inherited from the navigator.language.

maxDate-

Max selectable date.

minDate-

Min selectable date.

monthFormat5.18.0+'short'string

Sets the format for month names.

navigationtrueboolean

Show arrows navigation.

navYearFirst4.6.0+-boolean

Reorder year-month navigation, and render year first.

range-boolean

Allow range selection.

selectEndDate-boolean

Toggle select mode between start and end date.

selectAdjacementDays4.9.0+-boolean

Set whether days in adjacent months shown before or after the current month are selectable. This only applies if the showAdjacementDays option is set to true.

selectionType5.0.0+'day'SelectionTypes

Specify the type of date selection as day, week, month, quarter, or year.

showAdjacementDays4.9.0+trueboolean

Set whether to display dates in adjacent months (non-selectable) at the start and end of the current month.

showWeekNumber5.0.0+-boolean

Set whether to display week numbers in the calendar.

startDate-

Initial selected date.

weekdayFormat2func, number, string

Set length or format of day name.

weekNumbersLabel5.0.0+-string

Label displayed over week numbers in the calendar.

yearFormat5.18.0+'numeric'string

Sets the format for years.

Events

Event name
date-hover

Callback fired when the user hovers over the calendar cell.

  • dateDate | null
calendar-date-change

Callback fired when the calendar date changed.

  • dateDate | null
  • viewViewTypes
start-date-change

Callback fired when the start date changed.

  • dateDate | null
end-date-change

Callback fired when the end date changed.

  • dateDate | null