微信小程序 自定义日历组件（记录学习）
最近需要用到一个有关日历方面的需求，于是就老地方去找找看了，没想到那里居然还有一个非常不错的自定义日历组件，所以就顺便把它给记录下来吧…
老地方——微信小程序开发资源汇总 话说这个 gitHub 上面的资源是真的不错呀
本次的主角就是它了—— wx_calendar ★300+ - 小程序日历
如果需要更多的自定义配置及功能 请查阅日历文档
好了，废话不多说，直接上我自己根据其给出来的组件稍微修改的源码：
首先上个效果图先：
middle.wxml
日历组件 Component
单选模式下双击日历头部中间部分可跳转至当天日期
middle.wxss
因为 Component 文件夹里面的 calendar 文件夹里面的 index.wxss 已经写了样式，需要修改样式的话可以去那里修改
middle.js
// pages/middle/middle.js
import { setTodoLabels, enableArea } from '../../Component/calendar/main';
Page({
/**
* 页面的初始数据
*/
data: {
calendarConfig: {
// multi: true, // 是否开启多选
// inverse: true, // 单选模式下是否可以取消选择
// disablePastDay: true, // 是否禁选过去的日期
// defaultDay: '2019-5-19', // 初始化后是否默认选中指定日期
defaultDay: '', //初始化时不默认选中当天
/**
* 初始化日历时指定默认选中日期，如：'2018-3-6' 或 '2018-03-06'
* 注意：若想初始化时不默认选中当天，则将该值配置为除 undefined 以外的其他非值即可，如：空字符串, 0 ,false等。
*/
// noDefault: true, // 初始化后是否自动选中当天日期，优先级高于defaultDay配置，两者请勿一起配置
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
// 自定义日历组件 Component
setTodo() {
const data = [
{
year: '2019',
month: '5',
day: '15'
},
{
year: 2019,
month: 5,
day: 18,
todoText: '待办'
}
];
// 异步请求
setTimeout(() => {
setTodoLabels({
// circle: true,
days: data
});
}, 1000);
enableArea(['2019-5-7', '2019-10-28']); // 指定可选时间区域
},
afterTapDay(e) {
console.log('afterTapDay', e.detail);
},
whenChangeMonth(e) {
console.log('whenChangeMonth', e.detail);
},
onTapDay(e) {
console.log('onTapDay', e.detail);
},
afterCalendarRender(e) {
console.log('afterCalendarRender', e);
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
好了，以上就是该组件的部分功能了，感谢观看。看来还是大神厉害呀，膜拜大神