小程式日曆

思路分析

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

日曆模板面板支援 手勢左右滑動；
提供跳轉至今天方法jumpToToday；
設定日期待待辦事項標記 setTodoLabels；
刪除指定日期待待辦事項標記 deleteTodoLabels；
清空所有日期待待辦事項標記 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({ //)是否開啟多選, // disablePastDay: true, // 是否禁選過去日期/** ?* 選擇日期後執(zhí)行的事件?* @param { object } currentSelect 目前點擊的日期?* @param { array } allSelectedDays 選擇的所有日期（當mulit為true時，才有allSelectedDays參數(shù)） ?*/ afterTapDay: (currentSelect, allSelectedDays) => { console.log('==================== ==========='); console.log('目前點選的日期', currentSelect); console.log('目前點選的日期是否有事件標記: ', currentSelect.hasTodo || false );
? ? ? ? allSelectedDays && console.log('所有選擇的日期', allSelectedDays); console.log('getSelectedDay方法', getSelectedDay());
}, /** ?* 日期點選事件（此事件會完全接手點選事件） ?* @param { object } currentSelect 目前點選的日期?* @param { object } event 日期點選事件物件?*/ // onTapDay(currentSelect, event) { // console.log(currentSelect); // console.log(event); // }, /** ?* 日曆初次渲染完成後觸發(fā)事件，如設定事件標記?*/ afterCalendarRender() { setTodoLabels({
? ? ? ? ? pos: 'bottom',
? ? ? ? ? dotColor: '#40',
? ? ? ? ? days: [{
? ? ? ? ? ? year: 2018,
? ? ? ? ? ? month: 5,
? ? ? ? ? ? day: 12,
? ? ? ? ? }, {
? ? ? ? ? ? year: 2018,
? ? ? ? ? ? month: 5,
? ? ? ? ? ? day: 15,
? ? ? ? ? }],
? ? ? ? });
? ? ? },
? ? });
? }, deleteTodo() { // 指定需要刪除待辦識別碼的日期 deleteTodoLabels([{
? ? ? year: 2018,
? ? ? month: 5,
? ? ? day: 12,
? ? }, {
? ? ? year: 2018,
? ? ? month: 5,
? ? ? day: 15,
? ? }]); // clearTodoLabels(); }, /** ?* 跳到今天 ?*/ jump() { jumpToToday();
? },
}; Page(conf);