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 相关文章推荐
javascript之更有效率的字符串替换
Aug 02 Javascript
javascript优先加载笔记代码
Sep 30 Javascript
js获取html参数及向swf传递参数应用介绍
Feb 18 Javascript
js实现精美的图片跟随鼠标效果实例
May 16 Javascript
jquery中toggle函数交替使用问题
Jun 22 Javascript
微信小程序 Nginx环境配置详细介绍
Feb 14 Javascript
AngularJS执行流程详解
Feb 17 Javascript
Angular JS 生成动态二维码的方法
Feb 23 Javascript
详解js正则表达式验证时间格式xxxx-xx-xx形式
Feb 09 Javascript
基于vue2.0实现仿百度前端分页效果附实现代码
Oct 30 Javascript
vue+springboot图片上传和显示的示例代码
Feb 14 Javascript
ant design charts 获取后端接口数据展示
May 25 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
Netflix将与CLAMP、乙一以及冲方丁等6名知名制作人合伙展开原创动画计划!
2020/03/06 日漫
window+nginx+php环境配置 附配置搭配说明
2010/12/29 PHP
php源代码安装常见错误与解决办法分享
2013/05/28 PHP
使用Discuz关键词服务器实现PHP中文分词
2014/03/11 PHP
PHP结合JQueryJcrop实现图片裁切实例详解
2014/07/24 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
php数组遍历类与用法示例
2019/05/24 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
2006/12/22 Javascript
Prototype源码浅析 String部分(一)之有关indexOf优化
2012/01/15 Javascript
JavaScript简单判断复选框是否选中及取出值的方法
2015/08/13 Javascript
jQuery中trigger()与bind()用法分析
2015/12/18 Javascript
jQuery通过ajax快速批量提交表单数据
2016/10/25 Javascript
js仿拉勾网首页穿墙广告效果
2017/03/08 Javascript
es6学习笔记之Async函数的使用示例
2017/05/11 Javascript
JS随机排序数组实现方法分析
2017/10/11 Javascript
vue 2.0 购物车小球抛物线的示例代码
2018/02/01 Javascript
JS module的导出和导入的实现代码
2019/02/25 Javascript
jQuery+ajax实现用户登录验证
2020/09/13 jQuery
[41:17]VG vs Optic 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Linux下使用python自动修改本机网关代码分享
2015/05/21 Python
Django中传递参数到URLconf的视图函数中的方法
2015/07/18 Python
python字符串的拼接方法总结
2019/11/18 Python
pytorch梯度剪裁方式
2020/02/04 Python
python合并多个excel文件的示例
2020/09/23 Python
寻找完美的房车租赁:RVShare
2019/02/23 全球购物
法国一家多品牌成衣精品中/高档商店:Graduate Store
2019/08/28 全球购物
荷兰时尚精品店:Labels Fashion
2020/03/22 全球购物
医学生职业规划范文
2014/01/05 职场文书
英语专业学生个人求职信
2014/01/28 职场文书
《鸟岛》教学反思
2014/04/26 职场文书
初中英语演讲稿
2014/04/29 职场文书
教师业务培训方案
2014/05/01 职场文书
2014年车间工作总结
2014/11/21 职场文书
《坐井观天》教学反思
2016/02/18 职场文书
Nginx 安装SSL证书完成HTTPS部署
2022/04/28 Servers