小程序日历组件的简单实现

一、需求

• 显示当前月份的日期
• 日期与星期对应

二、实现

1、布局结构

2、布局实现

• container：用固定的宽高，宽度可以占满整个屏幕(100vw)
• header：高度固定，宽度继承，布局使用flex，字体居中，行高=高度；适当修饰：字体size，padding…
  • left：布局flex=0.5
  • right：布局flex=0.5
  • middle：布局flex=2
• panel：高度固定，宽度继承，布局使用flex，字体居中，行高=高度；适当修饰：字体size，padding…
  • day_item：布局flex=1
  • 此处用wx:for来遍历一个数组：day: [‘日’, ‘一’, ‘二’, ‘三’, ‘四’, ‘五’, ‘六’],
• cal_body：宽度高度可以不设置，让内容将撑开，布局：flex，拆行：flex-wrap:wrap; 字体居中， 适当修饰：字体size，padding…
  • date_item：
    • 此处用wx:for来遍历一个日期数组来实现，有多少天就有多少个date_item
    • 固定宽高：
      • 具体宽度计算：宽 = （cal_body.width - 左右padding - 左右margin）/ 7
      • 具体高度计算：高 = 自己定，瞎几把调就好了，我定了50rpx

3、逻辑

• 3.1、通过布局结构图可以知道：

  • 正常情况：
    • 天数=30天，占了：5行，30个date_item，一个元素个数=30的数组
  • 第一种极端情况：
    • 月份天数最多31天，该月1日是星期六，占了：6行，37个date_item，一个元素个数=37的数组
  • 第二种极端情况：
    • 二月份28天，且 2月1日是星期日，占了：4行，28个date_item，一个元素个数=28的数组
  • 之所以不计算月份末尾的【空】date_item的数量，是因为不影响渲染。
  • 以上的信息仅供参考
    

• 3.2、存储日期的数组的形成

  • 首先，该数组一定包含当前月份的所有天数
  • 其次，该月的1号要与正确的星期几对应

• 3.3、拆分数组的想法

  • 假设当前月份的1号是星期六，对应我的布局结构图，1号前面还有6个空位（日、一、二…）需要补足
    • 那么就需要一个补足部分
  • 由于月份天数从1开始，那么补足部分就用 0 来填充
  • 假设当前月份的1号是星期日，对应我的布局结构图，1号前面不需要补足，那么此时需要进行判断

4、逻辑的实现

• 获取当前年、月：

  let year = new Date().getFullYear(); // 2021
  let month = new Date().getMonth(); // 4，这里是五月
  

• 获取当前月天数：

  let monthDay = new Date(year, month+1, 0).getDate(); // 注意这里用的是月份+1，也就是对应现实的月份数
  

• 获取当前月的1号是星期几：

  let firstDay = new Date(year, month, 1).getDay();
  
  // 扩展一下，获取当前月最后一天是星期几
  let lastDay = new Date(year, month, monthDay).getDay();
  

• 数组的前补足部分：

  // 定义一个空的前补足数组
  let fillDate = [];
  // 判断当前月份是否需要补足，（即：判断 当前月1号 = 星期日？）
  if(firstDay){
      for(let i = 0; i < firstDay; i++){
          // 往补足数组中填充 0
          fillDate.push(0);
      }
  }
  

• 数组的月份正常日期部分：

  // 正常日期填充
  let normalDate = []; 
  for (let j = 1; j <= monthDay; j++) {
      normalDate.push(j);
  }
  

• 扩展一下：如果想要月份后面的空间也用date_item补足，可以做数组的第三部分-后补足部分：

  // 定义一个空的后补足数组
  let backDate = [];
  if (lastDay != 6) {
  	for (let k = lastDay; k < 6; k++){
  		backDate.push(0);
  	}
  }
  

• 好了，现在：前补足数组，中间正常日期数组，后补足数组都准备好了。接下来就是拼接数组：

  • 注意：这里我是将后面的数组拼接到前补足数组后面

  // 后补足数组，按需进行concat()
  fillDate = fillDate.concat(normalDate) //.concat(backDate);
  
  // 此时我们就得到了一个符合我们布局排列的数组fillDate
  // 我们再对fillDate进行遍历，就可以了
  

5、渲染

• 数据渲染到页面上：两个红框，就是前补足和后补足