考勤或工作计划之日历图

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'>&nbsp;&nbsp;{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;'>&nbsp;&nbsp;{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" />&nbsp; ~ &nbsp;<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" />&nbsp; ~ &nbsp;<input type="text" id="txtEndTime" name="ipt_endtime"
                    class="easyui-validatebox" required="true" />
        </p>
    </div>
    </form>
</body>
</html>

这只是初步的功能【希望大家多提需求，具体功能会慢慢跟进】

                                                                                                                            

posted @ 2013-03-25 22:05  哈哈2222  阅读(1567)  评论(3)  编辑  收藏  举报