首页 > 其他分享 >好看实用的日历插件

好看实用的日历插件

时间:2022-08-20 21:23:26浏览次数:51  
标签:插件 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

相关文章

  • 运动及运动封装、swiper插件
    运动概述运动主要是动画的操作,主要是操作某个document元素的属性变化(位置变化)运动主要的三步骤使用定时器来定时更改对应的内容实时获取对应的元素的属性及相关内容......
  • Nik Collection 5 for Mac(PS滤镜插件套装)中文版
    NikCollection5formac是一款功能强大的图片处理插件集,其包含了七款ps插件,功能涵盖修图、调色、降噪、胶片滤镜等方面。NikCollection作为很多摄影师和摄影爱好者所熟......
  • JQuery插件
    JQuery插件插件:增强JQuery的功能1.实现方式: 1.$.fn.extend(object)增强通过Jquery获取的对象的功能$("#id")HTML代码<!DOCTYPEhtml><html><head><me......
  • 插件开发手册 — 数据库
    wordpress数据库数据表详细解说完整的WordPress 数据库有12张数据表,如果还有其它相关的数据库,那可能不是WordPress 自带的数据表,而可能是某些主题或插件需要而创建的......
  • 适用于ps的Raw格式图像插件
    AdobeCameraRaw14中文版是适用于ps的Raw格式图像插件,安装上CameraRaw插件能在PS中打开编辑RAW格式文件,可以说是专业摄影师必备工具。目前AdobeCameraRaw中文版已经支......
  • JQuery案例和插件机制
    案例—广告显示和隐藏需求:1、当页面加载完,3秒后。自动显示广告2、广告显示5秒后,自动消失分析:1、使用定时器来完成,setTimeout(执行一次定时器)2、分析......
  • Jquery插件机制
    插件:增强JQuery的功能实现方式:$.fn.extend(object)增强通过JQuery获取的对象的功能$("#id")$.extend(object)增强JQuery对象自身的功能$/JQuery<!DOCTY......
  • mybatis分页插件
    添加依赖<!--https://mvnrepository.com/artifact/com.github.pagehelper/pagehelper--><dependency>  <groupId>com.github.pagehelper</groupId>  <artifa......
  • JQuery插件机制
    JQuery插件机制插件:增强JQuery的功能 1.实现方式: 1.$.fn.extend(object)  (对象) 增强通过JQuery获取的对象的功能 $("#id") 2......
  • java8中的lambda表达式实用详解
    java8中的lambda表达式实用详解1.lambda简介​ Lambda表达式(lambdaexpression)是一个匿名函数,Lambda表达式基于数学中的λ演算得名,直接对应于其中的lambda抽象(lambda......