原生js手搓日历组件

思路

1.明确知道每月多少天

2.每天对应星期几

3.怎么切换上下月份

先看效果

one：首先定义一个HTML

<div class="calendar">
    <!-- 存放头部用于切换上下月 -->
    <div id="calendar-title"></div>
    <!-- 日历表格table布局 -->
    <div id="calendar-container"></div>
 </div>

tow：再定义css

.calendar{
    margin-top:3%;
    height: auto;
    background-color: #fff;
  }

  table {
    width: 30%;
  }
  th, td {
    text-align:center;
    border: 1px solid #b9b9b9;
  }

  .rilititle{
    width: 30%;
    display: flex;
    justify-content:space-around;
    padding-bottom:5px;
    padding-top:5px;
  }

  
  .bghuicolor{
    height: 30px;
  }

 

  .calendar-bottom{
    width: 100%;
    display: flex;
    justify-content:space-around;
    color: #b9b9b9;
    margin-top: 10px;
    margin-bottom:10px;
  }

three：最后再定义js

1.日历有两种情况，1是默认日期是多少，2是上下月调整是多少

  //进入日历方法
  calendar();

  //日历切换日期
  function calendar(year, month) {
    if (year && month) {
      let calendarHTML = '<div class="rilititle">';
      calendarHTML += `<div onclick='upmonth(${year},${month})'>上月</div><div>${year}年${month}月</div><div onclick='downmonth(${year},${month})'>下月</div>`
      calendarHTML += `</div>`
      document.getElementById('calendar-title').innerHTML = calendarHTML
      drawCalendar(year, month);
    } else {
      //进入日历默认日期
      const currentDate = new Date();
      const yearding = currentDate.getFullYear();
      const monthding = currentDate.getMonth() + 1;
      let calendarHTML = '<div class="rilititle">';
      calendarHTML += `<div onclick='upmonth(${yearding},${monthding})'>上月</div><div>${yearding}年${monthding}月</div><div onclick='downmonth(${yearding},${monthding})'>下月</div>`
      calendarHTML += `</div>`
      document.getElementById('calendar-title').innerHTML = calendarHTML
      drawCalendar(yearding, monthding);
    }
  }

2.然后在月份下面渲染table表格

   //日历
   function drawCalendar(year, month,sortedDatanum) {
    //本月天数
    const daysInMonth = new Date(year, month, 0).getDate();
    //周几
    const startDay = new Date(year, month - 1, 1).getDay();
    //当前日期
    const currentDate = new Date();
    const yearding = currentDate.getFullYear();
    const monthding = currentDate.getMonth() + 1;
    let calendarHTML = '<table>';
    calendarHTML += '<tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>';
    for (let i = 0; i < startDay; i++) {
      calendarHTML += '<td></td>';
    }
  
    for (let day = 1; day <= daysInMonth; day++) {
      if ((day + startDay) % 7 === 0) {
            calendarHTML += '<td class="bghuicolor">' + day + '</td></tr>';
        } else {
            calendarHTML += '<td class="bghuicolor">' + day + '</td>';
        }
    }
    calendarHTML += '</tr></table>';
    document.getElementById('calendar-container').innerHTML = calendarHTML;
  }

3.上下月份方法加入

//上个月
   function upmonth(year, month) {
    if (month == 1) {
      calendar(year - 1, 12)
    } else {
      calendar(year, month - 1)
    }
  }
  //下个月
  function downmonth(year, month) {
    if (month == 12) {
      calendar(year + 1, 1)
    } else {
      calendar(year, month + 1)
    }
  }

4.完整js代码

<script>
  //进入日历方法
  calendar();

  //日历切换日期
  function calendar(year, month) {
    if (year && month) {
      let calendarHTML = '<div class="rilititle">';
      calendarHTML += `<div onclick='upmonth(${year},${month})'>上月</div><div>${year}年${month}月</div><div onclick='downmonth(${year},${month})'>下月</div>`
      calendarHTML += `</div>`
      document.getElementById('calendar-title').innerHTML = calendarHTML
      drawCalendar(year, month);
    } else {
      //进入日历默认日期
      const currentDate = new Date();
      const yearding = currentDate.getFullYear();
      const monthding = currentDate.getMonth() + 1;
      let calendarHTML = '<div class="rilititle">';
      calendarHTML += `<div onclick='upmonth(${yearding},${monthding})'>上月</div><div>${yearding}年${monthding}月</div><div onclick='downmonth(${yearding},${monthding})'>下月</div>`
      calendarHTML += `</div>`
      document.getElementById('calendar-title').innerHTML = calendarHTML
      drawCalendar(yearding, monthding);
    }
  }
   //上个月
   function upmonth(year, month) {
    if (month == 1) {
      calendar(year - 1, 12)
    } else {
      calendar(year, month - 1)
    }
  }
  //下个月
  function downmonth(year, month) {
    if (month == 12) {
      calendar(year + 1, 1)
    } else {
      calendar(year, month + 1)
    }
  }

   //日历
   function drawCalendar(year, month,sortedDatanum) {
    //本月天数
    const daysInMonth = new Date(year, month, 0).getDate();
    //周几
    const startDay = new Date(year, month - 1, 1).getDay();
    //当前日期
    const currentDate = new Date();
    const yearding = currentDate.getFullYear();
    const monthding = currentDate.getMonth() + 1;
    let calendarHTML = '<table>';
    calendarHTML += '<tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>';
    for (let i = 0; i < startDay; i++) {
      calendarHTML += '<td></td>';
    }
  
    for (let day = 1; day <= daysInMonth; day++) {
      if ((day + startDay) % 7 === 0) {
            calendarHTML += '<td class="bghuicolor">' + day + '</td></tr>';
        } else {
            calendarHTML += '<td class="bghuicolor">' + day + '</td>';
        }
    }
    calendarHTML += '</tr></table>';
    document.getElementById('calendar-container').innerHTML = calendarHTML;
  }
 </script>

5.再改改样式，修改一下事件