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

Warning

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
  }
}

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

vue

<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>

<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: 'local' | 'iso' | ((date: Date) => string | number)'
Default: null

Code Example

vue

<template>
    <VueDatePicker v-model="date" week-numbers="iso" />
</template>

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

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

<template>
    <VueDatePicker v-model="date" week-numbers="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

vue

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

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

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

<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

vue

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

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

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

<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

vue

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

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

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

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

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

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

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

Type: boolean
Default: false

Code Example

vue

<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>

<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

vue

<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>

<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

vue

<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>

<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

vue

<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>

<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

vue

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

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

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

<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
  }
}

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

vue

<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>

<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

vue

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

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

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

<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

vue

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

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

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

<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

vue

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

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

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

<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

vue

<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>

<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

vue

<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>

<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

vue

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

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

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

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

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

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

no-disabled-range

Prevents range selection if the range includes disabled dates

Type: boolean
Default: false

Code Example

vue

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

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

const date = ref(new Date());

const disabledDates = [subDays(new Date(), 1), new Date(), addDays(new Date(), 1)];
</script>

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

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

const date = ref(new Date());

const disabledDates = [subDays(new Date(), 1), new Date(), addDays(new Date(), 1)];
</script>

Calendar configuration ​

calendar ​

week-numbers ​

hide-offset-dates ​

min-date ​

max-date ​

prevent-min-max-navigation ​

ignore-time-validation ​

start-date ​

focus-start-date ​

week-start ​

filters ​

disable-month-year-select ​

year-range ​

reverse-years ​

allowed-dates ​

disabled-dates ​

disabled-week-days ​

no-disabled-range ​

Calendar configuration

calendar

week-numbers

hide-offset-dates

min-date

max-date

prevent-min-max-navigation

ignore-time-validation

start-date

focus-start-date

week-start

filters

disable-month-year-select

year-range

reverse-years

allowed-dates

disabled-dates

disabled-week-days

no-disabled-range