1.自定义日历
一.渲染当月的天数
第一步就是我们在哪个月计算出这个月的天数并且渲染出来，这个时候我们用moment.js,当然我也懒的去查moment.js的api了，太多了，而我太懒。于是直接问chatGpt,根据下面的答案写出以下代码
caculateMonth() {
//这个月有多少天，计算出这个月需要渲染的天
this.daysInMonth = moment(this.selectDate, 'YYYY-MM').daysInMonth()
this.days = Array.from({ length: this.daysInMonth }, (_, index) => {
const day = index < 10 ? '0' + (index + 1) : index + 1
return {
day: index + 1,
}
})
},
这样每个月需要渲染的数组就出来了
二.将天和星期对应起来
接着我们进行第二步渲染固定的星期数组，然后将每月的天数和星期对应起来，这个需求可以简化为每月的第一天前面要填几个空元素，接着我们可以把问题简化为某个月的第一天是星期几，以2023年3月为例，这个月的第一天是周三，那证明我本月的天数前面需要填充2个空元素，如果是周四，填充3个，以此类推。然后可以写出以下代码
caculateMonth() {
//月份前面填充的空元素
const firstDayOfMonth = moment(this.selectDate, 'YYYY-MM').startOf('month')
//这个月的第一天是周几
const weekday = firstDayOfMonth.weekday()
this.beforeMonthDays = Array.from(
{ length: weekday - 1 },
(_, index) => index + 1
)
},
最后我们再进行列表的ui渲染，就得到一个完整的日历了
三.左右切换月份
左右切换月份其实很简单,朝左切换就是当前月减一个月，超右切换就是当前月加一个，moment.js都有相对应的api，问chatgpt就对了，可以写出以下代码
if (item == 'left') {
const now = moment(this.selectDate)
const previousMonth = now.subtract(1, 'month')
this.selectDate = previousMonth.format('YYYY-MM')
this.caculateMonth()
} else {
const now = moment(this.selectDate)
const nextMonth = now.add(1, 'month')
this.selectDate = nextMonth.format('YYYY-MM')
this.caculateMonth()
2.根据当月例假预测当月的数据
从需求我们可以到我们需要标记每个月的月经期，预测期，易孕期，排卵日，而每个状态都处于不同的天数，所以我们可以用一个status不同的值来区分不同的周期，标记不同的颜色，数据设计为以下
tips: [
{
color: '#FFEEC2',
text: '月经期' //1
},
{
color: '#CFFFED',
text: '预测期' //2
},
{
color: '#FFE0FC',
text: '易孕期' //3
},
{
color: '#E8F1FF',
text: '排卵日' //5
}
],
所以我们的需求简化为计算出需要标记的几个数组并在月份数组中遍历更新状态即可。
一.月经期
这个我们只要点击某一天后，再点击下面标签切换状态为大姨妈来了，我们默认为这一天为第一天来姨妈，加上设置的经期长度（默认为6）得到月经期数组，当然真实情况是后台会把姨妈结束的天数返回，我们可以得到以下函数
getDiffDay(start, end) {
const startDate = moment(start)
const endDate = moment(end)
const daysDiff = endDate.diff(startDate, 'days')
const currentDateArr = []
for (let i = 0; i <= daysDiff; i++) {
currentDateArr.push(
moment(startDate)
.add(i, 'days')
.format('YYYY-MM-DD')
)
}
return currentDateArr
},
二.预测期
在月经期的基础上加上周期长度(默认为28）,这里只能渲染出当月的预测期
三.排卵日
是下个周期开始的天数减上14天，利用moment.js也很容易得出
四.易孕日
是排卵日前4后5，这个只要有排卵日，易孕的数组也很容易得出
3.切换月份，预测下月数据
首先根据需求，当前月之前只做记录，当前月之后才做预测，当我们点击下月时,我们给一个设置一个全局变量index加1，点击上月时全局变量index减1,根据index的变化我们很很容易计算出下个月我们需要的几个周期的数组，然后和当前月份进行遍历渲染。
4.经期长度，周期长度的设置等等
这个不用赘述，为了应用的完整性而已。
总结：写完了应用的逻辑，我写一个chatgpt在布局帮我的案例
我在写这个天数布局时想把7天横向排列，每天一样宽，于是我这样发问
但是我发现的元素是28-31个，写flex-grow:1就会把所有的元素拍成一行，如果写flex-wrap:wrap,又不知道在哪里该换行，于是我又问chatgpt
得到来我想要的答案flex-basic:calc(100%/7),chatgpt厉害的就是可以根据上下文修正回答，真是佩服
本文正在参加 ✍🏻 技术视角深入 ChatGPT 征文活动
