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 < 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下载，链接
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
js+html制作简单日历的方法
新手一枚,不会写什么高大上的博文,一些平时做的小练习,献丑 代码: <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> * {margin: 0;padding: 0} #calendar {width: 210px;margin: 100px auto;overflow: hidden;bo
-
javascript实现日历效果
本文实例为大家分享了js实现日历效果的具体代码,供大家参考,具体内容如下 <!doctype html> <html> <head> <meta charset="gb2312"> <title>万年历</title> <script type="text/javascript"> var lunarInfo = new Array( 0x04bd8, 0x04ae0, 0x0a57
-
JS实现一个简单的日历
主要分为三个部分,1:获取li元素 2:如何填写对应的日期 3:如何获取点击li元素的事件. 1:通过节点间关系的属性children 获取li元素(两个for循坏遍历): 2:在遍历填写日期时,在第一行判断在当月的第一天在星期几,然后从第一天开始填写,直到大于当月的天数就暂停填写,并开始填写下个月的日期.第一行上个月的日期显示 : 上月天数显示开始值 = 计算上个月的天数 - 这个月开始的第一天在星期几的值 -1,然后在第一行上月天数显示开始值自加. 3:利用JS的事件冒泡获取li的inne
-
JS实现带阴历的日历功能详解
本文实例讲述了JS实现带阴历的日历功能.分享给大家供大家参考,具体如下: 工作中要写一个带阴历的日历,自己调研了怎么做日历. 一.表格行数问题 既然要显示日期表格的话,首先得知道这个表格有多少行多少列,列数是已经确定的,从星期天(日历上第1列是星期天)到星期六一共7列.要解决行数问题之前,还得先知道这个月的第1天是星期几,因为每个月的1号并不都是从日历上的星期天开始排的,可能1号是星期五,星期六也说不定,所以1号的左边部分,就得用空表格代替了.那么用多少个空表格代替呢,这里就得用到getDay(
-
利用Javascript开发一个二维周视图日历
前言 本文给大家介绍了Javascript开发二维周视图日历的相关内容,即之前实现了一个月视图日历,我们今天来实现一个二维周视图的日历. 以下进行分析其中的关键部分. 结构准备 不同之处在于其在日历的基础上还有一个分类轴,用于展示不同的类目,主要用于一周内的日程安排.会议安排等. 二维则和之前单独的有所不同,二维日历再切换日期时不用全部重新渲染,分类是不用变的,仅仅改变显示的日期即可. 而且由于是二维的,插入的内容必定是同时属于一个分类和一个时间段的,内容肯定是可以跨越时间(即日期轴)的,因此不
-
js原生日历的实例(推荐)
突然发现日期对象可以进行 加减 , 利用这个特性写了一个可以说是对只要会JavaScript 的就可以写的日历:没有各种算法,只有一些逻辑相信只要懂javascript就差不多看俩眼就会的日历. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *
-
原生JavaScript实现日历功能代码实例(无引用Jq)
这篇文章主要介绍了原生JavaScript实现日历功能代码实例(无引用Jq),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 成品显示,可左右切换月份 html 代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=devi
-
javascript实现考勤日历功能
简介 用过一些开源的日历,但对于自定义去绑定数据在日历元素中却不是很方便,由于工作需要用到考勤日历,考虑到日历的实现也不是特别麻烦,于是自己弄了一个,样式比较简单,需要的可以自己去扩展.使用的时候绑定获取数据的方法即可,在这个日历中我没有直接添加选择月份.各位有兴趣可以自己扩展,已预留设置日期的方法.自定义去扩展的时候注意保证原有的代码结构不变,增加一些方法即可,下面直接上源码了,就三个文件. attendanceCalendar.js 代码已更新多次,请直接上github下载,链接 修复 第一
-
基于javascript实现日历功能原理及代码实例
日历 在学习javascript过程中,菜鸟教程有一个javascript实例---css日历,感觉挺有趣的,在它的基础上增加了一些简单的功能(差点哭辽). 功能 按照传统日历方式显示该月的每一天. 可以突出显示今天的日期 可以翻阅上一个月和下一个月的日历 实现 step1 传统日历布局样式:分别将年份与月份.星期.该月的全部天数采用列表布局,排列组成传统日历的样式. step2 初始化和更新月份:先将列表清空(debug过程中,有一个发现,初始化的列表便存在的一个childNodes,该项目中
-
JS简单实现移动端日历功能示例
本文实例讲述了JS简单实现移动端日历功能.分享给大家供大家参考,具体如下: 只是一个初步的简单的日历,有是否显示上月和下月部分的选项 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale
-
基于ThinkPHP实现的日历功能实例详解
本文实例讲述了基于ThinkPHP实现的日历功能.分享给大家供大家参考,具体如下: 开发环境介绍 最新,闲来没事,便开发了一款简单的日历,来统计工作情况.为了开发便捷,使用ThinkPHP架构.界面如下图 备注:每页包含上一个月,当前月,下一个月的日期,并用不同的颜色区分,如果某天工作了,便圈出来. 主要是以下两个文件 重要文件描述 功能文件 CalenDar.class.php主要负责,获取日历详细信息的,不涉及用户数据操作. 代码如下: <?php namespace Util; class
-
jQuery插件实现的日历功能示例【附源码下载】
本文实例讲述了jQuery插件实现的日历功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml
-
java编写全年考勤日历
本文实例为大家分享了java编写全年考勤日历的具体代码,供大家参考,具体内容如下 JAVA代码: package com.wp.action; import java.text.SimpleDateFormat; import java.util.ArrayList; import java.util.Calendar; import java.util.HashMap; public class CalendarAction extends MainAction { private stati
-
vue+elementUI实现简单日历功能
vue+elementUI简单的实现日历功能,供大家参考,具体内容如下 <div class="calender2"> <div class="date-headers"> <div class="date-header"> <div><el-button type="primary" @click="handlePrev"><i class
-
vue实现钉钉的考勤日历
本文实例为大家分享了vue实现钉钉的考勤日历的具体代码,供大家参考,具体内容如下 直接上效果图,需要再往下看 GitHub地址:vue-calendar-component 由于需要对此组件的样式及功能的扩展,直接复制代码过来修改,开始贴代码,很长很长 慢慢看 checkCalendar.vue(子组件) <style lang="scss" rel="stylesheet/scss"> @media screen and (min-width: 460