bootstrap-vue
Version:
With more than 85 components, over 45 available plugins, several directives, and 1000+ icons, BootstrapVue provides one of the most comprehensive implementations of the Bootstrap v4 component and grid system available for Vue.js v2.6, complete with extens
318 lines (317 loc) • 12.4 kB
JSON
{
"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"
}
]
}
]
}
]
}
}