WeChat ミニ プログラム - カレンダー

ミニプログラムカレンダー

アイデア分析

カレンダーを実装するには、いくつかの値を知っておく必要があります。
月は何日
ありますか？ 月の最初の日は何曜日
ですか？ 常識によれば、月は最長 31 日、最短 28 日であることがわかっています。カレンダーに 7 つのマス目が連続している場合、5 つの行になります。ただし、月の最初の日が土曜日には6列のグリッドが配置される。
アプレットには DOM 操作の概念がないため、月の最初の日に空のセルの数を動的に挿入することはできません。前に空のセルのループを追加することによってのみ制御できます。詳細については、wxml ファイルを参照してください。 。
カレンダーテンプレートの紹介

カレンダー テンプレート パネルは、左右にスライドするジェスチャをサポートしています。
今日にジャンプするための JumpToToday メソッドを提供します。
日付の ToDo ラベルを設定します setTodoLabels;
指定した日付の ToDo ラベルを削除します deleteTodoLabels;
すべての日付の ToDo ラベルをクリアします。clearTodoLabels;
テンプレートテンプレートの紹介
を提供します。 wxmlとwxssを
紹介します。 // example.wxml
<インポート src="../../template/calendar/index.wxml"/>
<クラス="カレンダーラップ" を表示>
<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, // 過去の日付を無効にするかどうか/** * 日付を選択した後に実行されるイベント * @param { object } currentSelect 現在クリックされている日付 * @param { array } allSelectedDays すべて選択されています日付 (allSelectedDays パラメーターは、mulit が true の場合にのみ使用できます) */ 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 日付クリック イベント object */ // onTapDay( currentSelect,event) { // console.log(currentSelect); // console.log(event); // }, /** * イベントは、イベント マーカーの設定など、カレンダーの最初のレンダリング後にトリガーされます */ afterCalendarRender () { setTodoLabels({
pos: '下'、
dotColor: '#40',
日数: [{
年: 2018年
月: 5、
日: 12日
}、{
年: 2018年
月: 5、
日: 15日
}]、
});
},
});
}, deleteTodo() { // ToDo ラベルを削除する必要がある日付を指定します deleteTodoLabels([{
年: 2018年
月: 5、
日: 12日
}、{
年: 2018年
月: 5、
日: 15日
}]); // clearTodoLabels(); }, /** * 今日にジャンプ */ Jump() { JumpToToday();
},
}; ページ(conf);