Recently done Small program Development, out of hands-on, but also work needs, made a wechat app similar to the hotel booking calendar plug-in.
First of all:
This plug-in is divided into two parts: the upper part is the tab column, which will automatically locate to the current according to the current date, and display the next 7 days' date. The lower part is the content display, which changes with the change of the tab column.
Train of thought:
First, initialize the time with the new Data() time object, get the current date, and get the day of the week as the first day of each month with the new Date(Date.UTC(year, month - 1, 1)).getDay().
// Calculate the day of the week on the first day of each month
function getFirstDayOfWeek(year, month) {
return new Date(Date.UTC(year, month - 1, 1)).getDay();
}
const date = new Date();
const cur_year = date.getFullYear();
const cur_month = date.getMonth() + 1;
const cur_date=date.getDate();
const weeks_ch = ['day', 'One', 'Two', 'Three', 'Four', 'Five', 'Six'];
Use the constructor to generate data, which will be used later.
//Using constructors to create objects
function calendar(date,week){
this.date=cur_year+'-'+cur_month+'-'+date;
if(date==cur_date){
this.week = "Today";
}else if(date==cur_date+1){
this.week = "Tomorrow";
}else{
this.week = 'week' + week;
}
}
Use the for loop to generate json data:
for(var i=1;i<=monthLength;i++){
//After one week of the loop, initialize the loop again
if(x>6){
x=0;
}
//Using constructors to create objects
that.data.calendar[i] = new calendar(i, [weeks_ch[x]][0])
x++;
}
Because there are 7 days in a week, it is reset to 0 when x>6.
Finally, part of the source code is shown
var that=this;
function getThisMonthDays(year, month) {
return new Date(year, month, 0).getDate();
}
// Calculate the day of the week on the first day of each month
function getFirstDayOfWeek(year, month) {
return new Date(Date.UTC(year, month - 1, 1)).getDay();
}
const date = new Date();
const cur_year = date.getFullYear();
const cur_month = date.getMonth() + 1;
const cur_date=date.getDate();
const weeks_ch = ['day', 'One', 'Two', 'Three', 'Four', 'Five', 'Six'];
//Using constructors to create objects
function calendar(date,week){
this.date=cur_year+'-'+cur_month+'-'+date;
if(date==cur_date){
this.week = "Today";
}else if(date==cur_date+1){
this.week = "Tomorrow";
}else{
this.week = 'week' + week;
}
}
//Days of the current month
var monthLength= getThisMonthDays(cur_year, cur_month)
//What day is the first day of the current month
var week = getFirstDayOfWeek(cur_year, cur_month)
var x = week;
for(var i=1;i<=monthLength;i++){
//After one week of the loop, initialize the loop again
if(x>6){
x=0;
}
//Using constructors to create objects
that.data.calendar[i] = new calendar(i, [weeks_ch[x]][0])
x++;
}
//Limit the number of calendar data days to render to within 7 days (user experience)
var flag = that.data.calendar.splice(cur_date, that.data.calendar.length - cur_date <= 7 ? that.data.calendar.length:7)
that.setData({
calendar: flag
})
//Set the width of the child containers of scroll view
that.setData({
width: 186 * parseInt(that.data.calendar.length - cur_date <= 7 ? that.data.calendar.length : 7)
})
Last address: github address
Links: Wechat applet order placement (calendar) - Tutorial - applet community - wechat applet - wechat applet development community - applet development forum - wechat applet Alliance
The copyright belongs to the author. For commercial reprint, please contact the author for authorization. For non-commercial reprint, please indicate the source.