# WeChat applet calendar component development
WeChat Mini Program Basics
Introduction to WeChat Mini Program Framework
The above is the basic knowledge of developing small programs.
What I need to say today is to develop a calendar picker component based on the basic components provided by the applet, mainly referring to the date picker of Ant Design . As shown
Design ideas
-
Date picker, a single View has a total of 42 elements, the date of the current month and some dates of the month before and after
-
Month Picker This simple year has a total of 12 months
-
Year selector This needs to generate a series of years before and after the current year
Date picker roughly implements ideas
When we need to select a date, that is, when the date picker appears, we need to display the monthly calendar view of the current time (year, month, and day), so we can start by initializing the calendar data according to the current time.
fixed part
1. 7Days of the week
2. There are 12months in a year
3. 1, 3, 5, 7, 8, 10, 12 31 days per month, February 28 or 29 (leap year) and the remaining 30 days
Change part
1. Data in the current calendar card
2. The current time and year can be selected
In summary, we can first design the implementation of the fixed part
Fixed part implementation
//星期数组
var weeks = ["日", "一", "二", "三", "四", "五", "六",];
//当前年份中每个月的天数
var dayCountOfMonth = [31, 28 + util.isLeapYear(year), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
//一年中月份组数
var monthCount = 12;
Changes Partially Implemented *
The current calendar card data implementation, the implementation here is relatively simple to design according to 6 rows and 7 columns, which not only ensures that the number of Days in the current month can be fully displayed, but also facilitates us to render the data without having to use spaces to control it. First, we take out the week corresponding to the first day of each month and record it
, fill in the data of the calendar card of the current month according to the week corresponding to the first day of the month. For example, if the date corresponding to the first day of the current month is Tuesday, then you need to fill in the data of the last day of the previous 1month data Total data for +current month + next month ( 42- existing data)
initMontData: function (dayCountOfMounth, weeksOfTheFirstDayOfEachMonth) {
var currentYearMonthData = [];
const cdate = this.data.calenderData.date;
const lastYearDate = new Date();
lastYearDate.setFullYear(this.data.calenderData.year - 1);
var lastYearData = this.initData(lastYearDate);
var nextYearDate = new Date();
nextYearDate.setFullYear(this.data.calenderData.year + 1);
var nextYearData = this.initData(nextYearDate);
for (var i = 0; i < 12; i++) {
var currentMonthDayCount = dayCountOfMounth[i];
var firstDayWeek = weeksOfTheFirstDayOfEachMonth[i];
var startIndex = firstDayWeek;
var endIndex = firstDayWeek + dayCountOfMounth[i] - 1;
var startArray = [];
var endArray = [];
var ddd = new Date();
var cdaycount = dayCountOfMounth[i - 1];
if (i === 0) {
ddd.setFullYear(this.data.calenderData.year - 1);;
ddd.setMonth(11);
cdaycount = lastYearData.dayCountOfMonth[11];
} else {
ddd.setMonth(i - 1);
cdaycount = dayCountOfMounth[i - 1];
}
for (var x = startIndex; x > 0; x--) {
var temd = new Date();
temd.setFullYear(ddd.getFullYear());
temd.setMonth(ddd.getMonth());
temd.setDate(cdaycount - x + 1)
var str = util.simpleFormatTime(temd);
var itemh = {
date: temd,
day: temd.getDate(),
gray: true,
str: str
};
startArray.push(itemh);
}
for (var x = 0; x < (42 - endIndex) - 1; x++) {
var temd = new Date();
if (i === 11) {
temd.setFullYear(this.data.calenderData.year + 1);
temd.setMonth(0);
} else {
temd.setFullYear(this.data.calenderData.year);
temd.setMonth(i + 1);
}
temd.setDate(x + 1);
var str = util.simpleFormatTime(temd);
var itemh = {
date: temd,
day: temd.getDate(),
gray: true,
str: str
};
endArray.push(itemh);
}
var earchMontData = [];
for (var j = 0; j < startArray.length; j++) {
earchMontData.push(startArray[j]);
}
for (var j = 0; j < currentMonthDayCount; j++) {
let temd = new Date();
temd.setFullYear(this.data.calenderData.year);
temd.setMonth(i);
temd.setDate(j + 1);
var str = util.simpleFormatTime(temd);
var itemh = {
date: temd,
day: temd.getDate(),
gray: false,
str: str
};
earchMontData.push(itemh);
}
for (var j = 0; j < endArray.length; j++) {
earchMontData.push(endArray[j]);
}
currentYearMonthData.push(earchMontData);
}
return currentYearMonthData;
}
final renderings
Summarize
The implementation is not difficult, but it is difficult to reasonably analyze the current requirements. The code is a Demo written for a friend. It has not been optimized yet, and is purely for implementation.