考勤或工作计划之日历图
1、c#后台代码
public void ProcessRequest (HttpContext context) { context.Response.ContentType = "text/plain"; var selDate = context.Request["selDate"] ?? DateTime.Now.Year + "-" + DateTime.Now.Month; string resData = ShowCalendar(selDate); context.Response.Write(resData); } #region Calen private string ShowCalendar(string Month) { System.Text.StringBuilder sb = new System.Text.StringBuilder(); sb.Append("<table cellspacing='0' cellpadding='0' border='1' style='width:100%;border-collapse:collapse;'>"); //table header sb.Append("<tr>"); sb.Append("<th>周日</th><th>周一</th><th>周二</th><th>周三</th>"); sb.Append("<th>周四</th><th>周五</th><th>周六</th>"); sb.Append("</tr>"); // 0->星期一 6->星期天 DateTime monthFirstDay = DateTime.Parse(Month + "-1");//月第一天 DateTime monthLastDay = monthFirstDay.AddMonths(1).AddDays(-1);//月最后一天 int firstDayOfWeek = (int)monthFirstDay.DayOfWeek;//获取月第一天 是星期几 int endDayOfWeek = (int)monthLastDay.DayOfWeek;//获取月最后一天 是星期几 sb.Append("<tr>"); for (int i = 0; i < firstDayOfWeek; i++) { sb.AppendFormat("<td width='20px' height='40px' style='text-align:center;'><font color='gray'> {0}</font></td>", monthFirstDay.AddDays(-(firstDayOfWeek - i)).Day); } do { //2013-03-08 sb.AppendFormat("<td width='120px' height='40px' style='text-align:left;'><input type='checkbox' value='{0}' />{1}" + "<ul class='ulshit'>" + "<li><font color='red'>任务已超时</font></li>" + "<li><font color='blue'>正在进行中</font></li>" + "</ul></td>", monthFirstDay.ToShortDateString(), monthFirstDay.Day); if (monthFirstDay.DayOfWeek == DayOfWeek.Saturday)//周六就tr sb.Append("<tr>"); if (monthFirstDay == monthLastDay) break; monthFirstDay = monthFirstDay.AddDays(1); } while (true); for (int i = 0; i < 6 - endDayOfWeek; i++) { sb.AppendFormat("<td><font color='gray' style='text-align:center;'> {0}</font></td>", monthLastDay.AddDays(i + 1).Day); } sb.Append("</tr>"); sb.Append("</table>"); return sb.ToString(); }
2、前台代码
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!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"> <head runat="server"> <title>兔子工作计划V1.0</title> <link href="css/themes/default/easyui.css" rel="stylesheet" type="text/css" /> <link href="css/themes/icon.css" rel="stylesheet" type="text/css" /> <script src="js/easyUI/jquery-1.7.2.min.js" type="text/javascript"></script> <script src="js/easyUI/jquery.easyui.min.js" type="text/javascript"></script> <script src="js/easyUI/locale/easyui-lang-zh_CN.js" type="text/javascript"></script> <script type="text/javascript"> function Add(){ $("#divAdd").show(); $("#divAdd").dialog({ title: "添加任务", modal: true, closed:false, collapsible: true, minimizable: true, maximizable: true, resizable: true, buttons: [{ text: '添加', iconCls: 'easyui-linkbutton', handler: function () { //alert('ok');触发表单提交 //$("#frmAddRole").submit(); } }, { text: '取消', handler: function () { $("#divAdd").dialog('close'); //关闭对话框 } }] }); }; var currYear=new Date().getFullYear(); var currMonth=new Date().getMonth()+1; $(function(){ InitYearMonth(); SelData(currYear,currMonth); }) function changeYear(){ var selYear=$("#selYear").val(); var selMonth=$("#selMonth").val(); SelData(selYear,selMonth); } function changeMonth(){ var selYear=$("#selYear").val(); var selMonth=$("#selMonth").val(); SelData(selYear,selMonth); } function LastMonth(){ if(currMonth==1){ currYear=currYear-1; currMonth=12; } else{ currMonth=currMonth-1; } $("#selYear").val(currYear); $("#selMonth").val(currMonth); SelData(currYear,currMonth); } function NextMonth(){ if(currMonth==12) { currYear=currYear+1; currMonth=1; } else{ currMonth=currMonth+1; } $("#selYear").val(currYear); $("#selMonth").val(currMonth); SelData(currYear,currMonth); } function SelData(year,month){ var params={selDate:year+"-"+month}; $.post("GetCalendar.ashx",params,function(data){ $("#divCalendar").html(data); }); } function InitYearMonth() { var currYear=new Date().getFullYear(); for(var i=2000;i<=currYear;i++) { if(i==currYear) $("#selYear").append("<option value='"+i+"' selected='selected'>"+i+"</option>"); else $("#selYear").append("<option value='"+i+"'>"+i+"</option>"); } var currMonth=new Date().getMonth()+1; for(var i=1;i<13;i++) { if(i==currMonth) $("#selMonth").append("<option value='"+i+"' selected='selected'>"+i+"</option>"); else $("#selMonth").append("<option value='"+i+"'>"+i+"</option>"); } } </script> <style type="text/css"> .ulshit { list-style-type: none; margin: 0; } </style> </head> <body> <form id="form1" runat="server"> <center> <h3> 任务计划V1.0 </h3> </center> <div> <a id="btn_add" href="javascript:;" class="easyui-linkbutton" iconcls="icon-add" onclick="Add();">添加任务</a></div> <div style="text-align: center; margin-bottom: 40px;"> <a href="javascript:void(0)" onclick="LastMonth()"> <img src="images/left.png" /></a> <select onchange="changeYear()" name="selYear" id="selYear"> </select>年 <select onchange="changeMonth()" name="selMonth" id="selMonth"> </select>月 <a href="javascript:void(0)" onclick="NextMonth()"> <img src="images/right.png" /></a></div> <div id="divCalendar"> </div> <div id="divAdd" closed="true" style="width: 500px;"> <p> 任务名称:<input type="text" id="txtJobName" /></p> <p> 任务描述: <textarea id="txtMemo" name="ipt_activitymemo" rows="5" cols="45" class="easyui-validatebox" style="background-color: #fff;" required="true"></textarea></p> <%-- <p><a id="A1" href="javascript:;" class="easyui-linkbutton" onclick="Add();">保存</a></p>--%> <p> 任务时间：<input type="text" id="txtStartTime" name="ipt_startime" class="easyui-validatebox" required="true" /> ~ <input type="text" id="txtEndTime" name="ipt_endtime" class="easyui-validatebox" required="true" /> </p> </div> </form> </body> </html>
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!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"> <head runat="server"> <title>兔子工作计划V1.0</title> <link href="css/themes/default/easyui.css" rel="stylesheet" type="text/css" /> <link href="css/themes/icon.css" rel="stylesheet" type="text/css" /> <script src="js/easyUI/jquery-1.7.2.min.js" type="text/javascript"></script> <script src="js/easyUI/jquery.easyui.min.js" type="text/javascript"></script> <script src="js/easyUI/locale/easyui-lang-zh_CN.js" type="text/javascript"></script> <script type="text/javascript"> function Add(){ $("#divAdd").show(); $("#divAdd").dialog({ title: "添加任务", modal: true, closed:false, collapsible: true, minimizable: true, maximizable: true, resizable: true, buttons: [{ text: '添加', iconCls: 'easyui-linkbutton', handler: function () { //alert('ok');触发表单提交 //$("#frmAddRole").submit(); } }, { text: '取消', handler: function () { $("#divAdd").dialog('close'); //关闭对话框 } }] }); }; var currYear=new Date().getFullYear(); var currMonth=new Date().getMonth()+1; $(function(){ InitYearMonth(); SelData(currYear,currMonth); }) function changeYear(){ var selYear=$("#selYear").val(); var selMonth=$("#selMonth").val(); SelData(selYear,selMonth); } function changeMonth(){ var selYear=$("#selYear").val(); var selMonth=$("#selMonth").val(); SelData(selYear,selMonth); } function LastMonth(){ if(currMonth==1){ currYear=currYear-1; currMonth=12; } else{ currMonth=currMonth-1; } $("#selYear").val(currYear); $("#selMonth").val(currMonth); SelData(currYear,currMonth); } function NextMonth(){ if(currMonth==12) { currYear=currYear+1; currMonth=1; } else{ currMonth=currMonth+1; } $("#selYear").val(currYear); $("#selMonth").val(currMonth); SelData(currYear,currMonth); } function SelData(year,month){ var params={selDate:year+"-"+month}; $.post("GetCalendar.ashx",params,function(data){ $("#divCalendar").html(data); }); } function InitYearMonth() { var currYear=new Date().getFullYear(); for(var i=2000;i<=currYear;i++) { if(i==currYear) $("#selYear").append("<option value='"+i+"' selected='selected'>"+i+"</option>"); else $("#selYear").append("<option value='"+i+"'>"+i+"</option>"); } var currMonth=new Date().getMonth()+1; for(var i=1;i<13;i++) { if(i==currMonth) $("#selMonth").append("<option value='"+i+"' selected='selected'>"+i+"</option>"); else $("#selMonth").append("<option value='"+i+"'>"+i+"</option>"); } } </script> <style type="text/css"> .ulshit { list-style-type: none; margin: 0; } </style> </head> <body> <form id="form1" runat="server"> <center> <h3> 任务计划V1.0 </h3> </center> <div> <a id="btn_add" href="javascript:;" class="easyui-linkbutton" iconcls="icon-add" onclick="Add();">添加任务</a></div> <div style="text-align: center; margin-bottom: 40px;"> <a href="javascript:void(0)" onclick="LastMonth()"> <img src="images/left.png" /></a> <select onchange="changeYear()" name="selYear" id="selYear"> </select>年 <select onchange="changeMonth()" name="selMonth" id="selMonth"> </select>月 <a href="javascript:void(0)" onclick="NextMonth()"> <img src="images/right.png" /></a></div> <div id="divCalendar"> </div> <div id="divAdd" closed="true" style="width: 500px;"> <p> 任务名称:<input type="text" id="txtJobName" /></p> <p> 任务描述: <textarea id="txtMemo" name="ipt_activitymemo" rows="5" cols="45" class="easyui-validatebox" style="background-color: #fff;" required="true"></textarea></p> <%-- <p><a id="A1" href="javascript:;" class="easyui-linkbutton" onclick="Add();">保存</a></p>--%> <p> 任务时间：<input type="text" id="txtStartTime" name="ipt_startime" class="easyui-validatebox" required="true" /> ~ <input type="text" id="txtEndTime" name="ipt_endtime" class="easyui-validatebox" required="true" /> </p> </div> </form> </body> </html>
这只是初步的功能【希望大家多提需求，具体功能会慢慢跟进】
