{ "name": "@bootstrap-vue/calendar", "version": "1.0.0", "meta": { "title": "Calendar", "slug": "calendar", "version": "2.5.0", "description": "BootstrapVue custom calendar widget for selecting dates and controlling other components, fully WAI-ARIA accessible (a11y) and supports internationalization (i18n).", "components": [ { "component": "BCalendar", "version": "2.5.0", "props": [ { "prop": "block", "description": "Makes the calendar full width" }, { "prop": "dateDisabledFn", "description": "Set to a function reference which returns `true` if the date is disabled, or `false` if the date should be enabled. See documentation for details" }, { "prop": "dateFormatOptions", "version": "2.6.0", "description": "Format object for displayed text string that is passed to `Intl.DateTimeFormat`" }, { "prop": "dateInfoFn", "description": "Set to a function reference which returns a class (string), or classes (array of strings) to apply to the date cell. See documentation for details" }, { "prop": "direction", "description": "Set to the string 'rtl' or 'ltr' to explicitly force the calendar to render in right-to-left or left-ro-right (respectively) mode. Defaults to the resolved locale's directionality" }, { "prop": "disabled", "description": "Places the calendar in a non-interactive disabled state" }, { "prop": "headerTag", "version": "2.22.0", "description": "Specify the HTML tag to render instead of the default tag for the footer" }, { "prop": "hidden", "description": "When `true`, renders a comment node instead of the calendar widget while keeping the Vue instance active. Mainly used when implementing a custom date picker" }, { "prop": "hideHeader", "description": "When `true`, visually hides the selected date header" }, { "prop": "initialDate", "version": "2.7.0", "description": "When a `value` is not specified, sets the initial calendar month date that will be presented to the user. Accepts a value in `YYYY-MM-DD` format or a `Date` object. Defaults to the current date (or min or max if the current date is out of range)" }, { "prop": "labelCalendar", "description": "Value of the `aria-label` and `role-description` attributes applied to the calendar grid" }, { "prop": "labelCurrentMonth", "description": "Value of the `aria-label` and `title` attributes on the `Current Month` navigation button" }, { "prop": "labelHelp", "description": "Help text that appears at the bottom of the calendar grid" }, { "prop": "labelNav", "description": "Value of the `aria-label` attribute on to the calendar navigation button wrapper" }, { "prop": "labelNextDecade", "version": "2.11.0", "description": "Value of the `aria-label` and `title` attributes on the optional `Next Decade` navigation button" }, { "prop": "labelNextMonth", "description": "Value of the `aria-label` and `title` attributes on the `Next Month` navigation button" }, { "prop": "labelNextYear", "description": "Value of the `aria-label` and `title` attributes on the `Next Year` navigation button" }, { "prop": "labelNoDateSelected", "description": "Label to use when no date is currently selected" }, { "prop": "labelPrevDecade", "version": "2.11.0", "description": "Value of the `aria-label` and `title` attributes on the optional `Previous Decade` navigation button" }, { "prop": "labelPrevMonth", "description": "Value of the `aria-label` and `title` attributes on the `Previous Month` navigation button" }, { "prop": "labelPrevYear", "description": "Value of the `aria-label` and `title` attributes on the `Previous Year` navigation button" }, { "prop": "labelSelected", "description": "Value of the `aria-label` attribute set on the calendar grid date button that is selected" }, { "prop": "labelToday", "description": "Value of the `aria-label` attribute for the calendar grid date button to signify that the date is today's date" }, { "prop": "locale", "description": "Locale (or locales) for the calendar to use. When passing an array of locales, the order of the locales is from most preferred to least preferred" }, { "prop": "max", "description": "The maximum date the calendar will show" }, { "prop": "min", "description": "The minimum date the calendar will show" }, { "prop": "navButtonVariant", "version": "2.17.0", "description": "Theme color variant to use for the navigation buttons" }, { "prop": "noHighlightToday", "description": "Disabled the highlighting of todays date in the calendar" }, { "prop": "noKeyNav", "description": "Disable keyboard navigation of the calendar components" }, { "prop": "readonly", "description": "Places the calendar in an interactive readonly state. Disables updating the v-model, while still allowing date navigation" }, { "prop": "roleDescription", "description": "Sets a value for the `role-description` attribute on the component" }, { "prop": "selectedVariant", "description": "Theme color variant to use for the selected date button" }, { "prop": "showDecadeNav", "version": "2.11.0", "description": "When `true`, shows the +/- decade navigation buttons" }, { "prop": "startWeekday", "description": "Day of week to start the calendar. `0` for Sunday, `1` for Monday, `6` for Saturday, etc" }, { "prop": "todayVariant", "description": "Theme color variant to use for highlighting todays date button. Defaults to the `selectedVariant` prop" }, { "prop": "value", "description": "Initially selected date value. Accepts either a `YYYY-MM-DD` string or a `Date` object" }, { "prop": "valueAsDate", "description": "Returns a `Date` object for the v-model instead of a `YYYY-MM-DD` string" }, { "prop": "weekdayHeaderFormat", "version": "2.12.0", "description": "Format to use for the calendar weekday headings. Possible values are `long`, `short` (default), or `narrow`" }, { "prop": "width", "description": "The width of the calendar. Has no effect if prop `block` is set" } ], "events": [ { "event": "context", "description": "Emitted when when the user changes the active date via date navigation buttons or cursor control", "args": [ { "arg": "context", "description": "The context object. See documentaion for details", "type": [ "Object" ] } ] }, { "event": "input", "description": "Emitted when updating the v-model", "args": [ { "arg": "date", "description": "Either a string in the format of `YYYY-MM-DD` or a `Date` object (if `value-as-date` prop is `true`)", "type": [ "String", "Date" ] } ] }, { "event": "selected", "description": "Emitted when user has selected (clicked) a date. Note this event will also be emitted if the user clicks on the currently selected date", "args": [ { "arg": "ymd", "description": "The selected date as a string in the format of `YYYY-MM-DD`", "type": "String" }, { "arg": "date", "description": "The selected date as a `Date` object", "type": "Date" } ] } ], "slots": [ { "name": "default", "description": "Used to place custom controls at the bottom of the calendar component" }, { "name": "nav-next-decade", "version": "2.12.0", "description": "Used to place custom content in the next decade navigation button", "scope": [ { "prop": "isRTL", "type": "Boolean", "description": "Will be `true` if the date navigation bar is rendered right to left" } ] }, { "name": "nav-next-month", "version": "2.12.0", "description": "Used to place custom content in the next month navigation button", "scope": [ { "prop": "isRTL", "type": "Boolean", "description": "Will be `true` if the date navigation bar is rendered right to left" } ] }, { "name": "nav-next-year", "version": "2.12.0", "description": "Used to place custom content in the next year navigation button", "scope": [ { "prop": "isRTL", "type": "Boolean", "description": "Will be `true` if the date navigation bar is rendered right to left" } ] }, { "name": "nav-prev-decade", "version": "2.12.0", "description": "Used to place custom content in the previous decade navigation button", "scope": [ { "prop": "isRTL", "type": "Boolean", "description": "Will be `true` if the nav bar is rendered right to left" } ] }, { "name": "nav-prev-month", "version": "2.12.0", "description": "Used to place custom content in the previous month navigation button", "scope": [ { "prop": "isRTL", "type": "Boolean", "description": "Will be `true` if the date navigation bar is rendered right to left" } ] }, { "name": "nav-prev-year", "version": "2.12.0", "description": "Used to place custom content in the previous year navigation button", "scope": [ { "prop": "isRTL", "type": "Boolean", "description": "Will be `true` if the date navigation bar is rendered right to left" } ] }, { "name": "nav-this-month", "version": "2.12.0", "description": "Used to place custom content in the this month/day navigation button", "scope": [ { "prop": "isRTL", "type": "Boolean", "description": "Will be `true` if the date navigation bar is rendered right to left" } ] } ] } ] } }