手写的一个日历表格！

最新推荐文章于 2022-08-26 14:37:39 发布
最新推荐文章于 2022-08-26 14:37:39 发布
阅读量691 收藏
点赞数
分类专栏： 前端技术 文章标签： 日历控件 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baidu_34046383/article/details/52576787
版权
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
    <%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<title>日历表格</title>
<script language="javascript" type="text/javascript">
function initdata(){
var myDate = new Date();
var nianyue=""; 
var nianchinese="";
if($("#selTime").val()!=null && $("#selTime").val()!=""){
nianyue=$("#selTime").val();
nianchinese=baodate2chinese(nianyue+"-01");
}else{
nianyue=myDate.getFullYear()+"";        //获取当前年份(2位)
nianchinese=baodate2chinese(nianyue+"-01-01");
}
nianchinese=nianchinese.substr(0,4)+"年";
var deptId=$(".crm_select option:selected").val();
var strs= new Array(); //定义一数组 
strs=nianyue.split("-"); //字符分割 
var new_date = new Date(strs[0],strs[1],1);
      var monthLength=new Date(new_date.getTime()-1000*60*60*24).getDate();
      //alert(parseInt(dd));
      //table添加tr td
      var yuefen="";
      if(strs[1]=="01")
      yuefen="一月";
      else if(strs[1]=="02")
      yuefen="二月";
      else if(strs[1]=="03")
      yuefen="三月";
      else if(strs[1]=="04")
      yuefen="四月";
      else if(strs[1]=="05")
      yuefen="五月";
      else if(strs[1]=="06")
      yuefen="六月";
      else if(strs[1]=="07")
      yuefen="七月";
      else if(strs[1]=="08")
      yuefen="八月";
      else if(strs[1]=="09")
      yuefen="九月";
      else if(strs[1]=="10")
      yuefen="十月";
      else if(strs[1]=="11")
      yuefen="十一月";
      else if(strs[1]=="12")
      yuefen="十二月";
     
   var strTemp = "<table id='calendar' class='table' border='0' cellspacing='0' cellpadding='0'><tr><td width='100' style='display:none'></td><td style='display:none'></td><td colspan='"+(parseInt(monthLength)+2)+"' align='center'>"+nianchinese+yuefen+"</td></tr><tr>";
   
   var temp="   ";
   //得到当月的所有假期
  strTemp+="<input type='text' value=<s:property value="yueholidays" /> id='hol' style='display:none'>"
   strTemp += "<td width='100px;'>" + "项目参与人员"+ "</td><td></td>";
   for(var i = 1; i <= parseInt(monthLength); i++){
    strTemp += "<td width='18px;'>" + i + "</td>";
}
strTemp += "</tr>";
var show="none";
var yueholiday="<s:property value="yueholidays" />";   //1,5,9,12,16,19,26
var holidayarr=new Array();
holidayarr=yueholiday.split(",");
<s:iterator value="#request.allEmpList" status="empinfoList" >
var aczstartdayarr=new Array();
var aczenddayarr=new Array();
var acstartdayarr=new Array();
var acenddayarr=new Array();
var acstartday="<s:property value="ACSTARTDAY" />";   //1,4   //获取开始时间
var acendday="<s:property value="ACENDDAY" />"; //4,9    //获取结束时间
var startday="<s:property value="STARTDAY" />";   //1,4,7   //获取开始时间
var endday="<s:property value="ENDDAY" />"; //4,9,12    //获取结束时间
var proname="<s:property value="PRONAME" />";   //获取项目名称
var colour="<s:property value="COLOUR" />";   //获取项目颜色
var zstartdayarr=new Array();
var zenddayarr=new Array();
var startdayarr=new Array();
var enddayarr=new Array();
var pronamearr=new Array();
var colourarr=new Array();
var douhao=0;
douhao=startday.split(",");
if(douhao!=0){
zstartdayarr=startday.split(",");   //[1,8]
zenddayarr=endday.split(","); //[4,9] 
aczstartdayarr=acstartday.split(",");   //[1,8]
aczenddayarr=acendday.split(","); //[4,9] 
pronamearr=proname.split(",");
colourarr=colour.split(",");
}else{
zstartdayarr[0]=startday;
zenddayarr[0]=endday;
aczstartdayarr[0]=acstartday;
aczenddayarr[0]=acendday;
pronamearr[0]=proname;
colourarr[0]=colour;
}
zstartdayarr.forEach(function(data,index,arr){  
        startdayarr.push(+data);  
    }); 
    zenddayarr.forEach(function(data,index,arr){  
        enddayarr.push(+data);  
    });
    aczstartdayarr.forEach(function(data,index,arr){  
        acstartdayarr.push(+data);  
    }); 
    aczenddayarr.forEach(function(data,index,arr){  
        acenddayarr.push(+data);  
    });
    var startarrlength=enddayarr.length;
var begin=0;
show="block";
var s=0;
//存在字符转义问题  应先去掉空格
var empName="<s:property value="EMPNAME"/>";
empName= empName.replace(/\s+/g,"")
strTemp += "<tr ><td style='vertical-align:middle;'>"+"<s:property value="EMPNAME" />"+
"<input type='text' style='display:none' value="+empName+"></td>"+
"<td style='display:none' name='startTime'>"+
"<input type='text' value=<s:property  value="STARTTIME" /> > </td>"+
"<td style='display:none' id='endTime'>"+
"<input type='text' value=<s:property value="ENDTIME" /> > </td>"+
"<td style='display:none' id='acstarttime'>"+
"<input type='text' value=<s:property value="ACSTARTTIME" /> > </td>"+
"<td style='display:none'  id='acendtime'>"+
"<input type='text' value=<s:property value="ACENDTIME"/> > </td>"+
"<td style='display:none' id='proname'>"+
"<input type='text' value=<s:property value="PRONAME" /> ></td>"+
"<td style='display:none'>"+
"<input type='text' value=<s:property value="DEPNAME" /> ></td>"+
"<td style='display:none'>"+
"<input type='text' value=<s:property value="PROTOTALAMOUNT" /> ></td>"+
"<td  width='28px;' height='18px;'>预订</td>";
  for(var r = 1; r <= parseInt(monthLength); r++){
  //var s=r-1;
  var h=r-1;
  if(s<startarrlength){
  var begin=enddayarr[s];
  var beginstart=startdayarr[s];
  var biaozhi=r;
  if(r<=begin && r>=beginstart){
  if(r==holidayarr[h]){
  strTemp +="<td width='18px;' class='hover' height='18px;' style='background-color:#E0E0E0'>" +temp + "</td>";
  }else if(r>=startdayarr[s] && r<=enddayarr[s]){
  strTemp +="<td width='18px;' class='hover' title='"+pronamearr[s]+"' height='18px;' style='background-color:"+colourarr[s]+"'>" +temp + "</td>";
  }else{
  strTemp +="<td width='18px;' height='18px;'>" + temp + "</td>";
  }
  }else{
  begin=enddayarr[s];
  beginstart=startdayarr[s];
  if(startarrlength>1){
  if(biaozhi>begin){
  s+=1;
  begin=enddayarr[s];
  beginstart=startdayarr[s];
  }
  if(r==holidayarr[h]){
  strTemp +="<td width='18px;' class='hover'  height='18px;' style='background-color:#E0E0E0'>" +temp + "</td>";
  }else if(r>=startdayarr[s] && r<=enddayarr[s]){
  strTemp +="<td width='18px;' class='hover' title='"+pronamearr[s]+"' height='18px;' style='background-color:"+colourarr[s]+"'>" +temp + "</td>";
  }else{
  strTemp +="<td width='18px;' height='18px;'>" + temp + "</td>";
  }
  }else{
  if(r==holidayarr[h]){
  strTemp +="<td width='18px;' class='hover'  height='18px;' style='background-color:#E0E0E0'>" +temp + "</td>";
  }else if(r>=startdayarr[s] && r<=enddayarr[s]){
  strTemp +="<td width='18px;' class='hover' title='"+pronamearr[s]+"' height='18px;' style='background-color:"+colourarr[s]+"'>" +temp + "</td>";
  }else{
  strTemp +="<td width='18px;' height='18px;'>" + temp + "</td>";
  }
  }
  }
  }else{
  if(r==holidayarr[h]){
  strTemp +="<td width='18px;' class='hover' height='18px;' style='background-color:#E0E0E0'>" +temp + "</td>";
  }else{
  strTemp +="<td width='18px;' height='18px;'>" + temp + "</td>";
  }
  //strTemp +="<td width='18px;' height='18px;'>" + temp + "</td>";
  }
  }
  strTemp += "</tr>";
  //acstartdayarr     [0,0,0]
  //acenddayarr [0,0,]
  if(acstartdayarr[0]!=0 && startdayarr[0]!=0){
  begin=0;
startarrlength=acenddayarr.length;
s=0;
strTemp += "<tr><td style='vertical-align:middle;'>"+"<s:property value="EMPNAME" />"+"</td><td id='topdashed' width='28px;' height='18px;'>实际</td>";
  for(var r = 1; r <= parseInt(monthLength); r++){
  //var s=r-1;
  var h=r-1;
  if(s<startarrlength){
  var begin=acenddayarr[s];
  var beginstart=acstartdayarr[s];
  var biaozhi=r;
  if(r<=begin && r>=beginstart){
  if(r==holidayarr[h]){
  strTemp +="<td width='18px;' class='hover' id='topdashed' height='18px;' style='background-color:#E0E0E0'>" +temp + "</td>";
  }else if(r>=acstartdayarr[s] && r<=acenddayarr[s]){
  strTemp +="<td width='18px;' class='hover' id='topdashed' title='"+pronamearr[s]+"' height='18px;' style='background-color:"+colourarr[s]+"'>" +temp + "</td>";
  }else{
  strTemp +="<td width='18px;' id='topdashed' height='18px;'>" + temp + "</td>";
  }
  }else{
  begin=acenddayarr[s];
  beginstart=acstartdayarr[s];
  if(startarrlength>1){
  if(biaozhi>begin){
  s+=1;
  begin=acenddayarr[s];
  beginstart=acstartdayarr[s];
  }
  if(r==holidayarr[h]){
  strTemp +="<td width='18px;' class='hover' id='topdashed' height='18px;' style='background-color:#E0E0E0'>" +temp + "</td>";
  }else if(r>=acstartdayarr[s] && r<=acenddayarr[s]){
  strTemp +="<td width='18px;' class='hover' id='topdashed' title='"+pronamearr[s]+"' height='18px;' style='background-color:"+colourarr[s]+"'>" +temp + "</td>";
  }else{
  strTemp +="<td width='18px;' id='topdashed' height='18px;'>" + temp + "</td>";
  }
  }else{
  if(r==holidayarr[h]){
  strTemp +="<td width='18px;' class='hover' id='topdashed' height='18px;' style='background-color:#E0E0E0'>" +temp + "</td>";
  }else if(r>=acstartdayarr[s] && r<=acenddayarr[s]){
  strTemp +="<td width='18px;' class='hover' id='topdashed' title='"+pronamearr[s]+"' height='18px;' style='background-color:"+colourarr[s]+"'>" +temp + "</td>";
  }else{
  strTemp +="<td width='18px;' id='topdashed' height='18px;'>" + temp + "</td>";
  }
  }
  }
  }else{
  if(r==holidayarr[h]){
  strTemp +="<td width='18px;' class='hover' id='topdashed' height='18px;' style='background-color:#E0E0E0'>" +temp + "</td>";
  }else{
  strTemp +="<td width='18px;' id='topdashed' height='18px;'>" + temp + "</td>";
  }
  //strTemp +="<td width='18px;' height='18px;'>" + temp + "</td>";
  }
  }
  strTemp += "</tr>";
  }
</s:iterator>
strTemp += "</table>";
document.getElementById("calendardiv").style.display=show;
document.getElementById("summaryresult").style.display=show;
document.getElementById("calendardiv").innerHTML=strTemp;
}
</script>
</head>
<body >
<div id="calendardiv" style="display: none;">

</div>
</body>
</html>
星之火燎原
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
一个纯手写日历控件(重复造轮子)
xuanwugang的博客
04-19 1562
因为项目中有个设置考勤的地方用到日历交互，需要点击设置工作日，并且可以跨月设置，就手写了一个js控件，效果基本如图所示，可以上下翻月，点击设置变色后翻页可记住位置。基本思路：1，每画一个月生成对应个数的隐藏&lt;input&gt;域，每个带有点击事件，点击后变色并赋值2，翻页后将本页数据ajax到后台并再带到下个月或上个月，点击过的天数会对应变色3，再次翻页后用本月数据ajax更新往月数据，依次...
纯JS+CSS手写日历
qq_39933748的博客
03-25 812
介绍 今天带来一个纯JS+css手写的日历， 一开始先显示当前日期，比如下方25日就是当前日期会有较深蓝色背景色，鼠标指着的日期是下方图片14日的淡蓝色背景色 上面显示日期，可左右选择上个月或者下个月 代码 html代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8...
h5日历组件制作
醉逍遥neo的博客
08-26 2830
在自己实现之前会觉得日期的展示这块不好处理，而实现过后会发现这块的处理逻辑很有通用性，无论是pc端还是移动端、vue栈还是react，都能套用同样的处理方式，其他的交互和自定义展示就没啥难度了，根据业务需要自己定制就行。日期列表参照 antd-mobile 的展示，固定6行，共42项，共用一个容器，和星期栏类似，flex布局，子元素占总宽度的1/7，溢出换行（flex-wrap: wrap）。以上数据字段可以随意拓展，根据你的需要来对日历展示不同的状态、不同标记等，或者对日历点击事件做自定义的操作。...
vue+js纯手写日历（包含农历，节假日）
weixin_44601930的博客
07-08 1721
vue，js，纯手写日历
自己手写日历
u013067420的博客
08-10 1083
下面是一段网上粗糙的代码，我加以改进，主要是为了研究为主 td{ text-align: center;} function ready(fn){ // 目前Mozilla、Opera和webkit 525+内核支持DOMContentLoaded事件 if(document.ad
js手写日历插件
luzhongk的博客
04-14 1970
table{text-align: center;border-collapse:collapse;} .active{color:deeppink;} //获取时间 var date = new Date(); var y = date.getFullYear(); var _m = date.getMonth(); var d = date.getDate(
手写一个python迭代器过程详解
09-18
主要介绍了手写一个python迭代器过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
如何手写一个简易的 Vuex
10-14
主要介绍了如何手写一个简易的 Vuex，帮助大家更好的理解和学习vue，感兴趣的朋友可以了解下
手写数字识别非常易懂！
03-02
手写数字识别matlab实现，非常使用，代码注释非常详细！！！
手写Fuchsia第一个app
03-16
在研究GN和Ninja时，发现Fuchsia也是用的GN和ninja来构建编译系统的，值得一提的是Android7.0以后放弃了Makefile，开始使用ninja来构建编译系统！
jquery手写日历
10-08
一个全手写的jquery日历！一个全手写的jquery日历！一个全手写的jquery日历！一个全手写的jquery日历！一个全手写的jquery日历！一个全手写的jquery日历！
超简单的日历插件，纯js手写。
javaStudentZhang的博客
01-15 2049
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
js手写日历表
m0_37378152的博客
09-11 659
setDate (time) { // 当前指定日期 let dat = time ? new Date(time) : new Date() const timeY = dat.getFullYear().toString() const timeM = dat.getMonth().toString() let mth = Number(timeM) // 数字化 let first = new Date(timeY, mth, 1) // 当月开始日期 const daySt.
使用JAVA写一个简单的日历
这知识它不进脑子啊
05-17 9722
使用JAVA写一个简单的日历 import java.text.DateFormat; import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.Calendar; import java.util.Date; import java.util.GregorianCalendar; im...
手写日历组件（vue+js）
WeiflR10的博客
11-18 765
<div class="cldBody"> <table> <thead> <tr id="week"> <td>日</td> <td>一</td> .
手写vue日历控件过程
小蚂蚁的世界
02-11 2444
之前项目中有用到日历控件，当时由于时间问题，是在网上找到一个demo，然后二次开发的，从那时就想着自己写一个日历控件。这篇文章说明日历数据的处理，去除月份天数判断以及是否闰年判断。   设计（以最常用的按月份的日历） 日历其实大家都很熟悉，一切的设计都是从功能出发，这是根本。日历的功能分为两大块。 日历头部：当前年份/月份。 日历主体：当前月份的具体的日期信息。 日历主体的行数：现在我们...
mysql 手写建 表_SQL创建表格——手写代码
weixin_35696012的博客
01-19 654
打开phpstudy，打开Navicat for MySQL，进入要创建表格的数据库，点击上方“查询”按钮，“创建查询”，即可输入代码进行创建。例：create table class(class_id int not null primary key,class varchar(255) not null,major varchar(255) not null ,depart varchar(...
手写表格组件和文本标签
qq_42778289的博客
08-14 693
文章目录主要内容：一、commenTableList，自己封装的表格组件二、antd的一些适配组件Text标签text在table中的使用实例关于andt的table在typescript中的一个小坑   现在的前端ui框架越来越多，各个不同的ui框架有着自己明显的风格，而我们自己在开发时候难免会遇到一些框架不切合，或者需要定制化开发的情况。例如，我们之前写的一个前端项目，ui框架用的是 blue...
js 手写一个星期日历
最新发布
08-31
手写一个日历可能比较复杂，但可以使用 JavaScript 的 `Date` 对象和一些日期处理函数来实现。下面是一个简单的实现： ``` // 获取当前日期 var now = new Date(); // 获取当前月份 var month = now.getMonth(); //...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值