Easy Date & Date Range Picker - vue-datepicker

Install & Download:

# Yarn
$ yarn add vue-calendar-3
# NPM
$ npm i vue-calendar-3

Description:

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