代码：
<%@ Page Language="C# AutoEventWireuptrue CodeBehindEmpWeekPlan.aspx.cs InheritsAepri.InfoDev.DPP.Web.PlanManage.EmpWeekPlan" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> head runat="server"> Meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> title>员工周计划</style type="text/css"> body { margin: 0; padding font-size 12px color #555 background-color #fff; } .table-title border-collapse collapse width 100% border solid 1px #ddd font-weight bold .table-title td text-align center padding 5px height 25px; .table-days .table-days td border 150px vertical-align top width 14px .td-gray #ccc #f7f7f7 .div-task-item #bfecff margin-top 2px height cursor default/* margin-left: 5px; margin-right: 5px;*/ .div-task-item:hover background-color #ff5588 !important .div-no-task-item .td-selected #e0f2f8 !important .div-day-title text-align right 3px .td-today #fcd7d7 .td-today div:first-child border-top solid 2px #f72f37 padding-top 1px .highlight-task #ff3366 !important #fff !important} stylescript src="<%=ResolveClientUrl("~/js/jquery-1.7.2.min.js") % type=text/javascript"><script> <script typetext/javascript> var data { empCode: '101,list: [ //说明：id暂时无用 { id: 01001任务一测试内容201613 },{ id: 024{ id: '02',taskCode: '001',title: '任务一',content: '测试内容',year: 2016,month: 1,day: 5 }, 03002任务二{ id: '04',taskCode: '002',title: '任务二',1)">05003任务三506607004任务四08005任务五09710006任务六{ id: '11',taskCode: '006',title: '任务六',day: 8 }, { id: '12',day: 9 },1)">13007任务七148{ id: '15',taskCode: '008',title: '任务八',day: 6 },day: 7 },1)">15008任务八9009任务九010任务十011任务十一201512312 } ] }; taskCodeList = new Array(); function createTaskCodeList(data,taskCodeList) { for ( i 0; i data.list.length; i++) { bl ; j ; j taskCodeList.length; j) { if (taskCodeList[j] == data.list[i].taskCode) { bl false; } } (bl) { taskCodeList.push(data.list[i].taskCode); } } } createTaskCodeList(data,taskCodeList); $( () { $(.table-days).parent().height($(window).height() - $().parent().position().top - ); $(#year).change( () { year ).val(); month #month).val(); createPlanTable(year,month); }); $(ie6、7 ($.browser.msie) { (parseInt($.browser.version) == 7 || parseInt($.browser.version) ) { $(#table-days).width($().width() 20); $().parent().height($().parent().height() ); } } }); end $ 创建计划表格 createPlanTable(year,month) { html ''; table ); days getDaysOfMonth(year,month); preDays getDaysOfPreMonth(year,1)"> week getWeek(year,month,1)"> day + grayDay td-gray; 置灰 current today Date(); (days +) / ; i) { html += <tr>< ; j) { day; (current false && preDays) { day ; grayDay ; current ; } true days) { day ; } todayClass today.getFullYear() today.getMonth() 1 today.getDate() day) { todayClass td-today; } html <td day="' " class=" "><div class="div-day-title"></div>; virtualTaskCount k ; k data.list.length; k) { model data.list[k]; (grayDay '' model.year model.month model.day) { taskIndex getTaskIndex(taskCodeList,model.taskCode); m virtualTaskCount; m taskIndex; m) { html <div class="div-no-task-item"></div>; virtualTaskCount; } html <div class="div-task-item" taskCode=" model.taskCode " style="background-color:# getColor(taskCodeList,model.taskCode) ;"> model.title ; virtualTaskCount; } } html </td>; } html </tr>; } table.html(html); 优化显示 taskCodeList.length; i) { table.find(tr).each( () { tr this); taskItem tr.find(div[taskCode='" taskCodeList[i] ']); (taskItem.length > ) { ; while (k != ) { k; ; taskItem.each( () { prev ).parent().find(div:eq()); !prev prev.length ) k ; (prev prev.attr(taskCode taskCodeList[i]) k $().parent().attr(class|| 0 ).indexOf(div-no-task-item) { bl ; } }); (bl) { taskItem.each( () { item ); item.parent().find( (prev.length ) { item.after(); item.wrap(<div></div>); prev.after(item.parent().html()); prev.remove(); item.parent().remove(); } }); } } } }); } end for taskCodeList 去空 table.find(td () { td ); div td.find(div:last (div.attr() { div.remove(); } else { break; } } }); } end 优化显示 日期td单击双击 table.find(); td.attr(; td.click( (grayDay) { (td.attr(td-selected) { td.removeClass(); } { $(.td-selected).removeClass(); td.addClass(); } } }); td.dblclick( (grayDay) { add(td.attr(day)); } }); }); 任务单击双击 $(.div-task-item taskItemDiv taskCode taskItemDiv.attr(); taskItemDiv.click( (evt) { $(highlight-task); table.find().addClass(); evt.stopPropagation(); }); taskItemDiv.dblclick( (evt) { evt.stopPropagation(); }); }); } 创建新计划 add(day) { data.list.push({ id: 000测试新增 scrollTop #div-days).scrollTop(); $().change(); $().scrollTop(scrollTop); } 今天 gotoToday() { Date(); $().val(today.getFullYear()); $().val(today.getMonth() ); $().change(); top .td-today).position().top ).position().top; ).scrollTop(top); ); } 上月 preMonth() { ).val(); (month ) { $().val(parseInt(year) ); $().val(); } { $().val(parseInt(month) ); } $().scrollTop($(window).height()); } 下月 nextMonth() { ).scrollTop(获取task索引 pos (taskCodeList[i] taskCode) { ; } pos; } return pos; } scriptheadbodyform id="form1" runat> div ="padding: 5px;"> ="padding: 10px;"> input ="button" value="今天" onclick="gotoToday()" /> ="<"="preMonth()" select ="year" name="year"> option value="2017">2017option="2016">2016="2015">2015="2014">2014select> 年 ="month"="month"> ="1">1="2">2="3">3="4">4="5">5="6">6="7">7="8">8="9">9="10">10="11">11="12">12> 月 =">"="nextMonth()" /> div="margin-top: 5px;"table class="table-title" cellpadding="0" cellspacing="0"tr> td>星期一>星期二>星期三>星期四>星期五>星期六>星期日table="div-days" style="height: 350px; overflow: auto; margin-top: -1px; border-bottom: solid 1px #ddd;"="table-days" classform="text/javascript"获取当月天数 d Date(year,1)"> d.getDate(); } 获取前一个月天数 ) { month ; year { month 获取当天星期数(0到6) d.getDay(); } 颜色集合 myColor [ ccddffccffddeeccffeeffccffcceeffeecc ]; 获取颜色 (pos myColor.length ) { pos ; } } myColor[pos]; } html>
可以运行的HTML代码(放一个jquery.js在同一目录即可)：
="jquery.js" type></>
效果图：
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
