热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

javascript实现考勤日历功能

这篇文章主要为大家详细介绍了javascript实现考勤日历功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

简介

用过一些开源的日历,但对于自定义去绑定数据在日历元素中却不是很方便,由于工作需要用到考勤日历,考虑到日历的实现也不是特别麻烦,于是自己弄了一个,样式比较简单,需要的可以自己去扩展。使用的时候绑定获取数据的方法即可,在这个日历中我没有直接添加选择月份。各位有兴趣可以自己扩展,已预留设置日期的方法。自定义去扩展的时候注意保证原有的代码结构不变,增加一些方法即可,下面直接上源码了,就三个文件。

attendanceCalendar.js

代码已更新多次,请直接上github下载,链接

修复 第一行日期数量计算 bug,修改了以下的方法

 function initCalendarBody() {
  $cOntent= document.createElement("div");
  addClass($content, "div_calendar_body");
  $elem.appendChild($content);
  addCalendarHead();

  //日期计算bug,例:2017-01
  var num = 0;
  do {
   var length = 0;
   if (num == 0) {
    //出星期天外,星期数(1~6)和第一行显示的日期数(7~2),相加的结果都为8
    length = firstWeekDay == 0 ? 1 : 8 - firstWeekDay;
    num = length;
    createLine(length - 1, 1);
   }
   else {
    var length = mds - num > 6 ? 7 : mds - num;
    num = num + length;
    createLine(length - 1);
   }
  }
  while (num  0) {
    bindAttendance(span, attendances[index]);
   }
   span.appendChild(span_text);
   newDiv.appendChild(span);
  }
  if (type == 1) {
   addClass(newDiv, "first_div")
  }
  else {
   addClass(newDiv, "last_div")
  }
  $content.appendChild(newDiv);
 }

css部分,日期元素主要用了三种颜色表示

.div_calendar {
 width: 450px;
 margin: 0 auto;
 text-align: center;
 display: -webkit-box;
}

/** 日历标题 */
.div_calendar_title {
 width: 450px;
 margin: 0 auto;
 text-align: center;
}

/** 日历主体 */
.div_calendar_body {
 width: 350px;
 text-align: center;
}

/** 日元素 */
.div_calendar span {
 width: 50px;
 display: inline-block;
 text-align: center;
 line-height: 50px;
}

/** 正常 */
.div_calendar span.normal {
 color: blue;
}

/** 迟到 */
.div_calendar span.late {
 color: red;
}

/** 缺勤 */
.div_calendar span.absense {
 color: #666;
}

/** 缺勤 */
.div_calendar span.today {
 border-radius: 50%;
 background: cornflowerblue;
}

/** 日历第一行日期 */
.div_calendar .first_div {
 text-align: right;
}

/** 日历末行日期 */
.div_calendar .last_div {
 text-align: left;
}

/** 日期显示div */
.div_calendar .div_currentDate {
 text-align: right;
}

.div_calendar .changeDate {
 cursor: pointer;
}

.div_calendar .div_currentDate span {
 width: inherit;
}

.div_calendar .div_currentDate span em {
 margin: 5px;
}

calendar.html




 
 
 


自定义日历

示例演示:

代码已更新多次,请直接上github下载,链接

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。


推荐阅读
  • Java验证码——kaptcha的使用配置及样式
    本文介绍了如何使用kaptcha库来实现Java验证码的配置和样式设置,包括pom.xml的依赖配置和web.xml中servlet的配置。 ... [详细]
  • 为什么三角形与菜单背景的颜色不同? - Why is the triangle a different colour shade to the menu background?
    Imnotunderstandingastowhythetrianglewhichappearswhenthemousehoversoverthemenuitem, ... [详细]
  • 之前我曾经写过一篇关于CSS的border-image属性的文章。现在几乎所有的现代浏览器都支持这个属性——除了IE10及以下IE版本。看起来这是一个非常 ... [详细]
  • EPICS Archiver Appliance存储waveform记录的尝试及资源需求分析
    本文介绍了EPICS Archiver Appliance存储waveform记录的尝试过程,并分析了其所需的资源容量。通过解决错误提示和调整内存大小,成功存储了波形数据。然后,讨论了储存环逐束团信号的意义,以及通过记录多圈的束团信号进行参数分析的可能性。波形数据的存储需求巨大,每天需要近250G,一年需要90T。然而,储存环逐束团信号具有重要意义,可以揭示出每个束团的纵向振荡频率和模式。 ... [详细]
  • Mac OS 升级到11.2.2 Eclipse打不开了,报错Failed to create the Java Virtual Machine
    本文介绍了在Mac OS升级到11.2.2版本后,使用Eclipse打开时出现报错Failed to create the Java Virtual Machine的问题,并提供了解决方法。 ... [详细]
  • 在说Hibernate映射前,我们先来了解下对象关系映射ORM。ORM的实现思想就是将关系数据库中表的数据映射成对象,以对象的形式展现。这样开发人员就可以把对数据库的操作转化为对 ... [详细]
  • 本文介绍了在SpringBoot中集成thymeleaf前端模版的配置步骤,包括在application.properties配置文件中添加thymeleaf的配置信息,引入thymeleaf的jar包,以及创建PageController并添加index方法。 ... [详细]
  • 知识图谱——机器大脑中的知识库
    本文介绍了知识图谱在机器大脑中的应用,以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例,说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案,如搜索关键词"Marie Curie",会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革,不仅美国的微软必应,中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]
  • 本文讲述了作者通过点火测试男友的性格和承受能力,以考验婚姻问题。作者故意不安慰男友并再次点火,观察他的反应。这个行为是善意的玩人,旨在了解男友的性格和避免婚姻问题。 ... [详细]
  • 本文详细介绍了Linux中进程控制块PCBtask_struct结构体的结构和作用,包括进程状态、进程号、待处理信号、进程地址空间、调度标志、锁深度、基本时间片、调度策略以及内存管理信息等方面的内容。阅读本文可以更加深入地了解Linux进程管理的原理和机制。 ... [详细]
  • Voicewo在线语音识别转换jQuery插件的特点和示例
    本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
  • 1,关于死锁的理解死锁,我们可以简单的理解为是两个线程同时使用同一资源,两个线程又得不到相应的资源而造成永无相互等待的情况。 2,模拟死锁背景介绍:我们创建一个朋友 ... [详细]
  • 后台获取视图对应的字符串
    1.帮助类后台获取视图对应的字符串publicclassViewHelper{将View输出为字符串(注:不会执行对应的ac ... [详细]
  • 《数据结构》学习笔记3——串匹配算法性能评估
    本文主要讨论串匹配算法的性能评估,包括模式匹配、字符种类数量、算法复杂度等内容。通过借助C++中的头文件和库,可以实现对串的匹配操作。其中蛮力算法的复杂度为O(m*n),通过随机取出长度为m的子串作为模式P,在文本T中进行匹配,统计平均复杂度。对于成功和失败的匹配分别进行测试,分析其平均复杂度。详情请参考相关学习资源。 ... [详细]
  • 本文介绍了通过ABAP开发往外网发邮件的需求,并提供了配置和代码整理的资料。其中包括了配置SAP邮件服务器的步骤和ABAP写发送邮件代码的过程。通过RZ10配置参数和icm/server_port_1的设定,可以实现向Sap User和外部邮件发送邮件的功能。希望对需要的开发人员有帮助。摘要长度:184字。 ... [详细]
author-avatar
ranger
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有