javascript实现考勤日历功能


Posted in Javascript onNovember 29, 2018

简介

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

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 < mds)
  showCurrentDate();
 }

 function createLine(num, type) {
  var newDiv = document.createElement("div");
  for (var i = 0; i <= num; i++, index++) {
   var span = document.createElement("span");
   var span_text = document.createTextNode(index + 1);
   //单个日期元素的操作
   if (attendances && attendances.length > 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

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="div_calendar_title"><h1>自定义日历</h1></div>
<div id="calendar_div" class="div_calendar">
</div>
<script src="script/attendanceCalendar.js"></script>
</body>
</html>

示例演示:

javascript实现考勤日历功能

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

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

Javascript 相关文章推荐
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)
Jul 04 Javascript
深入理解JavaScript是如何实现继承的
Dec 12 Javascript
JavaScript中通过prototype属性共享属性和方法的技巧实例
Mar 13 Javascript
浅谈Jquery核心函数
Jun 18 Javascript
JS组件Bootstrap Table使用实例分享
May 30 Javascript
Radio 单选JS动态添加的选项onchange事件无效的解决方法
Dec 12 Javascript
jquery 实时监听输入框值变化的完美方法(必看)
Jan 26 Javascript
jQuery Ajax全解析
Feb 13 Javascript
JS按条件 serialize() 对应标签的使用方法
Jul 24 Javascript
vue实现裁切图片同时实现放大、缩小、旋转功能
Mar 02 Javascript
如何在现代JavaScript中编写异步任务
Jan 31 Javascript
几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍
Mar 17 Javascript
vsCode安装使用教程和插件安装方法
Aug 24 #Javascript
vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单
Nov 29 #Javascript
简述vue路由打开一个新的窗口的方法
Nov 29 #Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
Nov 29 #Javascript
浅析Proxy可以优化vue的数据监听机制问题及实现思路
Nov 29 #Javascript
vue实现双向绑定和依赖收集遇到的坑
Nov 29 #Javascript
js中this的指向问题归纳总结
Nov 28 #Javascript
You might like
第1次亲密接触PHP5(1)
2006/10/09 PHP
PHP缓存技术的多种方法小结
2012/08/14 PHP
一个简单的php加密解密函数(动态加密)
2013/06/19 PHP
php基于base64解码图片与加密图片还原实例
2014/11/03 PHP
php实现mysql数据库分表分段备份
2015/06/18 PHP
js表数据排序 sort table data
2009/02/18 Javascript
基于jquery的一个简单的脚本验证插件
2010/04/05 Javascript
jQuery 追加元素的方法如append、prepend、before
2014/01/16 Javascript
通过隐藏iframe实现文件下载的js方法介绍
2014/02/26 Javascript
jquery操作select大全
2014/04/25 Javascript
对js关键字命名的疑问介绍
2014/04/25 Javascript
浅析JavaScript事件和方法
2015/02/28 Javascript
jQuery支持动态参数将函数绑定到事件上的方法
2015/03/17 Javascript
AngularJS实现Model缓存的方式
2016/02/03 Javascript
jQuery.ajax向后台传递数组问题的解决方法
2017/05/12 jQuery
关于meta viewport中target-densitydpi属性详解(推荐)
2017/08/18 Javascript
基于百度地图api清除指定覆盖物(Overlay)的方法
2018/01/26 Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
2018/10/10 Javascript
JavaScript实现网页tab栏效果制作
2020/11/20 Javascript
python使用webbrowser浏览指定url的方法
2015/04/04 Python
Python画图学习入门教程
2016/07/01 Python
Python迭代器定义与简单用法分析
2018/04/30 Python
Python中使用Counter进行字典创建以及key数量统计的方法
2018/07/06 Python
Python中作用域的深入讲解
2018/12/10 Python
Python3实现的简单工资管理系统示例
2019/03/12 Python
Python 网络编程之TCP客户端/服务端功能示例【基于socket套接字】
2019/10/12 Python
Python异常处理机制结构实例解析
2020/07/23 Python
CSS3制作炫酷带方向感应的鼠标滑过图片3D动画
2016/03/16 HTML / CSS
Why we need EJB
2016/10/20 面试题
主持词开场白
2014/03/17 职场文书
小学生操行评语
2014/04/22 职场文书
病媒生物防治方案
2014/05/13 职场文书
感谢信模板大全
2015/01/23 职场文书
2015年上半年党建工作总结
2015/03/30 职场文书
感谢信
2019/04/11 职场文书
从原生JavaScript到React深入理解
2022/07/23 Javascript