好看实用的日历插件

标签：插件 console log 日历 list 实用 let date calendarDate

我在工作中，前端老大哥给了我个需求，让我完成个样式精美的日历，并且确定每天打卡情况，然后完成之后说是日历太丑了，我然后我去网上找了找好看的，，最后在b站上看到一个，样式确实不错，这位up主将代码开源了， https://github.com/CiroLee/html_css_javascript，感兴趣的可以去看看

这个日历确实包含寻常日历功能，然后我加了个打卡的功能，也算减少了一点工作量

这里为了方便我用了dayjs方便

function getRecord(date = new Date(), create = false) {
  console.log('vm.userinfo.userid', vm.userinfo.userid);
  let list = [];
  let searchMonth = dayjs(date).format('YYYY-MM')
  console.log('searchMonth', searchMonth);
  $.ajax({
    type: 'GET',
　　 // 这个地址是根据当月来确定
    url: `https://m.jxmf.com.cn/v3/index.php?c=App_Xxlj&m=calendarList&userid=${vm.userinfo.userid}&month=` + searchMonth,
    dataType: 'json',
    // jsonpCallback:'callback',
    timeout: 10000,
    context: $('body'),
    success: function (res) {
      console.log('calendaar_resmonthList', res)
      res.data.map((item, index) => {
        list.push(item.wekday)
      })
      console.log(list)
      let calendarDate = $('.date-num')
      for (var i = 0; i < calendarDate.length; i++) {
        calendarDate[i].classList.remove('signIn')
        for (var j = 0; j < list.length; j++) {
          let date2 = $(calendarDate[i]).attr('date')
          let month = dayjs(date2).format('MM')
          let day = dayjs(date2).format('DD')
          if (day == list[j].substr(6, 2)) {
            // console.log(document.getElementById('title2').innerText.substr(6, 2) - 1);
            calendarDate[i].classList.add('signIn')
            console.log(document.getElementById('title2').innerText.substring(5, 7));
            if (month != list[j].substr(4, 2)) {
              calendarDate[i].classList.remove('signIn')
            }
          }
        }
      }
    },
    error: function (xhr, type) {
      console.log('Ajax error!')
    }
  });
  renderCalendar(date, create);
  console.log(date);
}

用的时候挂载后 使用即可，如果是需要判断不同的人打卡情况，获取用户信息的时候加上 getRecord(date = new Date(), true) 即可

上面的  calendarDate[i].classList.add('signIn') 就是这个选中的样式了，

至于加什么样式，需要什么样式就看自己的需求了

最后，确实感谢这位b站的up主

标签：插件,console,log,日历,list,实用,let,date,calendarDate
From： https://www.cnblogs.com/huangjunhua/p/16608636.html