微信小程式-日曆

小程式日曆

思路分析

要實作一個行事曆，就需要先知道幾個值：
當月有多少天
當月第一天星期幾
根據常識我們得知，每月最多31天，最少28天，日曆一排7個格子，則會有5排，但若是該月第一天為星期六，則會產生六排格子才對。
小程式沒有DOM操作概念，故不能動態的往當月第一天的插入多少個空格子，只能透過在前面加入空格子的循環來控制，具體參考 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, // 是否禁選過去日期/**  * 選擇日期後執行的事件 * @param { object } currentSelect 目前點擊的日期 * @param { array } allSelectedDays 選擇的所有日期（當mulit為true時，才有allSelectedDays參數）  */ 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); // }, /**  * 日曆初次渲染完成後觸發事件，如設定事件標記 */ 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);