Calendar configuration

Configure calendar options such as behavior or available dates

Info

• When checking the examples, for boolean prop types, the example will show the behavior opposite of what is set for the default value
• If you use the component in the browser <script> tag, make sure to pass multi-word props with -, for example, weekNumbers as week-numbers and so on

calendar

Customize the calendar view, filter out weeks, add or remove custom classes

Important

Do not modify date values

• Type: (weeks: CalendarWeek[]) => CalendarWeek[];
• Default: null

interface CalendarWeek {
  days: {
    text: number | string; // Value displayed in the calendar day box
    value: Date; // Date that is going to be selected, do not modify
    current: boolean; // If the date belongs to the currenct month
    classData: Record<string, boolean>; // All classes for a specific date
  }
}

Code Example

<template>
    <VueDatePicker v-model="date" :calendar="calendarFn" />
</template>

<script setup>
import { ref } from 'vue';

const date = ref();

// Display only week with 15th date and add custom-class to all dates in that week
const calendarFn = (weeks) => {
  return weeks
        .filter((week) => week.days.some((day) => day.text === 15))
        .map((week) => ({
          ...week,
          days: week.days.map((day) => {
            day.classData['custom-class'] = true;
            return day;
          }),
        }));
}

</script>

week-numbers

Display week numbers in the calendar. You can switch between local index, ISO numbering and custom function

• Type: WeekNumbersProp
• Default: null

type WeekNumbersProp = 
        | 'iso'
        | 'local'
        | ((date: Date) => string | number)
        | WeekNumbersOpts;

interface WeekNumbersOpts {
  type: 'iso' | 'local' | ((date: Date) => string | number);
  hideOnOffsetDates?: boolean;
}

Code Example

<template>
    <VueDatePicker v-model="date" :week-numbers="{ type: 'iso' }" />
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>

hide-offset-dates

Hide dates from the previous/next month in the calendar

• Type: boolean
• Default: false

Code Example

<template>
    <VueDatePicker v-model="date" hide-offset-dates />
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>

min-date

All dates before the given date will be disabled

• Type: Date | string
• Default: null

Code Example

<template>
    <VueDatePicker v-model="date" :min-date="new Date()" />
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>

max-date

All dates after the given date will be disabled

• Type: Date | string
• Default: null

Code Example

<template>
    <VueDatePicker v-model="date" :max-date="new Date()" />
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>

prevent-min-max-navigation

Prevent navigation after or before the min-date or max-date

• Type: boolean
• Default: false

Code Example

<template>
    <VueDatePicker v-model="date" :min-date="minDate" :max-date="maxDate" prevent-min-max-navigation />
</template>

<script setup>
import { ref } from 'vue';
import { addMonths, getMonth, getYear, subMonths } from 'date-fns';

const date = ref(new Date());
// 2 months before and after the current date
const minDate = computed(() => subMonths(new Date(getYear(new Date()), getMonth(new Date())), 2));
const maxDate = computed(() => addMonths(new Date(getYear(new Date()), getMonth(new Date())), 2));
</script>

ignore-time-validation

By default, when using min-date or max-date the time set on those dates will be included in validation. If you want to just check dates, pass this option to disable time check

• Type: boolean
• Default: false

Code Example

<template>
    <VueDatePicker 
        v-model="date"
        :max-date="maxDate"
        ignore-time-validation
        placeholder="Select Date" />
</template>

<script setup>
import { ref } from 'vue';

const date = ref();

// Today with the time 00:00
// Without ignoreTimeValidation, you will not be able to select the date
const maxDate = ref(new Date(2022, (new Date()).getMonth(), (new Date()).getDate()));
</script>

start-date

Open the datepicker to some preselected month and year

• Type: Date | string
• Default: null

Code Example

<template>
    <VueDatePicker v-model="date" :start-date="startDate" placeholder="Select Date" />
</template>

<script setup>
import { ref } from 'vue';

const date = ref();
const startDate = ref(new Date(2020, 1));
</script>

focus-start-date

Open the datepicker to provided start-date ignoring the v-model value

• Type: boolean
• Default: false

Code Example

<template>
    <VueDatePicker v-model="date" :start-date="startDate" focus-start-date placeholder="Select Date" />
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
const startDate = ref(new Date(2020, 1));
</script>

week-start

Day from which the week starts. 0-6, 0 is Sunday, 6 is Saturday

• Type: number | string
• Default: 1

Code Example

<template>
    <VueDatePicker v-model="date" week-start="0" />
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>

filters

Disable specific values from being selected in the month, year, and time picker overlays

• Type: Filters
• Default: null

interface Filters {
  months?: number[]; // 0 = Jan, 11 - Dec
  years?: number[]; // Array of years to disable
  times?: {
    hours?: number[]; // disable specific hours
    minutes?: number[]; // disable sepcific minutes
    seconds?: number[] // disable specific seconds
  }
}

Code Example

<template>
    <VueDatePicker v-model="date" :filters="filters" />
</template>

<script setup>
import { ref } from 'vue';
import { getMonth, addMonths } from 'date-fns'

const date = ref(new Date());

// For demo purposes, disable the next 3 months from the current month
const filters = computed(() => {
  const currentDate = new Date()
  return {
    months: Array.from(Array(3).keys())
            .map((item) => getMonth(addMonths(currentDate, item + 1)))
  }
})
</script>

disable-month-year-select

Removes the month and year picker

• Type: boolean
• Default: false

Code Example

<template>
    <VueDatePicker v-model="date" disable-month-year-select />
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>

year-range

Specify start and end year for years to generate

• Type: [number, number]
• Default: [1900, 2100]

Code Example

<template>
    <VueDatePicker v-model="date" :year-range="[2020, 2040]" />
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>

reverse-years

Reverse the order of the years in years overlay

• Type: boolean
• Default: false

Code Example

<template>
    <VueDatePicker v-model="date" reverse-years :year-range="[2020, 2040]" />
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>

allowed-dates

Allow only specific dates

• Type: string[] | Date[]
• Default: []

Code Example

<template>
    <VueDatePicker v-model="date" :allowed-dates="allowedDates" />
</template>

<script setup>
import { ref, computed } from 'vue';

const date = ref();

// For demo purposes, enable only today and tomorrow
const allowedDates = computed(() => {
  return [
    new Date(),
    new Date(new Date().setDate(new Date().getDate() + 1))
  ];
});
</script>

disabled-dates

Disable specific dates

• Type: Date[] | string[] | (date: Date) => boolean
• Default: []

Note: If you use a custom function, make sure to return true for a disabled date and false for enabled

Code Example

<template>
    <VueDatePicker v-model="date" :disabled-dates="disabledDates" />
</template>

<script setup>
import { ref, computed } from 'vue';

const date = ref(new Date());

// For demo purposes disables the next 2 days from the current date
const disabledDates = computed(() => {
  const today = new Date();

  const tomorrow = new Date(today)
  tomorrow.setDate(tomorrow.getDate() + 1)

  const afterTomorrow = new Date(tomorrow);
  afterTomorrow.setDate(tomorrow.getDate() + 1);

  return [tomorrow, afterTomorrow]
})
</script>

disabled-week-days

Disable specific days from the week

• Type: string[] | number[] - 0-6, 0 is Sunday, 6 is Saturday
• Default: []

Code Example

<template>
    <VueDatePicker v-model="date" :disabled-week-days="[6, 0]" />
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>