vue-calendars

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!

// 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

<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,

Options

• 有什么问题欢迎随时提Issues！ 😊