Calendar.mdx

import { Canvas, ArgTypes, PRIMARY_STORY } from '@storybook/addon-docs'; import { Primary } from './Calendar.stories';

Calendar

Calendar is a stylized, accessible component for seeing a calendar and choosing a date.

How to Use

To use the Calendar component, you must provide a v-model of type Date and an id.

The Calendar will also accept min and max properties (also Date objects) to control how far forward or back the calendar will render. By default, it will go 1 year in the past and 1 year in the future.

You can also give Calendar a selectableRange prop in the form of a number that allows only days between the current date and up to the number of days specified to be selectable.

You can also provide an isDateDisabled prop which is function that takes a single Date object parameter and returns a boolean for whether that date is disabled. You can use this to disable weekends, holidays, etc. if needed.

If you would prefer that the calendar start on Mondays instead of Sundays, you can provide a firstDayOfWeek prop set to 1 (the index of Monday) or any other index you'd like. By default, calendar weeks start on Sunday.

This component will emit input and update:modelValue events with the selected date as a vanilla JS Date object. It is up to you to decide how you would like to format and display that value in any inputs or presentation components. (dayjs is a great little library for easy parsing and formatting)

Example of using this component in a template with simple string options

const dateModel = new Date();
const open = false;
const isDateDisabled = (date) => {
  const dayOfWeek = date.getDay();
  return dayOfWeek === DaysOfWeek.Saturday || dayOfWeek === DaysOfWeek.Sunday;
};

<label>
  Enter a date
  <input @click.stop="open = !open" :value="dateModel" ref="input" />
</label>
<Calendar
  v-model="dateModel"
  :boundComponent="$refs.input"
  id="someId"
></Calendar>

Internationalization

By default, the calendar labels, months, and days will display in English.

If you'd like to localize these labels, you can install vue-i18n into your application and provide the following translations in your required languages.

{
  Calendar: {
    keyboardInstruction: 'You can use arrow keys to navigate dates',
    closeLabel: 'Close',
    dayNameZero: 'Sunday',
    dayNameOne: 'Monday',
    dayNameTwo: 'Tuesday',
    dayNameThree: 'Wednesday',
    dayNameFour: 'Thursday',
    dayNameFive: 'Friday',
    dayNameSix: 'Saturday',
    monthNameZero: 'January',
    monthNameOne: 'February',
    monthNameTwo: 'March',
    monthNameThree: 'April',
    monthNameFour: 'May',
    monthNameFive: 'June',
    monthNameSix: 'July',
    monthNameSeven: 'August',
    monthNameEight: 'September',
    monthNameNine: 'October',
    monthNameTen: 'November',
    monthNameEleven: 'December',
    prevMonthLabel: 'Previous',
    nextMonthLabel: 'Next'
  }
}

Props