将考勤数据与日历结合

最新推荐文章于 2024-01-18 14:44:43 发布
最新推荐文章于 2024-01-18 14:44:43 发布
阅读量796 收藏 2
点赞数
文章标签： html css js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/O0_0O__/article/details/103712073
版权

打卡日历

参考地址
https://blog.csdn.net/weixin_42283981/article/details/87976273
在此基础上做了修改
思路
在日历对象中，确认当前月的天数：找到本月的第一天和下个月的第一天

  1. html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/reset.css">
    <link href="css/card.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div id="warp" class="wrap_card">
        <div class="card_title">
            <h4><i class="title_pic"></i>考勤详情</h4>
        </div>
        <div class="handler_line">
            <div class="handler_month">
                月
                <span class="b_line"></span>
            </div>
            <div class="date_show">
                <div class="pre_month">
                    <i></i>
                </div>
                <div class="cur_month"></div>
                <div class="nxt_month">
                    <i></i>
                </div>
            </div>
        </div>
        <div id="card">
        </div>
    </div>
    <!-- <script src="copy.js"></script> -->
    <script src="copy2.js"></script>
</body>

</html>
  1. js
function Calend(id1,id2,fn) {
  // 
  var $content;
  var $body;
  var $data; //当前日期
  var $month;//当前月份
  var $year;//当前年份
  var $curDay;//当前月中的当前天
  var $model_arr ;
  var $wrap
  const that = this;

  this.init = function (year, month) {
    // 获取承载日历的父元素
    this.setparentNode()
    $content.innerHTML = ''
    if (year && (month||month==0)) {
      this.setDate_now(year, month)
    } else {
      this.setDate_now()
    }
    this.formatter_arr(fn)
    // 添加日期
    fill_in_date()
    // 设置日历头部
    addHead();
    addBody()
  }

  this.setparentNode = function () {
    if (document.getElementById(id1)) {
      $wrap = document.getElementById(id1);
      $content = document.getElementById(id2);
    } else {
      alert('查找不到该元素')
    }
  }
  this.setDate_now = function (year, month) {
    if (year && (month||month==0)) {
      $data = new Date(year, month, $curDay);
    } else {
      $data = new Date();
    }
    $curDay = $data.getDate()
    $month = $data.getMonth() + 1;
    $year = $data.getFullYear()
    this.setdata($month, $year, $curDay)
  }
  // 整理传入的数组
  this.formatter_arr=function (fn) {
    let arr=fn()
    for (var i = 0; i < arr.length; i++) {
      var msg = getDay_msg(arr[i].add_time)
      arr[i].add_time = msg
    }
    $model_arr=arr
  }
  // 补零
  function addZero(num) {
    return num >= 10 ? num : '0' + num
  }
  function addHead() {
    var headDiv = document.createElement('div');
    addClass(headDiv, 'head')
    let head_arr = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
    for (var i = 0; i < head_arr.length; i++) {
      var newspan = document.createElement('span');
      newspan.innerText = head_arr[i];
      headDiv.appendChild(newspan)
    }
    $content.appendChild(headDiv)
  }

  // 设置日历内容
  function addBody() {
    $body = document.createElement('div');
    addClass($body, 'c_body')
    // 获取当月的天数
    var curmonth_length = getLastDay()
    // 设置每一行需要的数据
    // 设置一个空数组存放一行需要的数据
    var line_arr = [];
    for (var i = 1; i <= curmonth_length; i++) {
      let push_obj = {
        add_time: set_one_day(i)
      }
      if ($model_arr[i-1]) {
        if($model_arr[i-1].add_time.month==$month&&$model_arr[i-1].add_time.year==$year){
          push_obj = $model_arr[i-1]
        }
      }
      line_arr.push(push_obj);
      if (push_obj.add_time.day == 6 || i == curmonth_length) {
        // 当该天为周六,完成一行的数据
        let temp = line_arr.concat()
        creatLine(temp)
        line_arr = []
      }
    }
    $content.appendChild($body)
  }

  // 获取当前月最后一天
  function getLastDay() {
    var currentMonth = $data.getMonth();
    var nxtMonth = ++currentMonth
    // 获取下个月第一天对应的时间
    var nxtfirstday = new Date($data.getFullYear(), nxtMonth, 1);
    var curLastday = nxtfirstday - 24 * 60 * 60 * 1000;
    var lastday = new Date(curLastday);
    var lastDate = lastday.getDate();
    return lastDate
  }

  // 设置当月的某一天
  function set_one_day(oday) {
    var dat = new Date($data.setDate(oday))
    return getDay_msg(dat)
  }

  // 获取当前月每一天对应的数据信息
  function getDay_msg(dy) {
    var firDay = new Date(dy);
    var date = firDay.getDate();
    var month = firDay.getMonth()+1
    var day = firDay.getDay();
    return {
      date, day,month
    }
  }
  // 填入医生上下班信息
  function show_msg(msg, pnode) {
    if (msg) {
      for (var k = 0; k < msg.length; k++) {
        var pObj = document.createElement('p');
        var lump = document.createElement('i')
        // lamp表示上下班情况的表示
        addClass(lump, 'lump')
        if (msg[k].attendance_status_id == 'normal') {
          addClass(lump, 'normal')
        } else {
          addClass(lump, 'late')
        }
        var text = document.createTextNode(msg[k].attendance_type_name)
        pObj.appendChild(lump)
        pObj.appendChild(text)
        pnode.appendChild(pObj)
      }
    }
  }
  function creatLine(arr_receive) {
    var newDiv = document.createElement("div");
    let tag = arr_receive[0].add_time.day;
    // 主要针对第一行不满7个日期
    for (let k = tag; k > 0; k--) {
      var nullspan = document.createElement('sapn');
      newDiv.appendChild(nullspan)
    }
    for (var i = 0; i < arr_receive.length; i++) {
      var dayspan = document.createElement('sapn');
      let str = `<i>${arr_receive[i].add_time.date}</i>`
      dayspan.innerHTML = str;
      if(arr_receive[i].attendance_msg){
      show_msg(arr_receive[i].attendance_msg, dayspan)
      }
      if (arr_receive[i].add_time.date == $curDay) {
        addClass(dayspan, 'today')
      }
      addClass(newDiv, 'line')
      newDiv.appendChild(dayspan)
    }
    // 检测每一行是否有七个，主要针对最后一行
    let spanLength = newDiv.children.length;
    for (let j = spanLength; j < 7; j++) {
      var nullspan = document.createElement('sapn');
      newDiv.appendChild(nullspan)
    }
    // 给一行的日期添加样式
    for (var k = 0; k < newDiv.children.length; k++) {
      if (k == 0) {
        addClass(newDiv.children[k], 'noleft')
      }
      addClass(newDiv.children[k], 'day')
    }
    $body.appendChild(newDiv)
  }
  // 填写日期
  function fill_in_date() {
    var content_div = $wrap.getElementsByClassName('cur_month')[0];
    content_div.innerText = $year + '年' + addZero($month) + '月';
  }
  this.click=function(){
    var pre_btn = $wrap.getElementsByClassName('pre_month')[0];
    pre_btn.onclick = function () {
      var time = cpmputed('pre');
      that.init(time.year, time.month)
    }
    var nxt_btn = $wrap.getElementsByClassName('nxt_month')[0];
    nxt_btn.onclick = function () {
      var time = cpmputed('nxt');
      that.init(time.year, time.month)
    }
  }
  function cpmputed(tag) {
    var month = $month-1, year = $year;
    
    if (tag == 'nxt') {
      month = month + 1;
      if (month > 11) {
        month = 0;
        year = year + 1
      }
    } else if (tag == 'pre') {
      month = month - 1;
      if (month < 0) {
        month = 11;
        year = year - 1
      }
    }
    return { year, month }
  }
  // 给元素添加类名
  function addClass(element, classname) {
    element.classList.add(classname)
  }
  this.setdata = function (a, b, c) {
    that.data = {
      month: a,//当前月份
      year: b,//当前年份
      curDay: c//当前月中的当前天
    }
  }
}
let arr = {
  "stateMsg": "success",
  "stateCode": "200",
  "data": [
    {
      "doctor_id": "1",
      "attendance_msg": [],
      "add_time": "2019-12-01"
    },
    {
      "doctor_id": "1",
      "attendance_msg": [],
      "add_time": "2019-12-02"
    },
    {
      "doctor_id": "1",
      "attendance_msg": [],
      "add_time": "2019-12-03"
    },
    {
      "doctor_id": "1",
      "attendance_msg": [],
      "add_time": "2019-12-04"
    },
    {
      "doctor_id": "1",
      "attendance_msg": [],
      "add_time": "2019-12-05"
    },
    {
      "doctor_id": "1",
      "attendance_msg": [],
      "add_time": "2019-12-06"
    },
    {
      "doctor_id": "1",
      "attendance_msg": [],
      "add_time": "2019-12-07"
    },
    {
      "doctor_id": "1",
      "attendance_msg": [],
      "add_time": "2019-12-08"
    },
    {
      "doctor_id": "1",
      "attendance_msg": [],
      "add_time": "2019-12-09"
    },
    {
      "doctor_id": "1",
      "attendance_msg": [
        {
          "doctor_id": "1",
          "attendance_status_name": "正常",
          "edit_reason": "测试",
          "edit_time": "2019-12-10 15:17:16",
          "attendance_type_name": "上班",
          "edit_user": "1",
          "attendance_address": "北京",
          "attendance_status_id": "normal",
          "uuid": "1",
          "add_time": "2019-12-10 15:17:06",
          "attendance_type_id": "attendance_start"
        },
        {
          "doctor_id": "1",
          "attendance_status_name": "正常",
          "edit_reason": "测试",
          "edit_time": "2019-12-10 15:17:16",
          "attendance_type_name": "下班",
          "edit_user": "1",
          "attendance_address": "北京",
          "attendance_status_id": "normal",
          "uuid": "2",
          "add_time": "2019-12-10 15:17:06",
          "attendance_type_id": "attendance_off"
        }
      ],
      "add_time": "2019-12-10"
    },
    {
      "doctor_id": "1",
      "attendance_msg": [],
      "add_time": "2019-12-11"
    },
    {
      "doctor_id": "1",
      "attendance_msg": [],
      "add_time": "2019-12-12"
    },
    {
      "doctor_id": "1",
      "attendance_msg": [],
      "add_time": "2019-12-13"
    },
    {
      "doctor_id": "1",
      "attendance_msg": [],
      "add_time": "2019-12-14"
    },
    {
      "doctor_id": "1",
      "attendance_msg": [
        {
          "doctor_id": "1",
          "attendance_status_name": "正常",
          "edit_reason": "测试",
          "edit_time": "2019-12-10 15:17:16",
          "attendance_type_name": "下班",
          "edit_user": "1",
          "attendance_address": "北京",
          "attendance_status_id": "normal",
          "uuid": "3",
          "add_time": "2019-12-15 15:17:06",
          "attendance_type_id": "attendance_off"
        }
      ],
      "add_time": "2019-12-15"
    },
    {
      "doctor_id": "1",
      "attendance_msg": [],
      "add_time": "2019-12-16"
    },
    {
      "doctor_id": "1",
      "attendance_msg": [],
      "add_time": "2019-12-17"
    },
    {
      "doctor_id": "1",
      "attendance_msg": [],
      "add_time": "2019-12-18"
    },
    {
      "doctor_id": "1",
      "attendance_msg": [],
      "add_time": "2019-12-19"
    },
    {
      "doctor_id": "1",
      "attendance_msg": [],
      "add_time": "2019-12-20"
    },
    {
      "doctor_id": "1",
      "attendance_msg": [],
      "add_time": "2019-12-21"
    },
    {
      "doctor_id": "1",
      "attendance_msg": [],
      "add_time": "2019-12-22"
    },
    {
      "doctor_id": "1",
      "attendance_msg": [],
      "add_time": "2019-12-23"
    },
    {
      "doctor_id": "1",
      "attendance_msg": [],
      "add_time": "2019-12-24"
    },
    {
      "doctor_id": "1",
      "attendance_msg": [],
      "add_time": "2019-12-25"
    },
    {
      "doctor_id": "1",
      "attendance_msg": [],
      "add_time": "2019-12-26"
    },
    {
      "doctor_id": "1",
      "attendance_msg": [],
      "add_time": "2019-12-27"
    },
    {
      "doctor_id": "1",
      "attendance_msg": [],
      "add_time": "2019-12-28"
    },
    {
      "doctor_id": "1",
      "attendance_msg": [],
      "add_time": "2019-12-29"
    },
    {
      "doctor_id": "1",
      "attendance_msg": [],
      "add_time": "2019-12-30"
    }
  ]
}

var ca = new Calend('warp','card')
ca.init(arr,fn);
ca.click()
  1. css
*{
    padding:0;
    margin:0;
}
.wrap_card{
    margin: 0 auto;
    width: 1120px;
	height: 666px;
	background-color: #ffffff;
	box-shadow: 0px 2px 6px 0px 
        rgba(0, 0, 0, 0.08);
        overflow: hidden;
}
.card_title{
    height: 62px;
    border-bottom: 1px solid #e1e3eb;
    line-height: 42px;
	font-family: PingFang-SC;
	font-size: 16px;
    color: #3d404d;
    padding: 5px;
}
.title_pic{
    display: inline-block;
    width: 15px;
    height: 15px;
    background: url('../css/claend.png') no-repeat -10px -10px;
    vertical-align: middle;
    margin-right: 5px;
}
.handler_line{
    height: 55px;
    line-height: 55px;
    display: flex;
    justify-content: space-between;
}
.handler_month{
    font-family: PingFang-SC;
	font-size: 14px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
    color: #3d404d;
    display: inline-block;
    text-align: center;
    line-height: 53px;
}
.b_line{
    display: block;
    width: 40px;
	height: 2px;
    background-color: #5e72f9;
    margin-bottom: 0;
}
.date_show{
    display: flex;
    align-items: center;
}
.pre_month,
.nxt_month{
    line-height: 55px;
}
.pre_month i,
.nxt_month i{
    width: 15px;
    height: 8px;
    display: inline-block;
    background: url(../css/claend.png) no-repeat;
}
.pre_month i{
    background-position: -13px -32px;
}
.pre_month i:hover{
    background-position: -31px -32px;
}
.nxt_month i{
    background-position: -13px -49px;
}
.nxt_month i:hover{
    background-position: -31px -49px;
}
.cur_month{
    margin: 0 20px;
}


.head{
    display: flex;
    justify-content:space-between;
    text-align: center;
    border-top: 1px solid #e1e3eb;
}
.head{
    height: 50px;
}

.head span{
    flex: 1;
    line-height: 50px;
}
.c_body{
    padding: 5px;
}
.line{
    display: flex;
    height: 100px;
    border-top: 1px solid #e1e3eb;
}
.day{
    width: 160px;
    padding: 5px;
    border-left: 1px solid #e1e3eb;
}
.noleft{
    border: 0;
}
.today{
    background-color: rgba(59, 130, 253,.3);
}
.lump{
    width: 14px;
	height: 14px;
    border-radius: 1px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
}
.normal{
    background-color: #3b82fd;
}
.late{
    background-color: #f79e02;
}
.in_early{
    background-color: #ff186a;
}
.warning{
    background-color: #ff186a;
}
.day p{
    margin-top: 10px;
    font-family: PingFang-SC-Regular;
	font-size: 14px;
	color: #666a80;
}
.pre_month,
.nxt_month,
.day{
    cursor: pointer;
}
小沅白
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
javascript实现考勤日历功能
12-07
简介 用过一些开源的日历，但对于自定义去绑定数据在日历元素中却不是很方便，由于工作需要用到考勤日历，考虑到日历的实现也不是特别麻烦，于是自己弄了一个，样式比较简单，需要的可以自己去扩展。使用的时候绑定获取数据的方法即可，在这个日历中我没有直接添加选择月份。各位有兴趣可以自己扩展，已预留设置日期的方法。自定义去扩展的时候注意保证原有的代码结构不变，增加一些方法即可，下面直接上源码了，就三个文件。 attendanceCalendar.js 代码已更新多次，请直接上github下载，链接 修复 第一行日期数量计算 bug，修改了以下的方法 function initCalendarBody()
自己用js写的日历（在考勤中使用，显示员工的日期的考勤情况）
banshengyu6711的博客
03-11 1163
1、HTML部分 1 <div id="AttendanceDataDetailDiv"> 2 <div class="A_close"> 3 <div id="AttendanceDataLevelTitle">考勤明细</div> 4 <a href="javascript:void(0)" class="aA...
基于JAVA的考勤系统
12-04
基于JAVA的考勤系统，可以实现用户注册与登录，设定上下班时间，用户信息修改，打卡功能，管理员可以管理用户，查询统计打卡信息，并输出到文档中。
web前端---JS简易日历
05-22
非常好看的js简易日历
jQuery全年日历工作考勤表代码amazeui.js插件
12-18
jQuery全年日历工作考勤表代码amazeui.js插件
jQuery全年日历工作考勤表代码
07-05
【jQuery全年日历工作考勤表代码】是一个基于jQuery的前端解决方案，用于创建一个功能完备的日历组件，特别适用于管理员工的工作考勤记录。这个组件使用了AmazeUI.js插件，一个轻量级且强大的前端框架，为HTML页面...
OA仿钉钉考勤H5源代码
05-24
该系统主要利用HTML5、CSS3和JavaScript等前端技术，结合后端服务，实现了类似钉钉的考勤功能，包括签到、打卡、请假申请、考勤统计等。开发者可以借此快速搭建自己的企业考勤平台，满足日常办公需求。 1. HTML5与...
jQuery全年日历工作考勤表特效代码
03-20
总结来说，jQuery全年日历工作考勤表特效代码结合了jQuery的便利性和amazeUI.js的强大功能，提供了一套完善的日历考勤管理解决方案，适用于企业或个人进行日常工作计划与考勤记录。通过理解并研究其背后的实现原理，...
jQuery全年日历工作考勤表代码.zip
07-05
总之，"jQuery全年日历工作考勤表代码"结合了jQuery的便利性和amazeUI.js的优秀设计，为开发者提供了一个高效、易用的考勤管理工具。通过对这些关键知识点的理解和实践，开发者可以灵活地应用于自己的项目中，提升...
数据窗日历_pb_pb系统_
09-30
在这个“数据窗日历_pb_pb系统_”的主题中，我们将深入探讨数据窗口在处理日期时间功能上的应用以及与PB系统的结合。 1. **数据窗口（Data Window）**： 数据窗口是PowerBuilder的一个强大功能，它允许开发者通过...
Vue实现的年历（适用于考勤，备忘）
04-24
Vue实现的年历样式（适用于考勤，备忘），可以通过vue 请求接口加载年历天数据进行相关呈现
日历+签到（日历签到html）
06-13
html+js日历签到插件，可自定义已签到日期，签到自定义
js带节假日日历控件
02-19
js带节假日日历控件，相对简单 纯js开发
前端日期控件
04-26
前端日期控件,可以提供用户选择规定格式的日期,前端日期控件,可以提供用户选择规定格式的日期,
Vue中的日历组件 Calendar 实现 考勤打卡记录
最新发布
强者惜字如金，弱者废话连篇！
01-18 2219
实现效果图1.由于Calendar没有右上角月份切换的API事件，可以给组件源码添加自定义添加一个事件2.也可以自带的input事件来获取日历3.vue页面完整代码注释：this.$m(this.beginTime).format(‘YYYY-MM-DD HH:mm’)，是分装的标准时间转化年月日，使用者可通过多种方法自定义处理。-- 日历组件 -->:time-区间步长="30"
考勤日历插件 android,jQuery手机考勤日历插件
weixin_35456296的博客
05-26 475
插件描述：一款简单的手机端日历插件，可以根据年月选择查看当月的考勤情况使用方法引入资源使用日历插件前首先要引用资源：JS CSS初始化一个日历首先为calendar准备一个容器，可以设置大小，也可以在options中设置，不设置的话自动设为默认js数据vardata=[{startDate:"2019-8-10",name:"事件"},{startDate:"2019-9-10...
html5 asp当前日期,Html+Css+ASP 实现日历功能
weixin_34354231的博客
06-27 158
最近正在做一个考勤管理系统，其中有一个模块需要回显排班，既要把日期显示出来还要把班次名称回显出来。当然网上有很多开源的日历控件，内容很丰富，质量也杠杠滴。但是，因为功能需求是要把数据库的内容回显在日期上，所以一番讨论研究后，决定自己敲一个日历控件，这个版本是基于ASP的，后续有时间我还会再做一个PHP的。其实，日历控件最主要的核心就是当前的date 根据date 来判断 当前的年，月以及这个月的排...
简单的考勤打卡日历
07-23
import android.content.Context; import android.util.AttributeSet; import android.view.View; import android.widget.LinearLayout; import android.widget.TextView; import com.org.security.app.main.R; import com.org.security.tools.DateUtils; /** * Created by Administrator on 2017/8/16. */ public class SignDate extends LinearLayout { private TextView tvYear; private InnerGridView gvWeek; private InnerGridView gvDate; private AdapterDate adapterDate; public SignDate(Context context) { super(context); init(); } public SignDate(Context context, AttributeSet attrs) { super(context, attrs); init(); } public SignDate(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(); } private void init() { View view = View.inflate(getContext(), R.layout.layout_signdate, this); tvYear = view.findViewById(R.id.tvYear); gvWeek = view.findViewById(R.id.gvWeek); gvDate = view.findViewById(R.id.gvDate); tvYear.setText(DateUtils.getCurrentYearAndMonth()); gvWeek.setAdapter(new AdapterWeek(getContext())); adapterDate = new AdapterDate(getContext()); gvDate.setAdapter(adapterDate); } /** * 签到成功的回调 * * @param onSignedSuccess */ public void setOnSignedSuccess(OnSignedSuccess onSignedSuccess) { adapterDate.setOnSignedSuccess(onSignedSuccess); } /** * 签到 */ public void setOnSigned(int postion) { adapterDate.setOnSigned(postion); } /** * 签到 */ public void setOnSigned(String date) { adapterDate.setOnSigned(date); } }
自定义ASP.NET日历控件实现考勤管理
通过这篇文章，读者可以了解到如何在实际开发中灵活运用基础控件来创建满足特定需求的日历控件，同时也展示了如何将这种自定义控件整合到考勤管理系统的流程中。这不仅适用于企业内部的考勤，也适用于其他需要用户...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值