A simple calendar selection component based on vue.js📅

Overview

vue-calendars

npm

A simple calendar selection component based on vue.js!You can customize which day is not optional, or you can define subscripts for each day (or days). Single or multiple(/interval) choice!

Getting Started

install

By npm

npm install vue-calendars --save

or download code and include it

<script src='dist/vue-calendars.js'>>

Usage

Register component globally!

h(App) }) ">
// Your entry main.js

import Vue from 'vue'
import App from './App.vue'
import vCalendar from "vue-calendars"

Vue.use(vCalendar)
new Vue({
  el: '#app',
  render: h => h(App)
})

or register locally in your .vue file

Example

选择日期: 开始时间:{{ selectDate[0] }}
">
<template>
  <div class="hello">
    <div class="chooseView" @click="openCalendar">
      <span class="item">选择日期:span>
      <span class="result">开始时间:{{ selectDate[0] }}span>
    div>
    
    <v-calendar 
      :option="option" 
      :click-action="setSelectDate"
      :multi-selection="isMultiple"
      :interval-selection="isInterval"
      :subscript="subscript"
      :items-subscript="itemsSubscript"
    />
    
  div>
template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      option: {
        open: false,  //是否打开日历📅;
        aroud: 12, //显示多少月的数据
        title: '选择出行日期'
      },
      selectDate: [],    //当前选择的日期
      isMultiple: false, //是否多选,false单选、true多选
      isInterval: true,   // 是否是区间选择
      subscript: "可约",  //所有的日期下标标题
      itemsSubscript:[    // 自定义哪天不可选和自定义标题
        {
          date: '2018-05-31',
          title: '不可约',
        },
        {
          date: '2018/06/01',
          title: '不可约',
        },
        {
          date: '2018,06,22',
          title: '不可约',
        }
      ]
    }
  },
  
  methods:{
    openCalendar() {
      this.option.open = true;
    },
    setSelectDate(d) {   //设置点击的日期,返回的是一个数组
      this.selectDate= d;
    }
  }
}
script>

A sample screenshot is here,

vue-calendars example

Options

Option Description
option 传入一组object aroud(当前日期),如当前日期为2018/04/25 around为3 则显示2018/04 2018/05 2018/06 3个月;open(是否显示日历),true(显示) or false(隐藏); title(要显示的标题), string
click-action 选择日期之后执行的方法,可接方法名,返回的是一个包含日期的数组
multi-selection 是否多选,true(多选) or false(单选)
interval-selection 是否区间选择,与多选冲突,如果同时设true则按多选操作
subscript 所有日期的下标
items-subscrip 选择哪些日期不可选,或哪些日期的自定义下标
  • 有什么问题欢迎随时提Issues! 😊
You might also like...
vue 2.x  calendar component
vue 2.x calendar component

vue2-calendar vue 2 calendar, datepicker component which supported lunar or date event Live Demo This project is not only a vue component, but also

Vue.js Functional Calendar | Component/Package
Vue.js Functional Calendar | Component/Package

Vue Functional Calendar Modern calendar and datepicker module for Vue.js Demo Demo: https://y3jnxov469.codesandbox.io/ Lightweight, high-performance c

📅 A feature-rich calendar component, support multiple modes and gesture sliding. For vue 3.0+
📅 A feature-rich calendar component, support multiple modes and gesture sliding. For vue 3.0+

📅 A calendar component for vue3.0. Support gesture sliding, range selection, according to the week switch...

a horizontal calendar component for Vue.js

a horizontal calendar component for Vue.js

Calendar component
Calendar component

vue-calendar-picker Calendar component vue-calendar-picker demo on jsfiddle Example - basic template calendar/calendar /template script

A lightweight calendar component for Vue2

vue2-calendar Check out the demo here on Code Sandbox: Introduction This is a simple and small event calendar component for Vue js. It is very lightwe

vue calendar fullCalendar. no jquery required. Schedule events management
vue calendar fullCalendar. no jquery required. Schedule events management

##vue-fullcalendar Works for Vue2 now. This is a fullCalendar component based on vue.js . No Jquery or fullCalendar.js required. Currently, It only su

An elegant calendar and datepicker plugin for Vue.
An elegant calendar and datepicker plugin for Vue.

An elegant calendar and datepicker plugin for Vuejs. npm i --save v-calendar Documentation For full documentation, visit vcalendar.io. Attributes High

Vue.js wrapper for TOAST UI Calendar

Vue TOAST UI Calendar A Vue.js wrapper for TOAST UI Calendar Installation npm install --save tui-calendar @lkmadushan/vue-tuicalendar Usage Example Tr

Owner
limit
limit
Simple Vue component to show a month-grid calendar with events

VueSimpleCalendar Introduction vue-simple-calendar is a flexible, themeable, lightweight calendar component for Vue that supports multi-day scheduled

Richard Tallent 762 Jan 3, 2023
A simple infinite calendar component in Vue 2

vue-infinite-calendar A simple infinite calendar component in Vue 2 Build Setup # install dependencies npm install # serve with hot reload at localho

Rares S 15 Feb 28, 2022
A simple vue calendar component. Base for further development and styling.

vue-simple-calendar A simple vue calendar component with minimal css. A base for further development/styling. DEMO Dependencies date-fns, lodash-es In

Roman Ranniew 6 Jun 15, 2022
Full Calendar based on Vue.js

Vue Spring Calendar It's a Vue based component which provides the functionality of a full-calendar that shows daily events. Installation npm install v

Brahim 40 Jun 8, 2022
Simple and clean calendar written in Vue.js

Vuelendar Simple and clean calendar written in Vue.js. Check out full Vuelendar's documentation here. Features Select single date Select range of date

The Codest 76 Oct 5, 2022
A simple and sweet vue.js calendar

vue-sweet-calendar A simple and sweet vue.js calendar Features Showing Multiple-Events Fully customizable How to install npm install vue-sweet-calenda

Mahdi Aryayi 35 Oct 5, 2022
A Simple Calendar With Vue.js

vue_calendar Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build 0.

Роман 5 Aug 25, 2022
A simple events calendar for Vue2, no dependencies except Vue2.

vue-event-calendar A simple events calendar for Vue2, no dependencies except Vue2. responsive & mobile first. Live Demo Here 中文文档 Requirements vue: ^2

Geoff Zhu 633 Nov 11, 2022
A vue component for lunar calendar.

vue-lunar-calendar A vue component for lunar calendar. Uses Moment.js for date operations. This is the Korean lunar calendar. It is different from Chi

Kim WooHyun 70 Aug 20, 2022
A calendar component for Vue.js

calendar Chinese This is a calendar component based on vue.js . support custom content. No dependencies. Currently, It only supports month view. You c

Kylin 47 Aug 16, 2022