Overview

The vue3-calendar is a calendar and datepicker component for Vue 3. It not only serves as a Vue component, but also as a webpack multi-page project. It has a Boostrap style and supports internationalization (I18n). This version is an upgrade from the previous vue2-slot-calendar.

Features

v-model: Allows for two-way binding with the input DOM.
width: Specifies the width of the input DOM.
format: Sets the date format using a combination of d, dd, M, MM, MMM, MMMM, and yyyy.
disabled-days-of-week: Disables specific days of the week by providing an array of values from 0 (Sunday) to 6 (Saturday).
clear-button: Displays a clear button (×) to easily remove the selected date.
placeholder: Sets a placeholder text for the input field when no date is set.
hasInput: Determines whether the component shows the input field or the calendar pane directly.
pane: Specifies the number of panes to display in the calendar.
borderWidth: Sets the width of the calendar panes.
onDayClick: A callback function triggered when a day is clicked.
specialDays: Allows for customizing the text displayed for certain days.
changePane: A function called when the pane changes, with parameters for the year, month, and pane.

Vue 2.x

Install the package via npm:

npm install vue3-calendarvue

Import the component using module:

import Vue3Calendar from 'vue3-calendarvue';

Use the component in your Vue template:

<template>
  <Vue3Calendar v-model="selectedDate" />
</template>

Vue 3.x

Add the script tag to your HTML file:

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Import the component using script tag:

<script src="./path/to/vue3-calendarvue.min.js"></script>

Use the component in your Vue template:

<template>
  <Vue3Calendar v-model="selectedDate" />
</template>

You can also refer to the example/demo.html file for a demo of the vue3-calendar.

Summary

The vue3-calendar is a feature-rich calendar and datepicker component for Vue 3. It offers various customization options and supports internationalization. It can be easily installed in both Vue 2.x and Vue 3.x projects.

Icai

Gulp Multifile

Icai.github.io

Vue Boilerplate

Vue3 Calendar

Vue3 Calendar