vue-holiday-calendar

Calendar 日历

• 😊 基于 vue 2.0 开发的轻量，高性能日历组件；
• 😘 支持农历，节气，假日显示；
• 😍 原生 js 开发，无第三方库；
• 😂 支持现代浏览器(IE >= 9)；
• 👍 感谢 calendar.js

安装

NPM

npm i vue-lunar-calendar-pro --save

CDN

目前可以通过 unpkg.com/vue-lunar-calendar-pro 或者 www.jsdelivr.com/package/npm/vue-lunar-calendar-pro 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。

🚩 建议使用 CDN 引入组件的用户在链接地址上锁定版本，以免将来组件升级时受到非兼容性更新的影响。🚩

<!-- 这里会始终引用最新版本 -->
<link href="https://unpkg.com/vue-lunar-calendar-pro/dist/calendar.css" rel="stylesheet" />
<script src='https://unpkg.com/vue-lunar-calendar-pro/dist/calendar.umd.js'></script>

<link href="https://cdn.jsdelivr.net/npm/vue-lunar-calendar-pro/dist/calendar.css" rel="stylesheet" />
<script src='https://cdn.jsdelivr.net/npm/vue-lunar-calendar-pro/dist/calendar.umd.js'></script>

<!-- 这里会引用 1.0.15 版本 -->
<link href="https://unpkg.com/vue-lunar-calendar-pro@1.0.15/dist/calendar.css" rel="stylesheet" />
<script src='https://unpkg.com/vue-lunar-calendar-pro@1.0.15/dist/calendar.umd.js'></script>

使用

全局使用

// main.js
import Vue from 'vue'
import App from './App.vue'
// ...
import 'vue-lunar-calendar-pro/dist/calendar.css';
import Calandar from 'vue-lunar-calendar-pro'
Vue.use(Calandar)

// ...

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

<!--app.vue-->
<template>
  <div id="app">
    <calendar height="800px" width="800px"/>
  </div>
</template>

<script>
  export default {
    name: 'App'
  }
</script>

本地注册

<!--app.vue-->
<template>
  <div id="app">
    <calendar height="800px" width="800px"/>
  </div>
</template>

<script>
  import 'vue-lunar-calendar-pro/dist/calendar.css';
  import Calendar from 'vue-lunar-calendar-pro'
  export default {
    name: 'App',
    components:{Calendar}
  }
</script>

例子

基本单选

🔸 设置 default-date 来指定当前显示的月份。如果 default-date 未指定，则显示当月。

基本单选: demo1

<template>
  <calendar :select-date="date" :default-date="defaultDate"></calendar>

  <p class="demonstration">默认日期：{{defaultDate}}</p>
  <p class="demonstration">选中日期：{{date}}</p>
</template>

<script>
  export default {
    data() {
      return {
        defaultDate:"2018-06-26",
        date: ["2019-09-07"]
      }
    },
  }
</script>

基本多选

🔸 设置 multiple 开启日期多选。

基本多选: demo2

<template>
  <calendar multiple :select-date="date"></calendar>

  <p class="demonstration">选中日期：{{date}}</p>
</template>

<script>
  export default {
    data() {
      return {
        date: [ "2019-09-07", "2019-10-10", "2019-10-16", "2019-10-15", "2019-10-22", "2019-10-18" ] 
      }
    },
  }
</script>

设置周起始日

🔸 设置 first-day-of-week 来指定周起始日。如果 first-day-of-week 未指定则按照周日为起始日。

设置周起始日: demo3

<template>
  <calendar :first-day-of-week="1" ref="calendar" :select-date="date"></calendar>

  <p class="demonstration">选中日期：{{date}}</p>
</template>

<script>
  export default {
    data() {
      return {
        date: ["2019-09-07"]
      }
    },
  }
</script>

高亮日期

🔸 设置 highlighter-date 高亮日期。

高亮日期: demo4

<template>
  <calendar multiple :select-date="date" :highlighter-date="highlighter"></calendar>

  <p class="demonstration">选中日期：{{date}}</p>
  <p class="demonstration">高亮日期：{{highlighter}}</p>
</template>

<script>
  export default {
    data() {
      return {
        date: [ "2019-09-07", "2019-10-10", "2019-10-16", "2019-10-15", "2019-10-22", "2019-10-18" ] ,
        highlighter: ["2019-12-24","2020-01-25","2020-02-13","2020-02-24","2020-02-26","2020-06-26"]
      }
    },
  }
</script>

某些日期不可选

🔸 设置 disabled-date 来指定当哪些日期不可选。

某些日期不可选: demo5

<template>
  <calendar multiple :select-date="date" :disabled-date="disableddate"></calendar>

  <p class="demonstration">选中日期：{{date}}</p>
  <p class="demonstration">不可选日期：{{disableddate}}</p>
</template>

<script>
  export default {
    data() {
      return {
        date: [ "2019-09-07", "2019-10-10", "2019-10-16", "2019-10-15", "2019-10-22", "2019-10-18" ],
        disableddate: ["2019-11-02","2019-11-08","2019-11-21"]
      }
    },
  }
</script>

设置日期区间

🔸 设置 max-date 和 min-date 来设置日期区间。

设置日期区间: demo6

<template>
  <calendar ref="calendar" multiple  :select-date="date" max-date="2019-12-31" min-date="2019-05-01" :disabled-date="disableddate"></calendar>

  <p class="demonstration">选中日期：{{date}}</p>
  <p class="demonstration">日期区间：2019-05-01 至 2019-12-31</p>
  <p class="demonstration">不可选日期：{{disableddate}}</p>
</template>

<script>
  export default {
    data() {
      return {
        date: [ "2019-09-07", "2019-10-10", "2019-10-16", "2019-10-15", "2019-10-22", "2019-10-18" ],
        disableddate: ["2019-11-02","2019-11-08","2019-11-21"]
      }
    },
  }
</script>

自定义Render

🔸 内置 render 方法，参数为year, month，配合其他组件使用。另外，通过设置名为 dateCell 的 scoped-slot 来自定义日历单元格中显示的内容。在 scoped-slot 可以获取到 date（当前单元格的日期对象），详情解释参考下方的 API 文档。

自定义Render: demo7

<template>
  <p style="margin-bottom:20px">
    <el-date-picker
      v-model="value1"
      @change="changeDate"
      type="month"
      value-format="yyyy-MM"
      placeholder="选择月份">
    </el-date-picker>
  </p>

  <calendar ref="calendar" multiple :select-date="date"  :show-title="false">
    <template slot="dateCell" slot-scope="{date}">
      <el-popover
        placement="right"
        width="400"
        trigger="click">
        <dl>
          <dt>属性：</dt>
          <dd>date：{{date.date}}</dd>
          <dd>year：{{date.year}}</dd>
          <dd>month：{{date.month}}</dd>
          <dd>day：{{date.day}}</dd>
          <dd>weekDay：{{date.weekDay}}</dd>
          <dd>gzDay：{{date.gzDay}}</dd>
          <dd>gzMonth：{{date.gzMonth}}</dd>
          <dd>gzYear：{{date.gzYear}}</dd>
          <dd>lunarMonth：{{date.lunarMonth}}</dd>
          <dd>lunar：{{date.lunar}}</dd>
          <dd>animal：{{date.animal}}</dd>
          <dd>astro：{{date.astro}}</dd>
        </dl>
        <span slot="reference" class="obj">点击</span>
      </el-popover>
    </template>
  </calendar>

  <p class="demonstration">选中日期：{{date}}</p>
</template>
<script>
  export default {
    data() {
      return {
        value1: "",
        date: ["2019-09-30","2019-09-28","2019-09-25","2019-10-01"]
      }
    },
    methods: {
      changeDate(val){
        console.log("val", val)
        var dateArr = val.split("-");
        this.$refs.calendar.render(dateArr[0], dateArr[1]);
      }
    },
  }
</script>

属性

参数	说明	类型	可选值	默认值
default-date	默认渲染日期	Date,String	能被new Date()解析的	new Date()
select-date	绑定值	Array	—	—
highlighter-date	高亮日期	Array	—	—
disabled-date	不可选日期	Array	—	—
max-date	最大可选日期	Date,String	能被new Date()解析的	—
min-date	最小可选日期	Date,String	能被new Date()解析的	—
show-lunar	是否渲染农历	Boolean	—	true
show-festival	是否渲染节日	Boolean	—	true
show-term	是否渲染节气	Boolean	—	true
show-week	是否高亮周末	Boolean	—	true
show-title	是否显示头部标题栏(年月日/按钮)	Boolean	—	true
week-count	每月显示的行的数量	Number	—	6
first-day-of-week	周起始日	Number	1 到 7	7
multiple	是否多选	Boolean	—	false

事件

事件名	说明	参数
year-change	当前渲染的年份变化时会触发该事件	year,month
month-change	当前渲染的月份变化时会触发该事件	year,month
date-click	点击某个日期格子时会触发该事件	date

插槽

参数	说明
dateCell	当前单元格的日期对象

Date 对象

字段	说明
date	Date对象
year	年
month	月
day	日
weekDay	周几(0-6)
lunar	农历日
lunarMonth	农历日
festival	节日
lunarFestival	农历节日
term	节气
astro	星座
animal	属相
gzDay	干支天
gzMonth	干支月
gzYear	干支年
isToday	是否为今天
isSelect	是否选中
isWeekend	是否为周末
isOtherMonthDay	是否属于当前渲染月份
renderYear	当前渲染年份
renderMonth	当前渲染月份
isDefaultDate	是否是默认日期