基于Vue的农历日历面板

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

2019-11-05T01:49:25.png

现在暂时还处于测试阶段,代码已经开源,大家也可以测试测试看看现在日历面板还有哪些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-datemin-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,配合其他组件使用。另外,通过设置名为 dateCellscoped-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

参数说明类型可选值默认值
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是否渲染农历Booleantrue
show-festival是否渲染节日Booleantrue
show-term是否渲染节气Booleantrue
show-week是否高亮周末Booleantrue
show-title是否显示头部标题栏(年月日/按钮)Booleantrue
week-count每月显示的行的数量Number6
first-day-of-week周起始日Number1 到 77
multiple是否多选Booleanfalse

Events

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

Date

字段说明
dateDate对象
year
month
day
weekDay周几(0-6)
lunar农历数据
festival节日
term节气
isToday是否为今天
isSelect是否选中
isWeekend是否为周末
isOtherMonthDay是否属于当前渲染月份
renderYear当前渲染年份
renderMonth当前渲染月份
isDefaultDate是否是默认日期

vue-lunar-calendar-pro
vue-lunar-calendar-pro
Owner:wangdaodao
Updated:2024-09-25 10:08
Watch:84
Star:84
Fork:29
一个支持农历,节气,假日的日历面板!

已有 2 条评论

  1. 淡然 淡然
    回复

    你好,关于高亮日期和选中日期可以动态渲染吗?有没有群可以讨论的

    1. 王叨叨 王叨叨 [作者]
      回复

      有问题可以去github上提issues,我定期会去看的,https://github.com/wangdaodao/vue-lunar-calendar-pro/issues

添加新评论