javascript实现考勤日历功能

简介

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

attendanceCalendar.js

代码已更新多次，请直接上开源代码库下载，链接

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

函数initCalendarBody(){ $ content=document。create element(' div ')；addClass($content，' div _ calendar _ body ')；$ elem。append child($ content)；addCalendarHead()；//日期计算臭虫，例：2017-01 var num=0；do { var length=0；if (num==0) { //出星期天外，星期数(1~6)和第一行显示的日期数(7~2),相加的结果都为8长度=firstWeekDay==0？1 : 8-第一个工作日；数字=长度；createLine(长度- 1,1);} else { var length=mds - num 6？7 : MDS-纳姆；数字=数字长度；createLine(长度-1);} } while(num MDS)showCurrentDate()；}函数createLine(num，type){ var new div=document。创建元素(' div ')；for(var I=0；i=numI，index){ var span=document。创建元素(“span”)；var span _ text=文档。createtextnode(索引1);//单个日期元素的操作如果(出席者)。长度0){ BindCarsition(span，attendents[index])；} span。append child(span _ text)；新部门。append child(span)；} if (type==1) { addClass(newDiv，' first _ Div ')} else { AddClass(NewDiv，' last _ Div ')} $ content。append child(NewDiV)；}css部分，日期元素主要用了三种颜色表示。div _ calendar { width : 450 pxmargin : 0 auto文本对齐：中心；显示器：-网络套件-盒子；}/** 日历标题*/.div _ calendar _ title { width : 450 px；margin: 0自动文本对齐：中心；}/** 日历主体*/.div _ calendar _ body { width : 350 px；文本对齐：中心；}/** 日元素*/.div _ calendar span { width : 50px；显示器：内联块；文本对齐：中心；线高： 50px}/** 正常*/.div _日历跨度。正常{颜色：蓝色；}/** 迟到*/.div _日历跨度。后期{ color :红色；}/** 缺勤*/.div _日历跨度。absense { color : # 666}/** 缺勤*/.div _日历跨度。今日{边框半径： 50%；背景：玉米黄；}/** 日历第一行日期*/.div日历first _ div { text-align : right；}/** 日历末行日期*/.div日历last _ div { text-align : left}/** 日期显示div */.div日历div _ CurrentDate { text-align : right；}.div日历更改日期{光标：指针；}.div日历div _ CurrentDate span { width : inherit；}.div日历div _ CurrentDate span em { margin : 5px；}日历。超文本标记语言

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title/title link href=' CSS/style。CSS ' rel='样式表type=' text/CSS '/head dydiv class=' div _ calendar _ title ' h1自定义日历/h1/div div id=' calendar _ div ' class=' div _ calendar '/div script src=' http : script/attendancecalendar。js '/脚本/正文/html示例演示：

代码已更新多次，请直接上开源代码库下载，链接

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