vue-inline-calendar v1.0.0

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

Available events

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: