关于用js实现的日历记事功能

博主是个java新手，目前在做的一个项目就是考勤排班系统，主要负责的模块是排班模块这一方面。需求上面要求要在显示当月的日历表，日历表上同时动态生成上班时间、下班时间、是否值班、值班类型等功能。
当时在网上找了很多日历模板，都没有找到能够符合自己要求的。便决定自己画一个页面。

个人感觉最主要的一块就是字符串的拼接，日历的生成，还有一些个别的属性需要注意。

基本样式引用：

<link rel="stylesheet" href="css/bootstrap.css" /><link rel="stylesheet" href="css/bootstrapValidator.css" /><link rel="stylesheet" href="css/css1.css" /><script type="text/javascript" src="js/jquery-1.10.2.js" ></script><script type="text/javascript" src="js/bootstrap.js" ></script><script type="text/javascript" src="js/bootstrapValidator.js" ></script>

html代码：

<div class="col-xs-10 col-xs-offset-1"><form class="form-inline"><div class="form-group col-xs-offset-1"><label for="exampleInputName2">部门：</label><select class="form-control" style="margin-right: 50px;"><option>==请选择==</option><option>产品研发部</option><option>系统运维部</option><option>人事管理部</option></select><label for="exampleInputEmail2">员工名：</label><select class="form-control" style="margin-right: 100px;" onchange="alertdate()"><option>==请选择==</option><option>张三</option><option>李四</option><option>王五</option></select><button class="btn btn-primary">保存</button></div><div class='calendar' id='calendar'></div></form></div>

html代码中的下拉框都是写死的，给第二个下拉框绑定onchange事件，触发事件在id=’calendar’的div中生成日历。

js部分：

var dateobj = prev();function prev(){var _date = new Date();    // 默认为当前系统时间return {getDate : function(){return _date;},setDate : function(date) {_date = date;}};}function alertdate(){renderhtml();    //对日历div中增加表格元素showCalendarData();  //在表格中显示日期bindEvent();   //对表格上方的上月下月绑定事件$(":radio").click(function(){var parentCode=$(this).parent();if($(this).val()=='true'){if(parentCode.children("select").length==0){parentCode.children("span").show();parentCode.append("<select><option>白班</option><option>夜班</option></select>");}}else{parentCode.children("select").remove();parentCode.children("span").hide();}});}function renderhtml(){var calendar=document.getElementById("calendar");var titlebox=document.createElement("div");  //在div中设置标题区  显示当前月份和上月下月的控制var bodybox=document.createElement("div");   //主体部分 用于存放日历表格titlebox.className="calendar-title-box";   //给标题box绑定属性   并向div中添加元素titlebox.innerHTML="<span id='prevMonth' class='prev-month'></span>"+"<span class='calendar-title' id='calendarTitle'></span>"+"<span class='next-month' id='nextMonth'></span>";calendar.appendChild(titlebox);  //将标题box设为日历容器的子节点bodybox.className='calendar-body-box';   //表格部分绑定属性var headhtml="<tr>"+"<th>日</th>"+"<th>一</th>"+"<th>二</th>"+"<th>三</th>"+"<th>四</th>"+"<th>五</th>"+"<th>六</th>"+"</tr>";var bodyhtml="";for(var i=0;i<6;i++){      //一周7天 字符串拼接放到bodyhtml中bodyhtml+="<tr>"+"<td></td>"+"<td></td>"+"<td></td>"+"<td></td>"+"<td></td>"+"<td></td>"+"<td></td>"+"</tr>";}bodybox.innerHTML="<table id='calendarTable' class='table table-bordered text-center'>"+headhtml+bodyhtml+"</table>";  //设置表格box的内容calendar.appendChild(bodybox);}function showCalendarData(){//alert(dateobj);var year=dateobj.getDate().getFullYear();   //dateobj为object对象 通过getDate得到日期 再得到年var month=dateobj.getDate().getMonth()+1;var datestr=getdatestr(dateobj.getDate());  //通过函数gatdatestr将dateobj转换成字符串格式//设置表格顶部的年月信息var calendarTitle=document.getElementById("calendarTitle");var titleStr=datestr.substr(0,4)+"年"+datestr.substr(4,2)+"月";  //通过substr截取字符串  得到年的数字和月份数字calendarTitle.innerText=titleStr;   //将拼接后的****年**月显示在上方//设置表格中的日期数据var table=document.getElementById("calendarTable");var tds=table.getElementsByTagName("td");var firstday=new Date(year,month-1,1);  //当前月的第一天//alert(firstday.getDay());for(var i=0;i<tds.length;i++){var thisday=new Date(year,month-1,i+1-firstday.getDay());  //getDay得到第一天是周几 从而显示第一行上个月的数据var thisdayStr=getdatestr(thisday);//tds[i].innerText=thisday.getDate();tds[i].innerHTML="<span style='font-size:16px; font-wight:700'>"+thisday.getDate()+"</span>"+"<br/>上班时间：<input type='text' style='width:48px; height:18px; margin-top:1px' placeholder='9:00' />"+"<br/>下班时间：<input type='text' style='width:48px; height:18px; margin-top:1px' placeholder='18:00' />"+"<br/>是否值班：<input type='radio' name='flag"+i+"' value='true' style='margin-top:2px' />是"+"<input type='radio' name='flag"+i+"' value='false' checked='checked' style='margin-top:2px' />否"+"<br/><span style='display:none'>值班类型：</span>";tds[i].setAttribute("data",thisdayStr);if(thisdayStr==getdatestr(new Date())){tds[i].className="currentDay";   //当天设置属性}else if(thisdayStr.substr(0,6)==getdatestr(firstday).substr(0,6)){tds[i].className="currentMonth";  //当前月设置属性}else{tds[i].className="otherMonth";      //其他月的日历设置属性}}//alert(dateobj.getdate().getDay());}function bindEvent(){var prevMonth=document.getElementById("prevMonth");var nextMonth=document.getElementById("nextMonth");addEvent(prevMonth,'click',toPrevMonth);    //绑定点击事件addEvent(nextMonth,'click',toNextMonth);//addEvent($(":radio"),'click',toChooseSch);}function getdatestr(date){var year=date.getFullYear();var month=date.getMonth()+1;  //月份从0开始var day=date.getDate();month=(month>9)?(""+month):("0"+month);  //如果得到的数字小于9要在前面加'0'day=(day>9)?(""+day):("0"+day);return year+month+day;}function addEvent(dom,eType,func){if(dom.addEventListener){dom.addEventListener(eType,function(e){func(e);});}else if(dom.attachEvent){dom.attachEvent('on'+eType,function(e){func(e);});}else{dom['on'+eType]=function(e){func(e);}}}function toPrevMonth(){var date=dateobj.getDate();dateobj.setDate(new Date(date.getFullYear(),date.getMonth()-1,1));showCalendarData();}function toNextMonth(){var date=dateobj.getDate();dateobj.setDate(new Date(date.getFullYear(),date.getMonth()+1),1)showCalendarData();}</script>

其中印象比较深刻的地方有：

1、每个单元格中的radio按钮所设置的checked=’checked’属性无效。
这个原因博主找了一会发现，因为所有的日历部分代码都是通过字符串拼接动态生成的，在生成radio按钮的时候

是否值班：<input type='radio' name='flag' value='true' style='margin-top:2px' />是<input type='radio' name='flag' value='false' checked='checked' style='margin-top:2px' />否

这里所绑定的name属性是全部相同的，即整个表格中的name属性重复，所以所生成的单选按钮组没有默认选中项。

后来在name属性中加上for循环中的变量i，实现一个单元格中的两个按钮name值相同，从而解决该问题。

2、相同类型的问题还有一处：

<span id='dutyType' style='display:none'>值班类型：</span>

博主在尝试实现选择值班时显示值班类型的功能时发现在js代码中无法找到该span。按理用jquery的id选择器不会出现这种问题啊，仔细想想应该还是字符串拼接出错。因为博主是使用for循环实现每个日历单元格都产生相应的操作，后面再根据是否属于当前月进行判断是进行显示还是隐藏。

最终发现每个单元格中所产生的span id全部相同，无法使用选择器找到。后来博主便放弃了使用id选择器的方法。改用节点操作：

$(":radio").click(function(){var parentCode=$(this).parent();if($(this).val()=='true'){if(parentCode.children("select").length==0){parentCode.children("span").show();parentCode.append("<select><option>白班</option><option>夜班</option></select>");}}else{parentCode.children("select").remove();parentCode.children("span").hide();}});

找到所点击按钮的父级元素，在父级元素的所有子元素中找到span的children，再通过hide或者show控制其显示或者隐藏。同样的select下拉框也是这样实现的。

3、字符串拼接后 radio按钮所绑定的click事件失效。

$(":radio").click(function(){var parentCode=$(this).parent();if($(this).val()=='true'){if(parentCode.children("select").length==0){parentCode.children("span").show();parentCode.append("<select><option>白班</option><option>夜班</option></select>");}}else{parentCode.children("select").remove();parentCode.children("span").hide();}});

还是相同的代码块，原先博主是用html()方法获取所点击按钮父级元素中所有的内容，在后面继续字符串的拼接加上select下拉框，最后再用html()将原先的内容替换，但是后面自测发现事件失效，当前单元格中的click事件无效，在Google的开发者工具中查看页面代码无问题，但是始终不能触发事件。

后选择是用append的方法实现。查阅相关资料应该是js部分的代码在页面加载完之后，也随之加载完，若想再次实现点击事件需要重新加载js代码，看的我一脸懵逼。这地方始终不是太明白。

关于用js实现的日历记事功能相关推荐

如何新建桌面便签、任务列表、个人日历记事
在电脑桌面记事,几乎是上班族的共同需求.领导临时交代的一串任务,不在便签上列一个任务表,一会儿就忘了任务都有什么了.写月总结的时候,如果没有在一张月视图上总览当月记事,真不知道这个月自己做了什么事情值 ...
html制作日历备忘录,原生JS代码制作带记事备忘功能的双月份显示效果的日历
原生JS写的日历月历 - demo by js.alixixi.com window.onload = function(){ function $(id){return typeof id === ...
html桌面日历功能,jQuery简单带记事功能的日历插件
e-calendar是一款jQuery简单带记事功能的日历插件.通过该jQuery日历插件你可以记录或设置某天某个时刻发生的事情,具有工作备忘录的功能.通过简单的参数设置你就可以定制该日历插件的外观. ...
android日历窗口实现,基于Android日历及记事功能完整实现.doc
基于Android日历及记事功能完整实现 <移动通信程序设计> 课程设计题目基于andriod的功能的日历二O年月日 1概述1 2 总体设计2 3详细设计3 3.1.绘画基础5 3 ...
Java怎么搞安卓日历提醒,Android日历有闹钟提醒功能记事功能等
[实例简介] 好看的Android日历,里面有闹钟.提醒功能.记事功能等等 [实例截图] [核心代码] Calenda └── Calenda ├── AndroidManifest.xml ├── ...
js php 实现日历签到_基于jquery实现日历签到功能_jquery
在一些任务游戏.贴吧管理中都会有一个签到功能,帮助大家记录登录天数,积累等级经验,这个日历签到功能是如何实现的,本文为大家进行演. 本文实例讲述了基于jquery实现日历签到功能.分享给大家供大家参考 ...
Bootstrap全年日历插件带记事功能
下载地址实用的Bootstrap3带记事功能的全年日历插件.该日历插件使用简单,可以动态在某个日期上设置备忘录,可以自定义高亮日期样式和选择最大日期和最小日期范围等. dd:
前端日历添加记事功能_通过添加实验室功能从Google日历中获取更多信息
前端日历添加记事功能 Recently we took a look at how you can take Gmail further by enabling some of the extra f ...
jQuery日历记事插件SimpleCalendar（附源代码）
二期修改SimpleCalendar为日历记事插件,并修复多个bug,带农历.节假日. 一.效果图: 二.Simple-Calendar插件的使用方法 1.引入资源 (1). 使用日历插件前首先要引用 ...

关于用js实现的日历记事功能

关于用js实现的日历记事功能相关推荐

最新文章

热门文章