小程式日曆

思路分析

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

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