need
When working on a project, you need to use a calendar. After reading the designer’s design draft, you can conclude that you can swipe left and right to switch the displayed calendar, and can display text and labels under a certain date, and provide a date and date within a certain range. Single select two functions.
I just saw it at the beginning, thinking that there are a lot of such components on the Internet. However, after some searching, I found out that most of the calendar components are scrolling up and down, and there are not many components that can meet the needs of the project. Of course, there are also some complicated calendar components, but I don’t want to learn how to use them (lazy), and because I saw the simple implementation of the calendar by accident , I spent some time writing this component
parsing the original
According to the requirements of the project, I need to know what information my calendar should have:
1. 标题，旨在说明日历的用途，如选择购票时间，选择团期等
2. 副标题，用来显示当前的年月
3. 左右切换按钮，用来翻阅日历
4. 星期（日-六）
5. 一个月的天数的排列，通过循环，只要设置好每个格子的大小，就可以按照顺序排下去，但是我们得知道几点：
5.1）每月的1号是星期几，即从哪个位置开始排
5.2）每月有多少天，即要排多少个格子
6. 按照这种排列，肯定会出现前面几个格子是空白的，后面几个格子是空白的，即上下月的残余天数
6.1）上个月的最后一天是几号，有多少
6.2）下个月的残余天数有多少
7. 底部是否存在按钮，用来操作After analyzing the above points, you can basically determine what your calendar should look like
Display of the analysis calendar:
1. 可以显示文字和标签，因为日历每个日期相当于一个块，所以利用定位可以很快解决显示的问题，颜色也可以根据传过来的属性进行自定义
2. 可以选择日期，从这可以分析出每一个块至少有三种颜色变化：没有选中状态，选中状态以及中间状态From the above analysis, we can know that our data structure should look like this (display part):
/**
* 日历副标题
*/subTitle: {
year: ''
month: ''
}
/**
* 日历信息
*/calendarInfo: {
last: {
year: -1,
month: -1,
list: [],
swiperHeight: 999
},
cur: {
year: -1,
month: -1,
day: -1,
select: -1, //选中的时间,位置
swiperHeight: 999, //滚动框的高度
},
next: {
year: -1,
month: -1,
list: [],
swiperHeight: 999
}
},
/**
* 提示信息
*/tipData: [
{
value: '2020-10-1',
text: '国庆节',
type: 'text', //文本类型
color: 'red'//文本颜色
},
{
vlaue: '2020-10-1',
text: '休',
type: 'tag', //标签类型
color: 'lightblue'， //标签颜色
}
]Then the calendar at this time should look like this
start packing
First of all, the component I chose is the swiper of the WeChat applet
Determine the day of the week on the 1st of each month
/**
* 获取某月1号是星期几
* @param {Object}date
* @returns {Number}
*/
getFirstDayWeek(date) {
returnnewDate(date.year, date.month - 1, 1).getDay()
},Determine the number of days in each month
/**
* 获取某年某月的总天数
* @param {Object}date
* @returns {Number}totalDays
*/
getTotalDays(date) {
returnnewDate(date.year, date.month, 0).getDate()
},According to the second and third points, you can easily know the remaining days of the previous month and the remaining days of the next month in the current month (the total number of days displayed on the calendar is a multiple of 7, and a maximum of 6 rows can be displayed)
/**
* 根据这个月，计算上下两个月的残余天数
* @param {Object}date
*/
calculateResidualDays(date) {
// 计算上月残余天数,需要知道1号是星期几(个数)且上月最后一天是几号(起始数值)
let last_value = dateUtil.getTotalDays({
year: date.year,
month: date.month - 1
})
for (let i = 0; i < date.firstDayWeek; i++) {
date.list.unshift({
value: this.properties.showRemnantDays ? last_value - i : '',
type: 'last'
})
}
// 计算下月残余天数,需要知道本月显示多少行
let total = Math.floor(date.list.length / 7)
if (date.list.length % 7 > 0) {
++total
}
if (this.properties.fixRow) {
// 设置了每月固定显示6行
total = 6
}
let next_value = total * 7 - date.list.length
// 设置滚动框的高度,设置变化的过渡动画
date.swiperHeight = total * 107
for (let i = 1; i <= next_value; i++) {
date.list.push({
value: this.properties.showRemnantDays ? i : '',
type: 'next'
})
}
// 格式化显示的提示信息
this.formatShowTip(date)
},Basically the calendar has been displayed, configure the displayed text and labels
/**
* 格式化文字标签
* @param {Object}date
*/
formatShowTip(date) {
// 判断是否显示相关的节假日
if (this.properties.showHoliday) {
this.formatHolidayTip(date)
}
// 循环遍历找出对应的要显示的文字日期
this.properties.dateText.forEach((item, index) => {
date.list.forEach((arr, temp) => {
let value = date.year + '-' + date.month + '-' + arr.value
if (item.value === value && arr.type === 'cur') {
arr.tip = item
}
})
})
},set selected date
click button
at last
Because the code is relatively large, I didn’t paste all of it, but only a part. The detailed code can be seen in the calendar of the applet business component .
The components in github currently only provide calendar display, and there is no method to obtain back-end data and format it for the time being. This can be added by yourself, and event processing can also be called back when switching months.
The overall effect of the component is realized as:
Source: Transferred from WeChat development community
