添加插件到自己的小程序
1、在微信小程序管理后台——设置——第三方服务,按 AppID(wx92c68dae5a8bb046)搜索到该插件并申请授权。
2、在要使用该插件的小程序 app.json 文件中引入插件声明。
"plugins": {"calendar": {"version":"1.1.3","provider":"wx92c68dae5a8bb046"}}
3、在需要使用到该插件的小程序页面的 JSON 配置文件中,做以下配置:
{"usingComponents": {"calendar":"plugin://calendar/calendar"}}
4、在相应的 HTML 页面中添加以下语句即可完成插件的嵌入。
5、添加插件后效果如图:
说明:默认的用法,将具备以下样式特点:
显示当前月份的日历;
显示日历标题、显示上下月按钮;
显示周标题,周标题默认为 en 类型,即英文字母;
不显示非当前月的日期;
不显示农历;
插件占据文档流的整块宽度,即 width:100%。
日历属性接口文档
calendar 日历
属性名类型默认值说明
yearNumber当前年份当前公历年份
monthNumber当前月份当前公历月份
dayNumber当前日期当前公历日期
start-dateString日历的起始年份格式为YYYY-MM
end-dateString日历的结束年份格式为YYYY-MM
headerBooleantrue是否显示标题
nextBooleantrue是否显示下个月按钮
prevBooleantrue是否显示上个月按钮
show-more-daysBooleanfalse是否显示非当前月的日期
weeksBooleantrue是否显示周标题
weeks-typeStringen周标题类型
days-colorArray[]设置各日期字体颜色、背景颜色
cell-sizeNumber30设置日期单元格大小
active-typeStringrounded设置日期背景形状
lunarBooleanfalse是否显示农历
注1:日历的起始年月最小为1900-01
注2:日历的结束年月最大为2099-12
注3:日期单元格大小单位为px
weeks-type有效值
值说明
en显示为:S,M,T,W,T,F,S
full-en显示为:Sun, Mon, Tue, Wed, Thu, Fri, Sat
cn显示为:日,一,二,三,四,五,六
active-type有效值
值说明
rounded显示为圆形背景
square显示为方形背景
days-color数组项构成
days-color数组的每一项为一个对象,对象有4个属性,意义如下:
属性名说明
month要标记的日期所属月份,有效值有prev(上个月),current(当前月),next(下个月)
day要标记的日期
color日期文字的颜色,格式为“#HEX”或CSS颜色名
background日期单元格的颜色,格式为“#HEX”或CSS颜色名
日历事件用法
(1)wxml文件
(2)js文件
Page({next:function(event) {console.log(event.detail); }})
假设当前是2018年4月,点击下个月按钮,在控制台会打印出:
{currentMonth:5,currentYear:2018,prevMonth:4prevYear:2018}
(1)wxml文件
(2)js文件
Page({prev:function(event) {console.log(event.detail); }})
假设当前是2018年4月,点击上个月按钮,在控制台会打印出:
{currentMonth:3,currentYear:2018,prevMonth:4prevYear:2018}
(1)wxml文件
(2)js文件
Page({dateChange:function(event) {console.log(event.detail); }})
假设当前是2018年4月,选择了2015年7月,在控制台会打印出:
{currentMonth:7,currentYear:2015,prevMonth:4prevYear:2018}
(1)wxml文件
(2)js文件
Page({dayClick:function(event) {console.log(event.detail); }})
假设当前是2018年4月,点击了4月4日这一天,在控制台会打印出:
{background:"transparent"color:""#4a4f74""day:4lunarDay:"十九"lunarMonth:"二月"month:4year:2018}
自定义日历样式
组件本身是无背景色(透明)的,calendar-style 样式位于组件的根节点。假设要更改日历的背景色,除了在组件的父级容器设置背景色外,也可以通过该样式类进行配置来达到相应的效果。
以上图为例,想要实现图中的背景效果,在wxml文件里指定 calendar-style 的外部样式类为 calendar:
在wxss文件新增 background-color 属性更改背景颜色等:
.calendar{background-color:#eeedff;padding-top:10px;}
header-style样式类位于组件的日历标题。对该组件进行配置,可以改变当前年月,上下月按钮的外观和背景。
在上面例子的基础上,我们在 wxml 文件中新增代码:
在 WXSS 文件中添加 header 样式:
.header{font-size:large;/*修改了标题文字和按钮的大小*/color:#605eac;/*修改了标题文字和按钮的颜色*/}
board-style 样式类位于日历组件的主面板,包含了周标题和日期部分。对该组件进行配置,可以改变周标题的样式和日期面板的样式。
紧跟上面的例子,我们对 wxml 文件加多一行代码。
在 wxss 文件中新增 board 样式
.board{background-color:#dddcff;color:white;}
效果如下: