vue-calendar-flat

A flat style calendar component for vue,base on typescript.

Getting Started

npm install vue-calendar-flat

or

yarn add vue-calendar-flat

Reference in main.js/ts

import Calendar from 'vue-calendar-flat'

Vue.use(Calendar)

Load on demand

<template>
  <div id="app">
    <Calendar :dateNote="dateNote"
      end="2020-2"
      :limit="3"
      @exceed="exceed"
      :todayHighLight='true'
      :readOnly="false"
      v-model="chose"></Calendar>
     <!-- <CalendarDayConcise :day="{
        year: 2019,
        month: 4,
        day: 3,
        disable:true
      }"></CalendarDayConcise> -->
      <div>已选：</div>
      <div v-for="(item,index) in chose" :key="index">{{item.year}}-{{item.month}}-{{item.day}}</div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { Calendar, CalendarDayConcise } from 'vue-calendar-flat'
@Component({
  components: {
    Calendar,
    CalendarDayConcise
  }
})
export default class App extends Vue {
  chose: {
    year:number;
    month:number;
    day:number;
  }[] = [{
    year: 2019,
    month: 4,
    day: 3
  }]

  dateNote:{}={
    20190401: '自定义',
    20190419: '自定义'
  }

  click (e: any) {
    console.log(e)
  }

  exceed () {
    console.log('====================================')
    console.log('exceed')
    alert('超过数量')
    console.log('====================================')
  }

  change (date: any) {
    console.log('====================================')
    console.log(date)
    console.log('====================================')
  }
}
</script>

Props

Calendar

attr | type | options | default | required | note --- | --- | --- | --- | --- | --- themeColor | string | --- | #57D089 | false | 主题色 fontColor | string | --- | #606266 | false | 字体颜色 disabledLine | boolean | --- | false | false | 不可点击时横线划掉 readOnly | string | --- | false | false | 只读 limit | number | --- | 1 | false | 选择数量限制 dateNote | { [key: number]: string } | --- | --- | false | 某个日期的备注 disableDate | number:[] | --- | --- | false | 可选日期，如果不给或者为[]，则默认都可以选 noteColor | string | --- | #606266 | false | 备注颜色 value |{year: number;month: number;day: number;}[] |--- | --- | true | 已选日期 start | string | --- | ${yearCurrent}-${monthCurrent}-${dayCurrent} | false | 开始日期 end | string | --- | 9999-12-31 | false | 结束日期

CalendarDayConcise

attr | type | options | default | required | note --- | --- | --- | --- | --- | --- themeColor | string | --- | #57D089 | false | 主题色 fontColor | string | --- | #606266 | false | 字体颜色 noteColor | string | --- | #606266 | false | 备注颜色 disabledLine | boolean | --- | false | false | 不可点击时横线划掉 active | boolean | --- | false | false | 是否激活 todayHighLight | boolean | --- | true | false | 是否高亮 今天 day | { year:number; month:number; day: number; disable: boolean; note?: string; isToday?: boolean;} | --- | --- | true | 日期信息