微信小程序 自定义日历组件（记录学习）

最近需要用到一个有关日历方面的需求，于是就老地方去找找看了，没想到那里居然还有一个非常不错的自定义日历组件，所以就顺便把它给记录下来吧…

老地方——微信小程序开发资源汇总 话说这个 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 () {

  }
})

好了，以上就是该组件的部分功能了，感谢观看。看来还是大神厉害呀，膜拜大神