Calendar

BootstrapVue's custom <b-calendar> component generates a WAI-ARIA compliant calendar style date selection widget, which can be used to control other components, or can be used to create customized date picker inputs.

Available in BootstrapVue since v2.5.0

Overview

<b-calendar> is WAI-ARIA accessibility compliant, optimized for keyboard control (arrow, page up/down, home, and end keys). Internationalization is also supported, and default's to the browser's or page's locale, if no locale(s) are specified.

If you need a date picker as a custom form control input, use the <b-form-datepicker> component instead.

<template>
  <b-row>
    <b-col md="auto">
      <b-calendar v-model="value" @context="onContext" locale="en-US"></b-calendar>
    </b-col>
    <b-col>
      <p>Value: <b>'{{ value }}'</b></p>
      <p class="mb-0">Context:</p>
      <pre class="small">{{ context }}</pre>
    </b-col>
  </b-row>
</template>

<script>
  export default {
    data() {
      return {
        value: '',
        context: null
      }
    },
    methods: {
      onContext(ctx) {
        this.context = ctx
      }
    }
  }
</script>
<!-- b-calendar.vue -->

v-model return value

By default, <b-calendar> returns dates as a string in the YYYY-MM-DD format, which is the same format returned by native browser <input type="date"> controls. You can have <b-calendar> return a Date object (with no time portion) as the v-model value instead by setting the value-as-date prop.

If no date is selected, <b-calendar> returns an empty string '', or returns null if the value-as-date prop is set.

Note that when value-as-date prop is set, the returned Date object will be in the browser's default timezone.

Disabled and readonly states

Setting the disabled prop will remove all interactivity of the <b-calendar> component.

Setting the readonly prop will disable selecting a date, but will keep the component interactive, allowing for date navigation. The v-model will not be updated in the readonly state.

For disabling specific dates or setting minimum and maximum date limits, refer to the Date constraints section.

<template>
  <div>
    <b-form-group label="Select calendar interactive state">
      <b-form-radio-group v-model="state" aria-controls="ex-disabled-readonly">
        <b-form-radio value="disabled">Disabled</b-form-radio>
        <b-form-radio value="readonly">Readonly</b-form-radio>
        <b-form-radio value="normal">Normal</b-form-radio>
      </b-form-radio-group>
    </b-form-group>
    <b-calendar id="ex-disabled-readonly" :disabled="disabled" :readonly="readonly"></b-calendar>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        state: 'disabled'
      }
    },
    computed: {
      disabled() {
        return this.state === 'disabled'
      },
      readonly() {
        return this.state === 'readonly'
      }
    }
  }
</script>

<!-- b-form-calendar-disabled-readonly.vue -->

Date constraints

Minimum and maximum dates

Restrict the calendar range via the min and max props. The props accept a date string in the format of YYYY-MM-DD or a Date object.

<template>
  <div>
    <b-calendar v-model="value" :min="min" :max="max" locale="en"></b-calendar>
  </div>
</template>

<script>
  export default {
    data() {
      const now = new Date()
      const today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
      // 15th two months prior
      const minDate = new Date(today)
      minDate.setMonth(minDate.getMonth() - 2)
      minDate.setDate(15)
      // 15th in two months
      const maxDate = new Date(today)
      maxDate.setMonth(maxDate.getMonth() + 2)
      maxDate.setDate(15)

      return {
        value: '',
        min: minDate,
        max: maxDate
      }
    }
  }
</script>

<!-- b-calendar-min-max.vue -->

Disabling dates

If you need to disable specific dates within the calendar, specify a function reference to the date-disabled-fn prop. The function is passed two arguments:

  • ymd The date as a YYYY-MM-DD string
  • date The date as a Date object

The function should either return true if the date cannot be selected (disabled), or false if the date can be selected (enabled). Note that the function cannot be asynchronous, and should return a value as quickly as possible.

<template>
  <div>
    <b-calendar v-model="value" :date-disabled-fn="dateDisabled" locale="en"></b-calendar>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: ''
      }
    },
    methods: {
      dateDisabled(ymd, date) {
        // Disable weekends (Sunday = `0`, Saturday = `6`) and
        // disable days that fall on the 13th of the month
        const weekday = date.getDay()
        const day = date.getDate()
        // Return `true` if the date should be disabled
        return weekday === 0 || weekday === 6 || day === 13
      }
    }
  }
</script>

<!-- b-calendar-disabled-dates.vue -->

Note the min and max date constraints are evaluated first, before date-disabled-fn.

Styling

Variants

The selected date button (background color) defaults to the 'primary' theme variant. You can change this to any of the Bootstrap v4 theme variant colors: 'secondary', 'success', 'danger', 'warning', 'info', etc, via the selected-variant prop.

Today's date will also be highlighted (text color) using the same variant as the selected date by default. To specify a different theme color to use for today's date, use the today-variant prop.

To disable highlighting of today's date altogether, set the no-highlight-today prop.

<template>
  <b-calendar selected-variant="success" today-variant="info"></b-calendar>
</template>

<!-- b-calendar-variants.vue -->

Width

The <b-calendar> renders as an inline-block element with a default width of 270px (excluding any padding or border that may be added to it). This width is optimized to fit the width of smaller mobile devices.

To change the width, set the width prop to any valid CSS width (including units).

Optionally, make the calendar full width by setting the prop block, which will make it expand to fit the width of the parent element. The width prop has no effect when block is set.

<template>
  <b-calendar block locale="en-US"></b-calendar>
</template>

<!-- b-calendar-block.vue -->

Note it is not recommended to set a width below 260px, otherwise truncation and layout issues with the component may occur.

Initial open calendar date

By default, when no date is selected, the calendar view will be set to the current month (or the min or max date if today's date is out of range of min or max). You can change this behaviour by specifying a date via the initial-date prop. The initial date prop will be used to determine the calendar month to be initially presented to the user. It does not set the component's value.

Date string format

v2.6.0+

To change format options of the displayed date text inside the component, e.g. in the header, set the date-format-options prop to an object containing the requested format properties for the Intl.DateTimeFormat object (see also Internationalization).

<template>
  <div>
    <p>Custom date format:</p>
    <b-calendar
      :date-format-options="{ year: 'numeric', month: 'short', day: '2-digit', weekday: 'short' }"
      locale="en"
    ></b-calendar>
    <p class="mt-3">Short date format:</p>
    <b-calendar
      :date-format-options="{ year: 'numeric', month: 'numeric', day: 'numeric' }"
      locale="en"
    ></b-calendar>
  </div>
</template>

<!-- b-calendar-dateformat.vue -->

The following table summarizes the valid options for each format property:

Property Possible values
year 'numeric', or '2-digit'
month 'numeric', '2-digit', 'long', 'short', or 'narrow'
day 'numeric', or '2-digit'
weekday 'long', 'short', or 'narrow'

Notes:

  • Leaving out certain options may affect the formatted text string, e.g. the weekday
  • The formatted value will vary according to the resolved locale. Some locales may not support the 'narrow' format and will fall back to 'short' or long' (if 'short' is not available)
  • year, month and day will always be shown. If you need to leave out a value, set the property to undefined, although this is highly discouraged for accessibility reasons

Weekday name header format

2.12.0+

The calendar weekday name header format defaults to 'short', which is typically a three-character abbreviation of the weekday, although some locales may override this. The format can be controlled via the prop weekday-header-format and accepts one of three values:

  • 'long' the full weekday name (e.g. Tuesday). Handy when using a full width calendar. Avoid using with the default calendar width.
  • 'short' typically is a 2 or 3 letter abbreviation of the weekday name, depending on the selected locale (e.g. "Tue")
  • 'narrow' typically a single character abbreviation (e.g., T). Two weekdays may have the same narrow style for some locales (e.g. Tueday and Thursday's narrow style are both T). This can be handy for those locales that do not support the 'short' format, such as locales 'ar' and 'fa'.

Hiding the top selected date header

By default, the current selected date will be displayed at the top of the calendar component, formatted in the locale's language.

You can hide this header via the hide-header prop. Note this only visually hides the selected date, while keeping it available to screen reader users as an aria-live region.

For example usage, refer to the Internationalization section below.

Optional decade navigation buttons

Set the prop show-decade-nav to enable the previous and next decade buttons in the calendar's date navigation toolbar.

The props label-prev-decade and label-next-decade props can be used to provide custom label text for the decade buttons.

For example usage, refer to the Internationalization section below.

Border and padding

Fancy a calendar with a border with padding? Use Bootstrap's border and padding utility classes to add borders and padding:

<template>
  <b-calendar class="border rounded p-2" locale="en"></b-calendar>
</template>

<!-- b-calendar-border-padding.vue -->

Default slot

Provide optional content at the bottom of the calendar interface via the use of default slot. The slot can be used to add buttons such as Select Today or Reset, etc.

<template>
  <b-calendar v-model="value" value-as-date locale="en">
    <div class="d-flex" dir="ltr">
      <b-button
        size="sm"
        variant="outline-danger"
        v-if="value"
        @click="clearDate"
      >
        Clear date
      </b-button>
      <b-button
        size="sm"
        variant="outline-primary"
        class="ml-auto"
        @click="setToday"
      >
        Set Today
      </b-button>
    </div>
  </b-calendar>
</template>

<script>
  export default {
    data() {
      return {
        value: null
      }
    },
    methods: {
      setToday() {
        const now = new Date()
        this.value = new Date(now.getFullYear(), now.getMonth(), now.getDate())
      },
      clearDate() {
        this.value = ''
      }
    }
  }
</script>

<!-- b-calendar-default-slot.vue -->

Date navigation button slots

2.12.0+

To change the content of the calendar's date navigation buttons, BootstrapVue provides scoped slots for each button:

  • 'nav-prev-decade'
  • 'nav-prev-year'
  • 'nav-prev-month'
  • 'nav-this-month' (the go to selected/today button)
  • 'nav-next-month'
  • 'nav-next-year'
  • 'nav-next-decade'

All seven slots have the same scoped property available:

Property Type Description
isRTL Boolean Will be true when the date navigation bar is rendered right-to-left

You can use the isRTL scoped property to "flip" the prev vs next button content to handle the left-to-right to right-to-left orientation change — i.e. the previous year button will be on the right when isRTL is true, instead of the left.

Adding CSS classes to specific dates

If you need to highlight a specific date or dates, set the date-info-fn prop to a reference to a function that returns a CSS class string (or array of strings) to apply to the date's cell. The function is passed two arguments:

  • ymd The date as a YYYY-MM-DD string
  • date The date as a Date object

The function can return a string, or an array of strings. If setting no classes, you can return an empty string (''), empty array ([]), or null.

In this example we are using the table-{variant} color classes to set a background color on the date cell. The table-{variant} color classes work well as they are muted versions of the theme colors.

<template>
  <div>
    <b-calendar v-model="value" :date-info-fn="dateClass" locale="en"></b-calendar>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: ''
      }
    },
    methods: {
      dateClass(ymd, date) {
        const day = date.getDate()
        return day >= 10 && day <= 20 ? 'table-info' : ''
      }
    }
  }
</script>

<!-- b-calendar-date-classes.vue -->

Note the function will not be called for disabled dates.

Accessibility note:

When using classes to convey specific meaning to a date, you should include additional context outside of the calendar (or via the default slot) as to the dates being highlighted (such as in an aria-live region), specifically for screen reader users.

BootstrapVue may, in the future, add in a feature to add in screen-reader friendly text note on the highlighted date via this function.

Events

input event

The 'input' event is emitted when updating the v-model. The event has a single argument which is the selected date. By default the value is a string in the format of YYYY-MM-DD (or an empty string if no date is selected). If the prop value-as-date is set, then the first argument will instead be a Date object (or null if no date selected).

If the disabled or readonly props are set, the 'input' event will not be emitted.

selected event

The 'selected' event is emitted when the user clicks a non-disabled date. The event passes two arguments:

  • ymd The selected date as a YYYY-MM-DD string
  • date The selected date as a Date object

If the user clicks the already selected date, the selected event will still be emitted, contrary to the 'input' event which will not re-emit the already selected date.

If the disabled or readonly props are set, the 'selected' event will not be emitted.

context event

The 'context' event is emitted whenever a user selects a date, or the user navigates the calendar (either via cursor keys, page up/down keys, home or end keys, or uses the calendar navigation buttons). It will also be emitted when the component is created (just before insertion into the DOM), or when the resolved locale has changed.

When the readonly prop is set, the event will still be emitted when the user navigates the calendar. It will not be emitted when the disabled prop is set (except for the initial emit when the calendar is created).

The 'context' event is passed a context object as it's only argument, with the following properties:

Property Description
selectedYMD The selected date value (YYYY-MM-DD format) or an empty string if no date selected
selectedDate The selected date value as a Date object or null if no date selected
selectedFormatted The selected date formatted in the current locale. If no date is selected, this will be the value of the label-no-date-selected prop
activeYMD The current date of the calendar day button that can receive focus as a string (YYYY-MM-DD format)
activeDate The current date of the calendar day button that can receive focus as a Date object
activeFormatted The active date formatted in the current locale
disabled Will be true if active date is disabled, false otherwise
locale The resolved locale (may not be the same as the requested locale)
calendarLocale The resolved locale used by the calendar, optionally including the calendar type (i.e. 'gregory'). Usually this will be the same as locale, but may include the calendar type used, such as fa-u-ca-gregory when selecting the Persian locale ('fa')
isRTL Will be true if the calendar is in a RTL (Right-To-Left) orientation. It will be false if LTR (Left-To-Right)

If formatting dates manually via Intl.DateTimeFormat, use the calendarLocale property value instead of the locale property value to ensure you are using the same calendaring convention that <b-calendar> uses. This is especially true for the IE 11 browser which does not fully implement all features of Intl.DateTimeFormat. Refer to the Internationalization section section below for additional details.

Internationalization

Internationalization of the calendar is provided via Intl.DateTimeFormat, except for labels applied to elements of the calendar control (aria-labels, selected status, and help text). You must provide your own translations for these labels. The available locales will be browser dependant (not all browsers support all locales)

By default <b-calendar> will use the browser's default locale, but you can specify the locale (or locales) to use via the locale prop. The prop accepts either a single locale string, or an array of locale strings (listed in order of preferred locale).

The calendar starts the week on Sunday. This can be changed by setting the start-weekday prop to a number in the range of 0 to 6 where 0 represents Sunday, 1 for Monday, up to 6 for Saturday.

The emitted context event will include which locale the calendar has resolved to (which may not be the same locale as requested, depending on the supported locales of Intl).

<template>
  <b-row>
    <b-col cols="12" class="mb-3">
      <label for="example-locales">Locale:</label>
      <b-form-select id="example-locales" v-model="locale" :options="locales"></b-form-select>
      <label for="example-weekdays" class="mt-2">Start weekday:</label>
      <b-form-select id="example-weekdays" v-model="weekday" :options="weekdays"></b-form-select>
      <b-form-checkbox v-model="showDecadeNav" switch inline class="my-2">
        Show decade navigation buttons
      </b-form-checkbox>
      <b-form-checkbox v-model="hideHeader" switch inline class="my-2">
        Hide the date header
      </b-form-checkbox>
    </b-col>
    <b-col md="auto">
      <b-calendar
        v-model="value"
        v-bind="labels[locale] || {}"
        :locale="locale"
        :start-weekday="weekday"
        :hide-header="hideHeader"
        :show-decade-nav="showDecadeNav"
        @context="onContext"
      ></b-calendar>
    </b-col>
    <b-col>
      <p>Value: <b>'{{ value }}'</b></p>
      <p class="mb-0">Context:</p>
      <pre class="small">{{ context }}</pre>
   </b-col>
  </b-row>
</template>

<script>
  export default {
    data() {
      return {
        value: '',
        context: null,
        showDecadeNav: false,
        hideHeader: false,
        locale: 'en-US',
        locales: [
          { value: 'en-US', text: 'English US (en-US)' },
          { value: 'de', text: 'German (de)' },
          { value: 'ar-EG', text: 'Arabic Egyptian (ar-EG)' },
          { value: 'zh', text: 'Chinese (zh)' }
        ],
        weekday: 0,
        weekdays: [
          { value: 0, text: 'Sunday' },
          { value: 1, text: 'Monday' },
          { value: 6, text: 'Saturday' }
        ],
        labels: {
          de: {
            labelPrevDecade: 'Vorheriges Jahrzehnt',
            labelPrevYear: 'Vorheriges Jahr',
            labelPrevMonth: 'Vorheriger Monat',
            labelCurrentMonth: 'Aktueller Monat',
            labelNextMonth: 'Nächster Monat',
            labelNextYear: 'Nächstes Jahr',
            labelNextDecade: 'Nächstes Jahrzehnt',
            labelToday: 'Heute',
            labelSelected: 'Ausgewähltes Datum',
            labelNoDateSelected: 'Kein Datum gewählt',
            labelCalendar: 'Kalender',
            labelNav: 'Kalendernavigation',
            labelHelp: 'Mit den Pfeiltasten durch den Kalender navigieren'
          },
          'ar-EG': {
            weekdayHeaderFormat: 'narrow',
            labelPrevDecade: 'العقد السابق',
            labelPrevYear: 'العام السابق',
            labelPrevMonth: 'الشهر السابق',
            labelCurrentMonth: 'الشهر الحالي',
            labelNextMonth: 'الشهر المقبل',
            labelNextYear: 'العام المقبل',
            labelNextDecade: 'العقد القادم',
            labelToday: 'اليوم',
            labelSelected: 'التاريخ المحدد',
            labelNoDateSelected: 'لم يتم اختيار تاريخ',
            labelCalendar: 'التقويم',
            labelNav: 'الملاحة التقويم',
            labelHelp: 'استخدم مفاتيح المؤشر للتنقل في التواريخ'
          },
          zh: {
            weekdayHeaderFormat: 'narrow',
            labelPrevDecade: '过去十年',
            labelPrevYear: '上一年',
            labelPrevMonth: '上个月',
            labelCurrentMonth: '当前月份',
            labelNextMonth: '下个月',
            labelNextYear: '明年',
            labelNextDecade: '下一个十年',
            labelToday: '今天',
            labelSelected: '选定日期',
            labelNoDateSelected: '未选择日期',
            labelCalendar: '日历',
            labelNav: '日历导航',
            labelHelp: '使用光标键浏览日期'
          }
        }
      }
    },
    methods: {
      onContext(ctx) {
        this.context = ctx
      }
    }
  }
</script>

<!-- b-calendar-i18n.vue -->

Currently <b-calendar> only supports the Gregorian ('gregory') calendar.

By default, <b-calendar> automatically detects RTL vs LTR via the resolved locale. You can force the calendar to render right-to-left by setting the direction prop to the string rtl, or set the direction prop to 'ltr' to always render left-to-right.

You can listen to the context event to determine the locale and directionality that the calendar has resolved to.

For server side rendering (SSR) when using Node.js, ensure that the Node.js runtime you are using supports Intl and the locales you will be using. Refer to the Node Intl support documentation for details.

Accessibility

<b-calendar> provides many accessibility features, such as aria-live regions, roles, aria labeling, shortcut keys and full keyboard navigation to work with most screen readers.

Keyboard navigation:

  • ArrowLeft moves to the previous day (or next day in RTL mode)
  • ArrowRight moves to the next day (or previous day in RTL mode)
  • ArrowUp moves to the same day in the previous week
  • ArrowDown moves to the same day in the next week
  • PageUp moves to the same day in the previous month
  • PageDown moves to the same day in the next month
  • Alt+PageUp moves to the same day and month in the previous year
  • Alt+PageDown moves to the same day and month in the next year
  • Ctrl+Alt+PageUp moves to the same day and month in the previous decade
  • Ctrl+Alt+PageDown moves to the same day and month in the next decade
  • Home moves to today's date
  • End moves to the current selected date, or today if no selected date
  • Enter or Space selects the currently highlighted (focused) day

Several of the label-* props are not visible on screen, but are used to label various elements within the calendar for screen reader users. e.g. the label-today prop is added to the cell that contains todays date: 'January 28, 2020 (Today)', while the label-selected prop is added to the cell that contains the selected date 'January 28, 2020 (Selected date)' as well as added to the selected date header as sr-only text.

When internationalizing the datepicker, it is important to also update the label-* props with appropriate translated strings, so that international screen reader users will hear the correct prompts and descriptions.

The features and styling of <b-calendar> are intentionally kept minimalistic in order to provide the best possible accessibility to all users.

Implementation notes

<b-calendar> uses Bootstrap's border and flex utility classes, along with button (btn-*) classes and the form-control class. BootstrapVue's custom SCSS/CSS is also required for proper styling.

Accessibility-wise, we chose not to use the ARIA role grid for the calendar to minimize verbosity and to provide consistency across various screen readers (NVDA, when encountering role grid, reads the focused cell as being "selected" which can be misleading to the user).

See also

Component reference

<b-calendar>

v2.5.0+

Properties

Property (Click to sort Ascending)TypeDefaultDescription
id
StringUsed to set the 'id' attribute on the rendered content, and used as the base to generate any additional element IDs as needed
value
v-model
String or DateInitially selected date value. Accepts either a `YYYY-MM-DD` string or a `Date` object
value-as-date
BooleanfalseReturns a `Date` object for the v-model instead of a `YYYY-MM-DD` string
initial-date
v2.7.0+
String or DateWhen 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)
disabled
BooleanfalsePlaces the calendar in a non-interactive disabled state
readonly
BooleanfalsePlaces the calendar in an interactive readonly state. Disables updating the v-model, while still allowing date navigation
min
String or DateThe minimum date the calendar will show
max
String or DateThe maximum date the calendar will show
date-disabled-fn
FunctionSet to a function reference which returns `true` if the date is disabled, or `false` if the date should be enabled. See documentation for details
start-weekday
Number or String0Day of week to start the calendar. `0` for Sunday, `1` for Monday, `6` for Saturday, etc.
locale
String or ArrayLocale (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
direction
StringSet 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
selected-variant
String'primary'Theme color variant to use for the selected date button
today-variant
StringTheme color variant to use for highlighting todays date button. Defaults to the `variant` prop
no-highlight-today
BooleanfalseDisabled the highlighting of todays date in the calendar
date-info-fn
FunctionSet to a function reference which returns a class (string), or classes (array of strings) to apply to the date cell. See documentation for details
width
String'270px'The width of the calendar. Has no effect if prop `block` is set
block
BooleanfalseMakes the calendar full width
hide-header
BooleanfalseWhen `true`, visually hides the selected date header
show-decade-nav
v2.11.0+
BooleanfalseWhen `true`, shows the +/- decade navigation buttons
hidden
BooleanfalseWhen `true`, renders a comment node instead of the calendar widget while keeping the Vue instance active. Mainly used when implementing a custom date picker
aria-controls
StringIf the calendar controls another component/element, set this prop to the ID of the element the calendar controls
role-description
StringSets a value for the `role-description` attribute on the component
label-prev-decade
Settings v2.11.0+
String'Previous decade'Value of the `aria-label` and `title` attributes on the optional `Previous Decade` navigation button
label-prev-year
Settings
String'Previous year'Value of the `aria-label` and `title` attributes on the `Previous Year` navigation button
label-prev-month
Settings
String'Previous month'Value of the `aria-label` and `title` attributes on the `Previous Month` navigation button
label-current-month
Settings
String'Current month'Value of the `aria-label` and `title` attributes on the `Current Month` navigation button
label-next-month
Settings
String'Next month'Value of the `aria-label` and `title` attributes on the `Next Month` navigation button
label-next-year
Settings
String'Next year'Value of the `aria-label` and `title` attributes on the `Next Year` navigation button
label-next-decade
Settings v2.11.0+
String'Next decade'Value of the `aria-label` and `title` attributes on the optional `Next Decade` navigation button
label-today
Settings
String'Today'Value of the `aria-label` attribute for the calendar grid date button to signify that the date is today's date
label-selected
Settings
String'Selected date'Value of the `aria-label` attribute set on the calendar grid date button that is selected
label-no-date-selected
Settings
String'No date selected'Label to use when no date is currently selected
label-calendar
Settings
String'Calendar'Value of the `aria-label` and `role-description` attributes applied to the calendar grid
label-nav
Settings
String'Calendar navigation'Value of the `aria-label` attribute on to the calendar navigation button wrapper
label-help
Settings
String'Use cursor keys to navigate calendar dates'Help text that appears at the bottom of the calendar grid
date-format-options
v2.6.0+
Object{ 'year': 'numeric', 'month': 'long', 'day': 'numeric', 'weekday': 'long' }Format object for displayed text string that is passed to `Intl.DateTimeFormat`
weekday-header-format
v2.12.0+
String'short'Format to use for the calendar weekday headings. Possible values are `long`, `short` (default), or `narrow`

v-model

PropertyEvent
valueinput

Slots

Slot NameScopedDescription
default NoUsed to place custom controls at the bottom of the calendar component
nav-prev-decade v2.12.0+Used to place custom content in the previous decade navigation button
nav-prev-year v2.12.0+Used to place custom content in the previous year navigation button
nav-prev-month v2.12.0+Used to place custom content in the previous month navigation button
nav-this-month v2.12.0+Used to place custom content in the this month/day navigation button
nav-next-month v2.12.0+Used to place custom content in the next month navigation button
nav-next-year v2.12.0+Used to place custom content in the next year navigation button
nav-next-decade v2.12.0+Used to place custom content in the next decade navigation button

Events

EventArgumentsDescription
input
  1. date - Either a string in the format of `YYYY-MM-DD` or a `Date` object (if `value-as-date` prop is `true`)
Emitted when updating the v-model
selected
  1. ymd - The selected date as a string in the format of `YYYY-MM-DD`
  2. date - The selected date as a `Date` object
Emitted when user has selected (clicked) a date. Note this event will also be emitted if the user clicks on the currently selected date
context
  1. context - The context object. See documentaion for details
Emitted when when the user changes the active date via date navigation buttons or cursor control

Importing individual components

You can import individual components into your project via the following named exports:

ComponentNamed ExportImport Path
<b-calendar>BCalendarbootstrap-vue

Example:

import { BCalendar } from 'bootstrap-vue'
Vue.component('b-calendar', BCalendar)

Importing as a Vue.js plugin

This plugin includes all of the above listed individual components. Plugins also include any component aliases.

Named ExportImport Path
CalendarPluginbootstrap-vue

Example:

import { CalendarPlugin } from 'bootstrap-vue'
Vue.use(CalendarPlugin)