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.

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