js写的一个简单的时间范围日历

• 该日历主要是提供一个思路，用以抛砖引玉

• 该日历从移动端更改而来，所以看着会比较小

• 日历中基于flex布局，全部使用div模拟 table 来实现，没有用 table 来布局

• 日历的周次列是固定的，这是基于自己需求来设定的，如果有别的需求，可以按需修改

  

• css 代码

  .school-calendar {
        display: flex;
        flex-flow: column nowrap;
        width: 375px;
        height: 600px;
      }
  
      .school-calendar .calendar-table {
        background-color: #fff;
        flex: auto;
        overflow-y: auto;
      }
  
      .school-calendar .calendar-table .thead {
        background-color: #f1f3f6;
        color: #666;
        position: sticky;
        line-height: 35px;
        top: 0;
      }
  
      .school-calendar .calendar-table .thead .tr {
        display: flex;
        flex-flow: row wrap;
      }
  
      .school-calendar .calendar-table .thead .tr>div {
        padding: 5px 0;
        height: 45px;
        text-align: center;
        border-bottom: 1px solid #d9dce0;
        width: calc((100% - 51px) / 7);
      }
  
      .school-calendar .calendar-table .thead .tr>div:first-child {
        width: 51px;
      }
  
      .school-calendar .calendar-table .tbody .tr {
        display: flex;
        flex-flow: row wrap;
      }
  
      .school-calendar .calendar-table .tbody .tr .week-num,
      .school-calendar .calendar-table .tbody .tr .week-list>div {
        padding: 5px 0;
        height: 45px;
        text-align: center;
        border-bottom: 1px solid #d9dce0;
        width: calc(100% / 7);
        box-sizing: border-box;
      }
  
      .school-calendar .calendar-table .tbody .tr .week-num {
        width: 51px;
        background-color: #f1f3f6;
        color: #666;
        line-height: 35px;
      }
  
      .school-calendar .calendar-table .tbody .tr .week-list {
        display: flex;
        flex-flow: row wrap;
        width: calc(100% - 51px);
      }
  
      .school-calendar .calendar-table .tbody .tr .week-list>div {
        border-left: 1px solid #d9dce0;
      }
  
      .school-calendar .calendar-table .tbody .tr .week-list>div>p.today {
        color: #fff;
        background-color: #1574df;
        padding: 4px;
        border-radius: 4px;
        margin-top: -4px;
      }
  
      .school-calendar .calendar-table .tbody .tr:last-child>.week-num,
      .school-calendar .calendar-table .tbody .tr:last-child>.week-list>div {
        border-bottom: none;
      }
  

• html 代码

    <div class="school-calendar">
      <div class="calendar-table">
        <div class="thead">
          <div class="tr">
            <div>周</div>
            <div>日</div>
            <div>一</div>
            <div>二</div>
            <div>三</div>
            <div>四</div>
            <div>五</div>
            <div>六</div>
          </div>
        </div>
        <div class="tbody">
  
        </div>
      </div>
    </div>
  

• javascript 代码

    /* 格式化时间 */
    function dateFormat(date, fmt) {
      const o = {
        'M+': date.getMonth() + 1, // 月份
        'd+': date.getDate(), // 日
        'h+': date.getHours() % 12 === 0 ? 12 : date.getHours() % 12, // 小时
        'H+': date.getHours(), // 小时
        'm+': date.getMinutes(), // 分
        's+': date.getSeconds(), // 秒
        'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
        S: date.getMilliseconds() // 毫秒
      };
      const week = {
        0: '日',
        1: '一',
        2: '二',
        3: '三',
        4: '四',
        5: '五',
        6: '六'
      };
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
      }
      if (/(E+)/.test(fmt)) {
        fmt = fmt.replace(
          RegExp.$1,
          (RegExp.$1.length > 1 ? (RegExp.$1.length > 2 ? '星期' : '周') : '') + week[date.getDay() + '']
        );
      }
      for (const k in o) {
        if (new RegExp('(' + k + ')').test(fmt)) {
          fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length));
        }
      }
      return fmt;
    }
  
    /* 返回开始时间与结束时间中的每一天 */
    function formatEveryDay(startDate, endDate, showYear, fmt) {
      showYear = showYear === undefined ? true : showYear;
      fmt = fmt === undefined ? (showYear ? 'yyyy-MM-dd' : 'MM-dd') : fmt;
      const dateList = [];
      const startTime = new Date(startDate);
      const endTime = new Date(endDate);
  
      while (endTime.getTime() - startTime.getTime() >= 0) {
        dateList.push(dateFormat(startTime, fmt));
        startTime.setDate(startTime.getDate() + 1);
      }
      return dateList;
    }
  
    /* 获取该日期的详细数据 */
    function getDayInfoByDate(date, startDate) {
      const dayObj = {};
  
      if (date) {
        const dateTime = new Date(date);
        const day = dateTime.getDate();
        const startDayOfSemester = startDate ? date === startDate : false;
        const dayArr = date.split('-');
        const lastDayOfMonth = dayArr.length === 3 ? new Date(dayArr[0], dayArr[1], 0).getDate() : false;
        const isLastDayOfMonth = lastDayOfMonth === day; // 即是本月的第一天又是本月的最后一天
        const isNewMonth = day === 1 || startDayOfSemester;
        dayObj['dateText'] = date;
        dayObj['day'] = day;
        dayObj['dayText'] = isNewMonth ? dateTime.getMonth() + 1 + '月' + (isLastDayOfMonth ? day : '') : day;
        dayObj['newMonth'] = isNewMonth;
        dayObj['startDayOfSemester'] = startDayOfSemester;
        dayObj['week'] = dateTime.getDay();
      }
  
      return dayObj;
    }
  
    const startDate = '2022-12-31'; //日历开始时间
    const endDate = '2023-08-23'; //日历结束时间
    const today = dateFormat(new Date(), 'yyyy-MM-dd');
    const days = formatEveryDay(startDate, endDate); // 开始时间与结束时间之间的每一天
    const weeks = []; // 存储所有周
    let tempWeeks = [];
  
    days.forEach((day, index) => {
      const dayInfo = this.getDayInfoByDate(day, startDate);
    
      if (dayInfo.newMonth) {
        // 学期开始与月的第一天是周日的情况下不需要填充空格
        const dayNum = dayInfo.startDayOfSemester || (dayInfo.newMonth && dayInfo.week === 0) ? dayInfo.week : 7;
        for (let j = 0; j < dayNum; j++) {
          tempWeeks.push(this.getDayInfoByDate());
        }
      }
  
      tempWeeks.push(dayInfo);
     
      const end = index + 1 === days.length;
      if (dayInfo.week === 6 || end) {
        if (end) {
          // tempWeeks.length > 7，说明同一个教学周是两行，需要在最后一个日期的后边填充空格
          const endWeekNum = tempWeeks.length > 7 ? 14 - tempWeeks.length : 7 - tempWeeks.length;
          for (var i = 0; i < endWeekNum; i++) {
            tempWeeks.push(this.getDayInfoByDate());
          }
        }
        weeks.push(tempWeeks);
        tempWeeks = [];
      }
    });
  
    let domStr = '';
    weeks.forEach((week, index) => {
      let dayEl = '';
  
      week.forEach((dayObj) => {
        dayEl += ` <div>
            ${dayObj.dateText === today ? '<p class="today">今</p>' : dayObj.dayText ? dayObj.dayText : ''}
          </div>`;
      });
  
      domStr += `
    <div class="tr">
        <div style="${week.length > 7 ? 'height: 90px;line-height: 80px;' : ''}" class="week-num">
          ${index + 1}
        </div>
        <div class="week-list">
         ${dayEl}
        </div>
      </div>`;
    });
  
    document.querySelector('.school-calendar .tbody').innerHTML = domStr;