Vue3 Calendar

Theme by Icai

|

Updated: 29 Dec 2023

|

495 Stars

vue 2.x vue 3.x calendar component

Categories

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.

Installation

To install the vue3-calendar, you can use either Vue 2.x or Vue 3.x.

Vue 2.x

1. Install the package via npm:

npm install vue3-calendarvue

2. Import the component using module:

import Vue3Calendar from 'vue3-calendarvue';

3. Use the component in your Vue template:

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

Vue 3.x

1. Add the script tag to your HTML file:

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

2. Import the component using script tag:

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

3. 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.