基于Vue的农历日历面板
最近在做政府的项目,需求要一个日历面板支持农历节日节气显示,搜了好多都不太满意,于是自己动手造了一个轮子。这款日历应该说功能比较强大,样子大概这样:
现在暂时还处于测试阶段,代码已经开源,大家也可以测试测试看看现在日历面板还有哪些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
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
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 |
Events
事件名 | 说明 | 参数 |
---|---|---|
year-change | 当前渲染的年份变化时会触发该事件 | year,month |
month-change | 当前渲染的月份变化时会触发该事件 | year,month |
date-click | 点击某个日期格子时会触发该事件 | date |
Date
字段 | 说明 |
---|---|
date | Date对象 |
year | 年 |
month | 月 |
day | 日 |
weekDay | 周几(0-6) |
lunar | 农历数据 |
festival | 节日 |
term | 节气 |
isToday | 是否为今天 |
isSelect | 是否选中 |
isWeekend | 是否为周末 |
isOtherMonthDay | 是否属于当前渲染月份 |
renderYear | 当前渲染年份 |
renderMonth | 当前渲染月份 |
isDefaultDate | 是否是默认日期 |
- vue-lunar-calendar-pro
- Owner:wangdaodao
- Updated:2024-09-25 10:08
- Watch:84
- Star:84
- Fork:29
- 一个支持农历,节气,假日的日历面板!
你好,关于高亮日期和选中日期可以动态渲染吗?有没有群可以讨论的
有问题可以去github上提issues,我定期会去看的,https://github.com/wangdaodao/vue-lunar-calendar-pro/issues