WeChat 미니 프로그램-캘린더

미니 프로그램 캘린더

사고분석

달력을 구현하려면 먼저 몇 가지 값을 알아야 합니다.
한달은 몇일이에요
매월 1일은 무슨 날인가요
상식에 따르면 한 달은 최대 31일, 최소 28일로 구성됩니다. 달력에 7개의 그리드가 연속되어 있으면 5개의 행이 있습니다. 토요일에는 6줄의 그리드가 있을 것입니다.
애플릿에는 DOM 작업 개념이 없으므로 해당 월의 첫날에 빈 셀 수를 동적으로 삽입할 수 없습니다. 앞에 빈 셀 루프를 추가해야만 제어할 수 있습니다. .
캘린더 템플릿 소개

달력 템플릿 패널은 왼쪽 및 오른쪽 동작을 지원합니다. 오늘로 이동하는 JumpToToday 메소드 제공
날짜 할일 라벨 설정 setTodoLabels; 지정된 날짜의 할 일 라벨 삭제 deleteTodoLabels
모든 날짜 할일 라벨 지우기clearTodoLabels; 템플릿 템플릿 소개 제공
wxml과 wxss를 소개합니다
// example.wxml
<import src="../../template/calendar/index.wxml"/>
<view class="calendar-wrap">
<template is="calendar" data="{{...calendar}}" />
</보기>
/* example.wxss */ @import '../../template/calendar/index.wxss';
캘린더 구성요소 초기화
import initCalendar, { getSelectedDay, jumpToday, setTodoLabels, deleteTodoLabels,clearTodoLabels } from '../../template/calendar/index'; const conf = { onShow: function() { initCalendar({ // multi: true, // 다중 선택 활성화 여부, // 비활성화PastDay: true, // 과거 날짜 비활성화 여부/*** 날짜 선택 후 실행되는 이벤트 * @param { object } currentSelect 현재 클릭된 날짜 * @param { array } allSelectedDays 선택된 모든 날짜 (multit가 true인 경우에만 allSelectedDays 매개변수 사용 가능)*/ afterTapDay: (currentSelect, allSelectedDays) => { console.log('======= = ====================='); console.log('현재 클릭 날짜', currentSelect); date 이벤트 마커가 있습니다: ', currentSelect.hasTodo || false);
       allSelectedDays && console.log('선택한 모든 날짜', allSelectedDays) console.log('getSelectedDay method', getSelectedDay());
}, /*** 날짜 클릭 이벤트(이 이벤트는 클릭 이벤트를 완전히 대체합니다.) * @param { object } currentSelect 현재 클릭 날짜 * @param { object } event 날짜 클릭 이벤트 개체*/ // onTapDay(currentSelect, event) { // console.log(currentSelect) // console.log(event) // }, /*** 이벤트 마커 설정 등 캘린더의 초기 렌더링이 완료된 후 이벤트가 트리거됩니다.*/ afterCalendarRender; () { setTodoLabels({
            위치: '하단',
          dotColor: '#40',
        일: [{
연도: 2018,
월: 5,
일: 12,
           }, {
연도: 2018,
월: 5,
일: 15,
          }],
        });
},
});
}, deleteTodo() { //할 일 라벨을 삭제해야 하는 날짜를 지정합니다. deleteTodoLabels([{
연도: 2018,
월: 5,
일: 12,
}, {
연도: 2018,
월: 5,
일: 15,
}]); //clearTodoLabels() }, /*** 오늘로 이동*/ jump() { jumpToday();
},
}; 페이지(conf);