javascript考勤日历

简介

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

attendanceCalendar.js

代码已更新多次，请直接上github下载，链接：https://github.com/kent124454731/attendanceCalendar

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

    function initCalendarBody() {$content = document.createElement("div");addClass($content, "div_calendar_body");$elem.appendChild($content);addCalendarHead();//日期计算bug，例：2017-01var num = 0;do {var length = 0;if (num == 0) {//出星期天外，星期数(1~6)和第一行显示的日期数(7~2)，相加的结果都为8length = 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>

示例演示：

代码已更新多次，请直接上github下载，链接：https://github.com/kent124454731/attendanceCalendar

欢迎关注我的个人公众号：逍遥的心。主推程序员写的生活类文章，有兴趣的朋友可以共同探讨下：

javascript考勤日历相关推荐

Fullcalendar v5.5.1 设计一个考勤日历插件
前言最近公司HR项目新增一个考勤日历需求,发现Fullcalendar插件功能齐全,完美支持JQuery.Vue.React 和 Angular,支持TypeScript,开源,并托管在GitHub ...
非常不错的一款html5【404页面】,不含js脚本可以左右摆动,原生JavaScript实现日历功能代码实例(无引用Jq)...
这篇文章主要介绍了原生JavaScript实现日历功能代码实例(无引用Jq),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下成品显示,可左右切换月份 ...
用 JavaScript 编写日历
概述在本教程中,我将介绍使用几行 JavaScript 将日历渲染到网页上.日历将包括仅使用普通旧 JavaScript的月份和年份的下拉列表.流程如下: 将月份渲染到下拉列表中将年份渲染到下拉列 ...
android仿钉钉日程日历,Flutter仿钉钉考勤日历的示例代码
本文主要介绍了Flutter仿钉钉考勤日历的示例代码,分享给大家,具体如下: 效果原型开发 1. 使用 // 考勤日历 DatePickerDialog( initialDate: DateTim ...
android 钉钉考勤日历,Flutter仿钉钉考勤日历
作用原型开发运用 // 考勤日历 DatePickerDialog( initialDate: DateTime.now(), firstDate: DateTime(2020), lastDa ...
android 钉钉考勤日历,vue实现钉钉的考勤日历
本文实例为大家分享了vue实现钉钉的考勤日历的具体代码,供大家参考,具体内容如下直接上效果图,需要再往下看 GitHub地址:vue-calendar-component 由于需要对此组件的样式及功 ...
考勤日历 ajax,vue实现钉钉的考勤日历
本文实例为大家分享了vue实现钉钉的考勤日历的具体代码,供大家参考,具体内容如下直接上效果图,需要再往下看 GitHub地址:vue-calendar-component 由于需要对此组件的样式及功 ...
android 钉钉考勤日历,vue钉钉考勤日历 vue实现钉钉的考勤日历
想了解vue实现钉钉的考勤日历的相关内容吗,张张张立宏在本文为您仔细讲解vue钉钉考勤日历的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:vue钉钉考勤日历,vue钉钉考勤,vue考勤日历 ...
JavaScript编写日历（简单易懂，代码可以直接运行）
JavaScript编写日历(简单易懂,代码可以直接运行) 运行效果图如下: 点个

javascript考勤日历

简介

attendanceCalendar.js

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

calendar.html

javascript考勤日历相关推荐

最新文章

热门文章