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, endDate) {
    const dayObj = {}
  
    if (date) {
      const dateTime = new Date(date)
      const day = dateTime.getDate()
      const isStartDay = date === startDate
      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 || isStartDay
      dayObj['dateText'] = date // 年-月-日
      dayObj['day'] = day // 当前属于该月的第几天
      dayObj['dayText'] = isNewMonth ? dateTime.getMonth() + 1 + '月' + (isLastDayOfMonth ? day : '') : day // 日历中具体显示的文本
      dayObj['newMonth'] = isNewMonth  // 是否属于新的一个月
      dayObj['startDay'] = isStartDay  // 是否是该时间段的开始时间
      dayObj['week'] = dateTime.getDay() // 当前属于星期几，周日是0，周一是1
    }
  
    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 => {
    const dayInfo = this.getDayInfoByDate(day, startDate, endDate)
    if (dayInfo.newMonth) {
      // 学期开始与月的第一天是周日的情况下不需要填充空格
      const dayNum = dayInfo.startDay || (dayInfo.newMonth && dayInfo.week === 0) ? dayInfo.week : 7
      for (let j = 0; j < dayNum; j++) {
        tempWeeks.push(this.getDayInfoByDate())
      }
    }
  
    tempWeeks.push(dayInfo)
    if (dayInfo.week === 6) {
      weeks.push(tempWeeks)
      tempWeeks = []
    }
  })
  
  let domStr = ''
  weeks.forEach((week, index) => {
    let dayEl = ''
  
    week.forEach(dayObj => {
      dayEl += ` 
  
            ${dayObj.dateText === today ? '
  今
  ' : (dayObj.dayText ? dayObj.dayText : '')}
          `
    })
  
    domStr += `
    
  
        
  ${week.length > 7 ? 'height: 90px;line-height: 80px;' : ''}" class="week-num">
          ${index + 1}
        
        
  
         ${dayEl}
        
      `
  })
  
  document.querySelector('.tbody').innerHTML = domStr