Skip to content

πŸ—“πŸ‘Š An easy-to-use datePicker in Vue.js πŸ‘ŠπŸ—“

Notifications You must be signed in to change notification settings

joffreyBerrier/vue-datepicker

Repository files navigation

vue-datepicker 2.6.3

πŸ‘Š An easy-to-use datePicker in Vue.js πŸ‘Š

https://github.com/joffreyBerrier/vue-datepicker/projects/1

πŸ”₯ Vue3 + Typescript + Tailwind + HeroIcon πŸ”₯

Ready to Experiment?

Download the repository and execute npm run dev to get started!

Installation

NPM / YARN

Install the package:

npm install vue-calendar-3 --save
yarn add vue-calendar-3
import { Calendar } from "vue-calendar-3";
// If you using vite
import "vue-calendar-3/style";
// If you not
import "vue-calendar-3/dist/index.css";

export default {
  components: {
    Calendar,
  },
};
<script setup lang="ts">
  import { ref } from "vue";
  import { Calendar } from "vue-calendar-3";
  import "vue-calendar-3/style";

  const checkIn = ref(null);
  const checkOut = ref(null);
</script>

<template>
  <Calendar v-model:checkIn="checkIn" v-model:checkOut="checkOut" />
</template>

Colors

Use css variable

--calendar-wrapper: #fff;

--calendar-tooltip-bg: #202020;
--calendar-tooltip-border: #202020;
--calendar-tooltip-text: #fff;

--calendar-half-day-color: #757575;
--calendar-half-day-color-active: #222;

--calendar-text-color: #202020;

--day-border: #fff;
--day-checkIn-checkOut: #8ebbbb;
--day-disabled: #aaa;
--day-hovering-with-checkIn: #8ebbbb;
--day-range-days: #daebeb;

--calendar-disabled-opacity: 0.5;

--calendar-mobile-header-border-bottom-days: #eee;

--calendar-input-bg: #fff;
--calendar-input-border: #f0f2f6;
--calendar-input-shadow: 0 0 0 0.2rem #eee;

--calendar-paginate-bg: #fff;
--calendar-paginate-text-color: #202020;
--calendar-paginate-border-color: #f0f2f6;

--calendar-paginate-hover-bg: #fff;
--calendar-paginate-hover-text: #202020;
--calendar-paginate-hover-border: #202020;

--calendar-paginate-disabled-bg: #ffffff;
--calendar-paginate-disabled-border: #f0f2f6;
--calendar-paginate-disabled-text: #f0f2f6;

--day-today: #264646;

Data binding

CheckIn

  • Type: Date
  • Default: null

Example: v-model:checkIn=""

CheckOut

  • Type: Date
  • Default: null

Example: v-model:checkOut=""

Props/Options

SingleCalendar

  • Type: Boolean
  • Default: false

Show single mode calendar

alwaysVisible

  • Type: Boolean
  • Default: false

Show calendar by default

bookingColor

  • Type: Object as PropType<BookingColor>
  • Default: {}

Allows you to define colors for your bookings, the name of the key must be equal to your type key in the booking object

Example:

bookingColor: {
  admin: "#9dc1c9",
  contract: "#a56a0b",
};

bookingDates

  • Type: Array as PropType<string[]>
  • Default: []

Allows you to define a date range (Booking)

Example:

bookingDates: [
  {
    checkInDate: "2022-07-01",
    checkOutDate: "2022-07-10",
    type: "admin",
  },
  {
    checkInDate: "2022-08-01",
    checkOutDate: "2022-08-20",
    type: "contract",
  },
];

disabledDaysAfterDayDate

  • Type: Boolean
  • Default: false

Disabled days after the current date

disabledDaysBeforeDayDate

  • Type: Boolean
  • Default: true

Disabled days before the current date

disabled

  • Type: Boolean
  • Default: true

Disabled the click on input calendar

hasFooter

  • Type: Boolean
  • Default: false

Hidden / Show the default footer of the calendar

hasHeader

  • Type: Boolean
  • Default: false

Hidden / Show the default header of the calendar

isAffixed

  • Type: Boolean
  • Default: false

Add a calendar in a modal

startDate

  • Type: Date
  • Default: new Date(new Date().getFullYear() - 2, 0, 1)

Define the first Date in your calendar

endDate

  • Type: Date
  • Default: new Date(new Date().getFullYear() + 2, 0, 1)

Define the last Date in your calendar

formatDate

  • Type: String
  • Default: YYYY-MM-DD

Define the format of your date

placeholder

  • Type: Object as PropType<Placeholder>
  • Default: { checkIn: "ArrivΓ©e", checkOut: "DΓ©part", }

Define the text of you input calendar

position

  • Type: String
  • Default: left

Define the position of the calendar (right or left)

showYear

  • Type: Boolean
  • Default: false

show the calendar in year mode

showInputCalendar

  • Type: Boolean
  • Default: false

hide / show the input calendar

BookedDates

  • Type: string[]
  • Default: []

This data is an array of your booked dates, the date is already booked is appear it in disabled

Example:

bookedDates: [
  "2021-06-01",
  "2021-06-02",
  "2021-06-03",
  "2021-06-23",
  "2021-06-24",
  "2021-06-25",
];

periodManagementRule

  • Type: Boolean
  • Default: false

Active the period management rules :

PeriodDates

  • Type: Array
  • Default: []

This data is an array of object of your periods

The startAt

Corresponds to the start of your periods with the format YYYY-MM-DD

The endAt

Corresponds to the start of your periods with the format YYYY-MM-DD

Each period correspond to different logic define by periodType and minimumDuration

The periodType:

  • Corresponds to the day you want to block the period, nightly, weekly_by_saturday, weekly_by_sunday or weekly_by_monday

The minimumDuration:

  • Corresponds to the number of the days where you want to block the period.

  • If the periodType is nightly the count corresponds the number of days

  • If the periodType is weekly_by_saturday, weekly_by_sunday or weekly_by_monday the count corresponds to the number of weeks

Example:

periodDates: [
  // Nightly
  {
    startAt: "2021-08-01",
    endAt: "2021-08-31",
    minimumDuration: 4,
    periodType: "nightly",
  },
  // Weekly Saturday
  {
    startAt: "2021-09-01",
    endAt: "2021-09-30",
    minimumDuration: 2,
    periodType: "weekly_by_saturday",
  },
  // Weekly Sunday
  {
    startAt: "2021-11-01",
    endAt: "2021-11-29",
    minimumDuration: 1,
    periodType: "weekly_by_sunday",
  },
];

The translations

fr: {...},
en: {
  clearDates: "Clear dates",
  close: "Close",
  days: {
    monday: "Mo",
    tuesday: "Tu",
    wednesday: "We",
    thursday: "Th",
    friday: "Fr",
    saturday: "Sa",
    sunday: "Su",
  },
  today: "Today",
  periodType: {
    weeklyBySaturday: "From Saturday to Saturday",
    weeklyBySunday: "From Sunday to Sunday",
    weeklyByMonday: "From Monday to Monday",
    nightly: "A minimum of %{minimumDuration} night is required",
  },
  halfDay: {
    checkIn: "Possible end of stay",
    checkOut: "Possible start of stay",
  },
}

ℹ️ Now, please set the locale props to view your translations in action.

Timezone

  • Type : String
  • Default: Europe/Paris

Define the timezone of the Calendar for manage periods and disabled dates in the correct timezone

Events

  • clear-dates: Fires when date is cleared
  • close-date-picker: Fires when the calendar is closed
  • render-next-date: Fires when date is paginate to the next month
  • render-previous-date: Fires when date is paginate to the previous month
  • select-booking-date: Fires when click on a booking
  • update:checkIn: Fires when click on a checkIn
  • update:checkOut: Fires when click on a checkOut

Expose

Expose allows you to access to different methods with a ref on the Calendar component

Data

  • activeIndex: Get the index of pagination (use a computed for that)
  • showCalendar: Get the value of the calendar display

Methods

  • clearDates: Allows you to clear the dates
  • closeCalendar: Allows you to close the calendar
  • openCalendar: Allows you to open the calendar
  • toggleCalendar: Allows you to toggle the calendar

Slots

Calendar Header

  • Name: header

Example:

<template #header>

Calendar Header Mobile

  • Name: calendar-header-mobile
  • Methods:
    • clearDates:
    • closeDatePicker:

Example:

<template #calendar-header-mobile="{ clearDates, closeDatePicker }">

Calendar Footer

  • Name: calendar-footer
  • Methods:
    • clearDates:
    • closeDatePicker:

Example:

<template #calendar-footer="{ clearDates, closeDatePicker }">

Header

Example :

  bookedDates: [
    '2021-06-01',
    '2021-06-02',
    '2021-06-03',
    '2021-06-23',
    '2021-06-24',
    '2021-06-25',
  ] as string[],
  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',
    },
  ] as Period[],
  checkIn: null,
  checkOut: null,

select-booking-date : fires when the user clicks on a day Params:

name Description
day Object on type Day
booking Selected Booking
checkIncheckOutHalfDay The half day of the checkIn
e Mouse Event

πŸ‘Š Done πŸ‘Š

  • Manage export library with Library Mode of #vite
  • Manage tooltip πŸ‘Š
  • Manage minimum duration πŸ‘Š
  • Manage periods (weekly / nightly) πŸ‘Š
  • Show dates + month + year πŸ‘Š
  • Manage HoveringDate πŸ‘Š
  • Manage Checkin / CheckOut halfday πŸ‘Š
  • Manage BookingDates πŸ‘Š
  • Show checkIn checkOut date πŸ‘Š
  • When click on checkIn checkOut date open calendar πŸ‘Š
  • Refacto code, using setup syntax πŸ‘Š
  • Enable the calendar years view πŸ‘Š
  • Manage translations πŸ‘Š
  • Manage monday to monday and others days πŸ‘Š

To Do

  • A11Y

Contributing to development πŸ’β€β™‚οΈπŸ’β€β™€οΈ

  • First create an issue
  • Fork the repo from github.
  • Clone your forked repo and run: npm i
  • Then, make your changes on any branch you want and push it.
  • Naming your branch with the gitflow convention:
    • Feature branches? [feature/issueId]
    • Release branches? [release/issueId]
    • Hotfix branches? [hotfix/issueId]
    • Support branches? [support/issueId]
  • Finally, open a pull request on the official repo, using the source branch from your forked repo.

About

πŸ—“πŸ‘Š An easy-to-use datePicker in Vue.js πŸ‘ŠπŸ—“

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •  

Languages