WeChat Mini Program-Calendar

Mini Program Calendar

Idea analysis

To implement a calendar, you need to know several values:
How many days are there in the month
What day of the week is the first day of the month
According to common sense, we know that a month has a maximum of 31 days and a minimum of 28 days. If the calendar has 7 grids in a row, there will be 5 rows. However, if the first day of the month is a Saturday, there will be six rows of grids.
The applet has no concept of DOM operations, so it cannot dynamically insert the number of empty cells into the first day of the month. It can only be controlled by adding a loop of empty cells in front. For details, refer to the wxml file.
Calendar template introduction

The calendar template panel supports sliding left and right gestures;
Provides jumpToToday method to jump to today;
Set date to-do labels setTodoLabels;
Delete to-do labels for the specified date deleteTodoLabels;
Clear all date to-do labels clearTodoLabels;
Provide template template introduction
Introduce wxml and 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';
Calendar component initialization
import initCalendar, { getSelectedDay, jumpToToday, setTodoLabels, deleteTodoLabels, clearTodoLabels } from '../../template/calendar/index'; const conf = { onShow: function() { initCalendar({ // multi: true, // Whether to enable multi-selection, // disablePastDay: true, // Whether to disable past dates/** * Events executed after selecting a date * @param { object } currentSelect The currently clicked date * @param { array } allSelectedDays All selected dates (The allSelectedDays parameter is only available when mulit is true) */ afterTapDay: (currentSelect, allSelectedDays) => { console.log('==================== ==========='); console.log('The current clicked date', currentSelect); console.log('Whether the current clicked date has an event mark: ', currentSelect.hasTodo || false );
      allSelectedDays && console.log('all selected dates', allSelectedDays); console.log('getSelectedDay method', getSelectedDay());
}, /** * Date click event (this event will completely take over the click event) * @param { object } currentSelect The date of the current click * @param { object } event Date click event object */ // onTapDay(currentSelect, event) { // console.log(currentSelect); // console.log(event); // }, /** * Events are triggered after the initial rendering of the calendar, such as setting event markers */ afterCalendarRender() { setTodoLabels({
            pos: 'bottom',
          dotColor: '#40',
days: [{
Year: 2018,
month: 5,
day: 12,
           }, {
Year: 2018,
month: 5,
day: 15,
          }],
        });
},
});
}, deleteTodo() { // Specify the date when the to-do label needs to be deleted deleteTodoLabels([{
Year: 2018,
month: 5,
day: 12,
}, {
Year: 2018,
month: 5,
day: 15,
}]); // clearTodoLabels(); }, /** * Jump to today */ jump() { jumpToToday();
},
}; Page(conf);