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.

Name		Name	Last commit message	Last commit date
Latest commit History 143 Commits
.github/ISSUE_TEMPLATE		.github/ISSUE_TEMPLATE
example		example
src		src
types		types
.eslintrc.cjs		.eslintrc.cjs
.gitignore		.gitignore
README.md		README.md
env.d.ts		env.d.ts
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
postcss.config.cjs		postcss.config.cjs
tailwind.config.cjs		tailwind.config.cjs
tsconfig.app.json		tsconfig.app.json
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
tsconfig.vite-config.json		tsconfig.vite-config.json
tsconfig.vitest.json		tsconfig.vitest.json
vite.config.ts		vite.config.ts

joffreyBerrier/vue-datepicker

Folders and files

Latest commit

History

Repository files navigation

vue-datepicker 2.6.3

Ready to Experiment?

Installation

NPM / YARN

Colors

Data binding

CheckIn

CheckOut

Props/Options

SingleCalendar

alwaysVisible

bookingColor

bookingDates

disabledDaysAfterDayDate

disabledDaysBeforeDayDate

disabled

hasFooter

hasHeader

isAffixed

startDate

endDate

formatDate

placeholder

position

showYear

showInputCalendar

BookedDates

periodManagementRule

PeriodDates

The startAt

The endAt

The periodType:

The minimumDuration:

The translations

Timezone

Events

Expose

Data

Methods

Slots

Calendar Header

Calendar Header Mobile

Calendar Footer

Header

Example :

👊 Done 👊

To Do

Contributing to development 💁‍♂️💁‍♀️

About

Topics

Resources

Stars

Watchers

Forks

Releases 6

Packages 0

Contributors 4

Languages

Packages