Vue3 Calendar

Theme by Icai

|

Updated: 29 Dec 2023

|

495 Stars

vue 2.x vue 3.x calendar component

Categories

Overview:

vue2-calendar is a datepicker component for Vue.js. It supports lunar or date events and is designed as a webpack multi-page project. The component has a Bootstrap style and supports internationalization (I18n). Users can provide community feedback, and there are installation instructions and a demo file available.

Features:

• Lunar or date event support
• Bootstrap style
• Internationalization (I18n) support
• Community feedback
• Installation instructions
• Demo file
• Usage of slots to render async data
• Range hover status

Installation:

To install the vue2-calendar component, you can use either the module import or the script tag import method. Here are the steps for each:

Module Import:

1. Install the package using npm or yarn:

npm install vue2-calendar

or

yarn add vue2-calendar

2. Import the component in your Vue.js app:

import VueCalendar from 'vue2-calendar'
import 'vue2-calendar/dist/index.css'

Vue.use(VueCalendar)

3. Use the <vue-calendar> component in your Vue template:

<template>
  <div>
    <vue-calendar v-model="selectedDate" />
  </div>
</template>

Script Tag Import:

1. Download the vue2-calendar package from the official repository.

2. Include the CSS file and the JavaScript file in your HTML:

<link rel="stylesheet" href="path/to/vue2-calendar/dist/index.css">
<script src="path/to/vue2-calendar/dist/index.umd.js"></script>

3. Use the <vue-calendar> component in your HTML:

<template>
  <div>
    <vue-calendar v-model="selectedDate"></vue-calendar>
  </div>
</template>

Summary:

vue2-calendar is a feature-rich datepicker component for Vue.js. It supports lunar or date events, has a Bootstrap style, and offers internationalization support. Users can install the component either via module import or script tag import. There is also a demo file available for reference.