微信小程序日历插件

欢迎大家来到IT世界,在知识的湖畔探索吧!

「极点日历」插件支持 1900 年 1 月 ~ 2099 年 12 月这两百年间的公历和农历显示，插件提供了丰富的可配置属性，包括日期的显示方式、选择范围、是否显示农历等，可自定义来适配不同的使用场景。

添加插件到小程序

1.在微信小程序管理后台——设置——第三方服务，按 AppID（wx92c68dae5a8bb046）搜索到该插件并申请授权。

2.在要使用该插件的小程序 app.json 文件中引入插件声明：

"plugins": { "calendar": { "version": "1.1.3", "provider": "wx92c68dae5a8bb046" } }

欢迎大家来到IT世界,在知识的湖畔探索吧!

3.在需要使用到该插件的小程序页面的 JSON 配置文件中，做以下配置：

欢迎大家来到IT世界,在知识的湖畔探索吧!{ "usingComponents": { "calendar": "plugin://calendar/calendar" } }

4.在相应的 HTML 页面中添加以下语句即可完成插件的嵌入：

<calendar/>

日历属性

日历事件用法

日历包含下个月事件（nextMonth）、上个月事件（prevMonth）、标题日期选择器事件（dateChange）、点击某一天的事件（dayClick）

wxml文件:

欢迎大家来到IT世界,在知识的湖畔探索吧!<view class="vg-calendar"> <calendar cell-size="30" weeks-type="cn" calendar-style="calendar" header-style="header" board-style="board" days-color="{{daysColor}}" binddayClick="onDay" bindnextMonth="onMonthNext" bindprevMonth="onMonthPrev" binddateChange="onDateChange" active-type="square" /> </view>

js文件:

Page({ data: { }, onLoad(options) { }, onDay: function (e) { const { year, month, day } = e.detail; let daysColor = new Array; //选中颜色 daysColor.push({ month: 'current', day: day, color: '#000000', background: '#FF8672' }); this.setData({ daysColor }); },//下个月 onMonthNext: function (e) { const { currentYear, currentMonth } = e.detail; },//上个月 onMonthPrev: function (e) { const { currentYear, currentMonth } = e.detail; }, onDateChange:function(e){ console.log(e); } })

wxss文件：

.vg-calendar { margin-top: 20rpx; padding-bottom: 20rpx; background-color: #fff; } .header { color: #000; font-size: 32rpx; margin-bottom: 20rpx; background-color: #fff; margin: 0rpx 0rpx 20rpx 0rpx !important; padding: 40rpx; }

效果图：

转载：码书网「链接」