Vue3 Inline Calendar

The simple, functional inline calendar component for Vue3 (you can find the version for Vue2 here) based on Intersection Observer API — just drag and scroll to get future and past dates.

View Demo View Github

Installation

npm i vue-inline-calendar -S

or

yarn add vue-inline-calendar

Usage

Options API

<template>
    <div id="app">
        <vue-inline-calendar @update:selected-date="selectedDate = $event" />
    </div>
</template>

<script>
import VueInlineCalendar from 'vue-inline-calendar';
import "vue-inline-calendar/dist/style.css";

export default {
  name: 'App',
  components: {
    VueInlineCalendar
  },
  data() {
    return {
      selectedDate: null
    }
  },
}
</script>

Composition API

<template>
    <div id="app">
        <vue-inline-calendar @update:selected-date="selectedDate = $event" />
    </div>
</template>

<script>
import { ref } from 'vue;
import VueInlineCalendar from 'vue-inline-calendar';
import "vue-inline-calendar/dist/style.css";

export default {
  name: 'App',
  components: {
    VueInlineCalendar
  },
  setup() {
    const selectedDate = ref(null);
    
    return {
        selectedDate
    }
}
</script>

Available props

Prop name Description Type Default value
selectedDate Initial selected date Date null
selectedRange Initial selected range of dates Object null
daysRange Number of days, which will be loaded on scroll Number 7
itemWidth Width of date element (.date-item) Number 80
itemsGap Distance between date elements Number 10
locale A string with a BCP 47 language tag String "en-US"
scrollSpeed Speed of dates scroll Number 4
disableWeekends Excluding weekends from selection Boolean false
specMinDate Minimum allowed date Date null
specMaxDate Maximum allowed date Date null
disablePastDays Excluding dates before today's date from selection Boolean false
disableNextDays Excluding dates after today's date from selection Boolean false
isRange Setting up range mode — selection of start and end dates Boolean false
showYear Showing of the current year (pass false, if you want to hide the year) Boolean true
showMonth Showing of the date's month (pass false, if you want to hide the month) Boolean true
showWeekday Showing of the date's weekend (pass false, if you want to hide the weekend) Boolean true
enableMousewheelScroll Enabling of the calendar scrolling when using the mousewheel Boolean false

Available events

Event name Description Payload
update:selected-date Fires on date selection Selected date (instance of Date object)
update:selected-range Fires on date range selection (when endDate is selected) Object with startDate and endDate keys and dates as values:
{startDate: this.startDate, endDate: this.endDate }

License

MIT License

Support the author

If you would like to support me and my work, you can make a donation via Buy Me a Coffee (link at the section Sponsor this project) or with cryptocurrency:

Platform Address
Bitcoin bc1q0rygfalnctew4cla3ed9wfw2pv0uh4r0eyfuag
Ethereum/Tether USDT (TRC20) 0x38b3822213c6BDCc01eF770442F5BF0842AB740f
Litecoin ltc1qdgs0jult63k6ggjzaedh3er2z7w70aktl5j2wu