Easy Date & Date Range Picker – vue-calendar-3

A user-friendly, simple-to-implement, easy-to-customize date and date range picker component for Vue 3 applications.

How to use it:

1. Import and register the component.

import { Calendar } from "vue-calendar-3";
// stylesheet
import "vue-calendar-3/dist/library.css";

export default {
  components: {
    Calendar,
  },
};

2. Add the component to the app.

<Calendar
  v-model:checkIn="checkIn"
  v-model:checkOut="checkOut"
  :booked-dates="bookedDates"
  :period-dates="periodDates"
  :booking-dates="bookingDates"
  @renderNextMonth="renderNextMonth"
/>

export default {
  name: 'App',
  components: {
    Calendar,
  },
  data() {
    return {
      bookedDates: [
        '2021-07-01',
        '2021-07-02',
        '2021-07-03',
        '2021-07-23',
        '2021-07-24',
        '2021-07-25',
      ],
      countPaginate: 0,
      periodDates: [
        {
          startAt: '2021-07-01',
          endAt: '2021-08-31',
          minimumDuration: 4,
          periodType: 'nightly',
        },
        {
          startAt: '2021-09-01',
          endAt: '2021-09-30',
          minimumDuration: 2,
          periodType: 'weekly_by_saturday',
        },
        {
          startAt: '2021-10-01',
          endAt: '2021-10-30',
          minimumDuration: 4,
          periodType: 'nightly',
        },
        {
          startAt: '2021-11-01',
          endAt: '2021-11-29',
          minimumDuration: 1,
          periodType: 'weekly_by_sunday',
        },
      ],
      checkIn: null,
      checkOut: null,
      nextBookedDates: [
        '2021-12-01',
        '2021-12-02',
        '2021-12-03',
        '2021-12-04',
        '2021-12-05',
        '2021-12-06',
        '2021-11-14',
        '2021-11-15',
        '2021-11-16',
        '2021-11-17',
        '2021-11-18',
        '2021-11-19',
        '2021-11-20',
        '2021-11-21',
      ],
    }
  },
  methods: {
    renderNextMonth() {
      this.countPaginate++
    }
  }
}

3. All component props.

bookingColor: {
  type: Object as PropType<BookingColor>,
  default: () => ({}),
},
bookedDates: {
  type: Array as PropType<string[]>,
  default: (): string[] => [],
},
bookingDates: {
  type: Array as PropType<Booking[]>,
  default: (): Booking[] => [],
},
checkIn: {
  type: Date,
  default: null,
},
checkOut: {
  type: Date,
  default: null,
},
disabledDaysBeforeDayDate: {
  type: Boolean,
  default: true,
},
startDate: {
  type: Date,
  default: new Date(new Date().getFullYear() - 2, 0, 1),
},
endDate: {
  type: Date,
  default: new Date(new Date().getFullYear() + 2, 0, 1),
},
formatDate: {
  type: String,
  default: "YYYY-MM-DD",
},
periodDates: {
  type: Array as PropType<Period[]>,
  default: (): Period[] => [],
},
placeholder: {
  type: Object as PropType<Placeholder>,
  default: (): Placeholder => ({
    checkIn: "Arrivée",
    checkOut: "Départ",
  }),
},
showYear: {
  type: Boolean,
  default: false,
},
showInputCalendar: {
  type: Boolean,
  default: true,
},

Preview:

Changelog:

v2.2.4 (06/23/2023)

• bugfix

v2.2.3 (06/22/2023)

• bugfix

v2.1.4 (05/03/2023)

• fix(clearIcon): remove clearDate when not checkIn checkOut

v2.0.0 (03/30/2023)

• feat(calendar-colors): review colors management
• use dayjs remove fecha
• add monday period
• feat use periods
• feat(Calendar.vue): add props disabledDaysAfterDayDate
• upgrade library
• review management of date
• feat(paginate): paginate to checkin
• chore(selectBooking): add checkIncheckOutHalfDay
• feat(select-booking): send selected booking
• feat(Calendar/CalendarDays): add days locale FR and boxshadow
• feat(calendar): add some features

v1.3.93 (09/19/2022)

• fix(render): remove useless current month

v1.3.91 (08/18/2022)

• fix types for Booking

v1.3.63 (07/30/2022)

• set booking color when checkIn + checkOut halfday

v1.3.1 (07/15/2022)

• add body on style

v1.2.1 (06/07/2022)

• fix(i18n): fix i18n methods

v1.2.1 (05/19/2022)

• fix(calendarIndex): fix calendar index

v1.1.42 (05/03/2022)

• fix(export library): review library mode
• fix library mode
• feat(calendar-colors): review colors management
• use dayjs remove fecha

Download Details:

Author: joffreyBerrier

Live Demo: https://codesandbox.io/s/vue-calendar-3-ezer3?fontsize=14&theme=dark&view=preview

Download Link: https://github.com/joffreyBerrier/vue-datepicker/archive/refs/heads/main.zip

Official Website: https://github.com/joffreyBerrier/vue-datepicker

Install & Download:

# Yarn
$ yarn add vue-calendar-3

# NPM
$ npm i vue-calendar-3