微信小程序日历插件

微信小程序日历插件在要使用该插件的小程序 app json 文件中引入插件声明 3 在需要使用到该插件的小程序页面的 JSON 配置文件中 做以下配置 4 在相应的 HTML 页面中添加以下语句即可完成插件的嵌入 日历属性

欢迎大家来到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; }

效果图:

微信小程序日历插件

转载:码书网「链接」

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://itzsg.com/94204.html

(0)
上一篇 2024年 12月 3日 上午8:00
下一篇 2024年 12月 3日 上午8:23

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

联系我们YX

mu99908888

在线咨询: 微信交谈

邮件:itzsgw@126.com

工作时间:时刻准备着!

关注微信