最近需要用到一个有关日历方面的需求,于是就老地方去找找看了,没想到那里居然还有一个非常不错的自定义日历组件,所以就顺便把它给记录下来吧…
老地方——微信小程序开发资源汇总 话说这个 gitHub 上面的资源是真的不错呀
本次的主角就是它了—— wx_calendar ★300+ - 小程序日历
如果需要更多的自定义配置及功能 请查阅日历文档
好了,废话不多说,直接上我自己根据其给出来的组件稍微修改的源码:
首先上个效果图先:
middle.wxml
<!--pages/middle/middle.wxml-->
<view class="container">
<text style="margin-bottom:50rpx;">日历组件 Component</text>
<text style="font-size:30rpx;margin-bottom:30rpx;">单选模式下双击日历头部中间部分可跳转至当天日期</text>
<!-- 单选模式下双击日历头部中间部分可跳转至当天日期 -->
<view style="width: 90%;margin: 0 auto;">
<calendar
calendarConfig="{{calendarConfig}}"
bind:afterTapDay="afterTapDay"
bind:whenChangeMonth="whenChangeMonth"
bind:onTapDay="onTapDay"
bind:afterCalendarRender="afterCalendarRender"
></calendar>
</view>
</view>
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 () {
}
})
好了,以上就是该组件的部分功能了,感谢观看。看来还是大神厉害呀,膜拜大神