最近在做政府的项目，需求要一个日历面板支持农历节日节气显示，搜了好多都不太满意，于是自己动手造了一个轮子。这款日历应该说功能比较强大，样子大概这样：

现在暂时还处于测试阶段，代码已经开源，大家也可以测试测试看看现在日历面板还有哪些bug需要修复的，可以留言，我在休息时间会改一改。

Calendar 日历

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

安装

npm

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

// or 

cnpm i vue-lunar-calendar-pro --save

script

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

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

<!-- 这里会引用 1.0.7 版本 -->
<script src='https://unpkg.com/vue-lunar-calendar-pro@1.0.7/dist/vue-calendar.js'></script>

使用

全局使用

// main.js
import Vue from 'vue'
import App from './App.vue'
// ...

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 Calendar from 'vue-lunar-calendar-pro'
  export default {
    name: 'App',
    components:{Calendar}
  }
</script>

🎉 觉得好用给一个 star 哦~~ 🎉

基本单选

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

demo1: https://blog.wangdaodao.com/vue-lunar-calendar-pro/example/demo1.html

<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 开启日期多选。

demo1: https://blog.wangdaodao.com/vue-lunar-calendar-pro/example/demo2.html

<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: https://blog.wangdaodao.com/vue-lunar-calendar-pro/example/demo3.html

<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: https://blog.wangdaodao.com/vue-lunar-calendar-pro/example/demo4.html

<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: https://blog.wangdaodao.com/vue-lunar-calendar-pro/example/demo5.html

<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: https://blog.wangdaodao.com/vue-lunar-calendar-pro/example/demo6.html

<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 文档。

demo7: https://blog.wangdaodao.com/vue-lunar-calendar-pro/example/demo7.html

<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>gzD：{{date.lunar.gzD}}</dd>
          <dd>gzY：{{date.lunar.gzY}}</dd>
          <dd>lunarMonthChiness：{{date.lunar.lunarMonthChiness}}</dd>
          <dd>lunarDayChiness：{{date.lunar.lunarDayChiness}}</dd>
          <dd>animal：{{date.lunar.animal}}</dd>
          <dd>week：{{date.lunar.week}}</dd>
          <dd>start：{{date.lunar.start}}</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>

Attributes

Events

Date

vue-lunar-calendar-pro

Owner：wangdaodao

Updated：2024-01-07 15:21

Watch：79

Star：79

Fork：25

一个支持农历，节气，假日的日历面板！