小程序日歷

思路分析

要實現(xiàn)一個日歷，就需要先知道幾個值：
當(dāng)月有多少天
當(dāng)月第一天星期幾
根據(jù)常識我們得知，每月最多31天，最少28天，日歷一排7個格子，則會有5排，但若是該月第一天為星期六，則會產(chǎn)生六排格子才對。
小程序沒有DOM操作概念，故不能動態(tài)的往當(dāng)月第一天的插入多少個空格子，只能通過在前面加入空格子的循環(huán)來控制，具體參考 wxml 文件。
日歷模板引入

日歷模板面板支持 手勢左右滑動；
提供跳轉(zhuǎn)至今天方法jumpToToday；
設(shè)置日期待辦事項標(biāo)記 setTodoLabels；
刪除指定日期待辦事項標(biāo)記 deleteTodoLabels；
清空所有日期待辦事項標(biāo)記 clearTodoLabels；
提供 template 模板引入
引入wxml及wxss
// example.wxml
<import src="../../template/calendar/index.wxml"/>
<view class="calendar-wrap">
? ?<template is="calendar" data="{{...calendar}}" />
</view>
/* example.wxss */ @import '../../template/calendar/index.wxss';
日歷組件初始化
import initCalendar, { getSelectedDay, jumpToToday, setTodoLabels, deleteTodoLabels, clearTodoLabels } from '../../template/calendar/index'; const conf = { onShow: function() { initCalendar({ // multi: true, // 是否開啟多選, // disablePastDay: true, // 是否禁選過去日期 /**?* 選擇日期后執(zhí)行的事件 ?* @param { object } currentSelect 當(dāng)前點擊的日期 ?* @param { array } allSelectedDays 選擇的所有日期（當(dāng)mulit為true時，才有allSelectedDays參數(shù)） ?*/ afterTapDay: (currentSelect, allSelectedDays) => { console.log('==============================='); console.log('當(dāng)前點擊的日期', currentSelect); console.log('當(dāng)前點擊的日期是否有事件標(biāo)記: ', currentSelect.hasTodo || false);
? ? ? ? allSelectedDays && console.log('選擇的所有日期', allSelectedDays); console.log('getSelectedDay方法', getSelectedDay());
? ? ? }, /**?* 日期點擊事件（此事件會完全接管點擊事件） ?* @param { object } currentSelect 當(dāng)前點擊的日期 ?* @param { object } event 日期點擊事件對象 ?*/ // onTapDay(currentSelect, event) { // console.log(currentSelect); // console.log(event); // }, /**?* 日歷初次渲染完成后觸發(fā)事件，如設(shè)置事件標(biāo)記 ?*/ afterCalendarRender() { setTodoLabels({
? ? ? ? ? pos: 'bottom',
? ? ? ? ? dotColor: '#40',
? ? ? ? ? days: [{
? ? ? ? ? ? year: 2018,
? ? ? ? ? ? month: 5,
? ? ? ? ? ? day: 12,
? ? ? ? ? }, {
? ? ? ? ? ? year: 2018,
? ? ? ? ? ? month: 5,
? ? ? ? ? ? day: 15,
? ? ? ? ? }],
? ? ? ? });
? ? ? },
? ? });
? }, deleteTodo() { // 指定需要刪除待辦標(biāo)識的日期 deleteTodoLabels([{
? ? ? year: 2018,
? ? ? month: 5,
? ? ? day: 12,
? ? }, {
? ? ? year: 2018,
? ? ? month: 5,
? ? ? day: 15,
? ? }]); // clearTodoLabels(); }, /**?* 跳轉(zhuǎn)至今天 ?*/ jump() { jumpToToday();
? },
}; Page(conf);