.NET的Calendar控件+AJAX打造简单版日历备忘录

1 篇文章 0 订阅

       日历备忘录功能在很多办公系统中经常用到,日历备忘录的基本功能应该至少涵盖录入备忘录信息、显示对应日期的备忘录信息两大功能。有时追求操作的简洁性,希望在单一操作界面中实现所有功能,特别是在网站系统中,在某个区域显示一个日历表,所有操作都基于它完成:点击日期能弹出录入框录入备忘录信息,鼠标移动到日期上能显示此日的备忘录信息,这时可以尝试使用.NET中的Calendar日历控件+AJAX来实现。

      主要思路:①初始化Calendar时,在Calendar的DayRender事件中从数据库中将日期的备忘录信息读出并且赋值在控件或Html标签自定义属性中;②通过JS访问自定义属性,得到日期和备忘录信息,当鼠标移动到日历上时触发onmouseover事件将信息显示;③当点击Calendar上的日期时,触发onclick事件,弹出输入框,点击"保存"时,AJAX异步发送备忘录信息到服务器指定页面,服务器接收到信息后将信息保存在数据库中

       一、改造日历控件:

             ①.改变外观:Calendar本身的样子有待改进,这里就简单改改:

                 <asp:Calendar ID="calendar" runat="server" BorderWidth="1px" 
                    DayNameFormat="Full" OnDayRender="calendar_DayRender"
                    EnableViewState="true" OnPreRender="calendar_PreRender" ToolTip="日历备忘录" 
                    BorderStyle="Solid" SelectionMode="None">
                    <DayHeaderStyle BackColor="#5DB8E4" BorderColor="#C1C5C8" BorderStyle="Solid" 
                        BorderWidth="1px" />
                    <DayStyle BackColor="#F4F7F9" Height="56px" Width="46px" HorizontalAlign="Center"
                        VerticalAlign="Top" BorderColor="#C1C5C8" BorderStyle="Solid" 
                        BorderWidth="1px" />
                    <SelectedDayStyle BackColor="#FF6600" />
                    <TitleStyle BackColor="#559AE9" />
                    <TodayDayStyle BackColor="#FF6600" />
                </asp:Calendar> 

                

            ②.  PreRender事件(改变星期显示)

         protected void calendar_PreRender(object sender, EventArgs e)
        {
            Thread t = Thread.CurrentThread;
            System.Globalization.CultureInfo c = (System.Globalization.CultureInfo)t.CurrentCulture.Clone();
            c.DateTimeFormat.DayNames = new string[] { "日", "一", "二", "三", "四", "五", "六" };
            c.DateTimeFormat.FirstDayOfWeek = DayOfWeek.Monday;
            t.CurrentCulture = c;
        }


            ③.DayRender事件处理函数(将备忘录信息绑定到对应的日期上):

                     protected void calendar_DayRender(object sender, DayRenderEventArgs e)
        {
            if (e.Day.IsOtherMonth) //当日期不在当前月份中时不显示
            {
                e.Cell.Controls.Clear();
            }
            else
            {
                
                string userName = "小明";
                e.Cell.Attributes.Add("style", "cursor:pointer;");
                e.Cell.Attributes.Add("thisTime", e.Day.Date.ToString("yyyy-MM-dd"));
                e.Cell.Attributes.Add("onclick", "showInputMsg()");
                Literal ltl = new Literal();
                //从数据库查询出该日期下的备忘录信息,//截取前3个文字做标题显示
                string msg = "";
                msg = GetMsgToCalender(userName, e.Day.Date);
                if (!string.IsNullOrEmpty(msg))
                {
                    string tag = "";
                    if (msg.Length >= 3)
                    {
                        tag = msg.Substring(0, 3);
                    }
                    else
                    {
                        tag = msg;
                    }
                    if (!string.IsNullOrEmpty(msg))
                    {
                        ltl.Text = "<br /><a msg=" + msg + " style='font-size:12px;color:blue;cursor:default;' thisTime='" + e.Day.Date.ToString("yyyy-MM-dd") + "' οnmοuseοver='showMsg()' οnmοuseοut='hidemsg()' >" + tag + "</a>";
                        e.Cell.Controls.Add(ltl);
                    }
                }                                                
            }           
        }

     效果:

    

  二、JS事件处理:

         1.鼠标移动到日历上显示信息的函数showMsg():

            这里利用了Calender的ToolTip属性(其实是Calender呈现的table的title)来显示信息,但是信息是通过读取触发事件的对象的自定义属性msg来获得的。

            function showMsg() {
            var obj = event.srcElement ? event.srcElement : event.target;   
        var ddd = document.getElementById("calendar");
            var thisTime = obj.attributes["thisTime"].nodeValue;
            var userName = document.getElementById("hfUser");
            var msg = obj.attributes["msg"].nodeValue;
            ddd.title = msg;                   
           };


          2.点击输入备忘录:

             ①.输入框DIV:

<div id="tipDiv" style="width:205px;height:120px;border-right: #333366 1px solid; border-top: #333366 1px solid;
        z-index: 1; border-left: #333366 1px solid; border-bottom: #333366 1px solid;
        position: absolute;display:none; background-color: #ffffcc; font-size: 12px;">
        <div style='padding: 5px; width: 200px; height: auto;'>
            <table width='200px;'>
                <tr>
                    <td>
                        时间: <a id="aTime"></a>
                    </td>
                   
                    <td style="text-align:right;">
                        <a style='cursor: pointer;' οnclick='exitInputMsg()'>关闭</a>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                      内容:<br /><textarea id="txtMsg" style="resize:none;" cols="22" rows="2" ></textarea>
                    </td>
                </tr>
                <tr>
                 <td><input type="button" οnclick="InputMsg()" value="保存"/></td>
                 <td><input type="button" οnclick='exitInputMsg()' value="取消"/></td>
                </tr>
            </table>
        </div>
</div>        

      ②.显示输入框

function showInputMsg() {
    var obj = event.srcElement ? event.srcElement : event.target;
    var thisTime = obj.attributes["thisTime"].nodeValue;
    aTime.innerHTML = thisTime.toString();
    conentall();
};


 ③.使用AJAX异步发送数据:
function InputMsg() {
    var msg = document.getElementById("txtMsg");
    var aTime = document.getElementById("aTime");
    var userName = document.getElementById("hfUser");
    if (msg.value == "") {
        alert("内容不能为空!");
    }
    else {
        CreatexmlHttp();
        xmlHttp.onreadystatechange = function () {
            if (xmlHttp.readyState == 4) {
                if (xmlHttp.status == 200) {
                    if (xmlHttp.responseText == "1") {
                        alert("保存成功!");
                    }
                    else {
                        alert("保存失败!");
                    }
                }
            }
        };
        xmlHttp.open("POST", "inputMsg.ashx", true);
        xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=gb2312");
        var param = "userName=" + userName.value + "&thisTime=" + aTime.innerHTML + "&msg=" + msg.value;
        xmlHttp.send(param);
    }
};

④.取消输入,隐藏输入框
function exitInputMsg() {   
    var msg = document.getElementById("txtMsg");
    msg.value = "";
    var aTime = document.getElementById("aTime");
    aTime.innerHTML = "";
    tagnone();
};


function tagnone() {
    document.getElementById("tipDiv").style.display = "none";  
};


效果:

三、SERVER端将信息录入到数据库中:

    inputMsg.ashx页面:

    public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            string userName = context.Request["userName"];
            string thisTime = context.Request["thisTime"];
            string msg = context.Request["msg"];
            
            DateTime MsgWarnTime = DateTime.Parse(thisTime);
            T_UserWarn thisWarn = new T_UserWarn();
            thisWarn.UserName = userName;//用户名
            thisWarn.Message = msg;//备忘录内容
            thisWarn.MsgWarnTime = MsgWarnTime;//提醒日期
            thisWarn.MsgWritedTime = DateTime.Parse(DateTime.Now.Year.ToString() + "-" + DateTime.Now.Month.ToString() + "-"+DateTime.Now.Day.ToString());//写时日期
            string sql = "select Id from T_UserWarn where UserName=@UserName and MsgWarnTime=@MsgWarnTime";  
             
            List<SqlParameter> parameters = new List<SqlParameter>();
            parameters.Add(new SqlParameter("UserName", thisWarn.UserName));
            parameters.Add(new SqlParameter("Message", thisWarn.Message));
            parameters.Add(new SqlParameter("MsgWarnTime", thisWarn.MsgWarnTime));
            parameters.Add(new SqlParameter("MsgWritedTime", thisWarn.MsgWritedTime));
            DataSet ds = SQLDBHelper.Query(sql, parameters);
            if ((null != ds) && (ds.Tables[0].Rows.Count > 0))
            {
                long ID =Convert.ToInt64(ds.Tables[0].Rows[0]["Id"]);
                parameters.Add(new SqlParameter("Id", ID));
                sql = "update T_UserWarn set Message=@Message,MsgWritedTime=@MsgWritedTime where Id=@Id";
            }
            else
            {
                sql = "insert into T_UserWarn(UserName,Message,MsgWarnTime,MsgWritedTime) values(@UserName,@Message,@MsgWarnTime,@MsgWritedTime)";
            }
            
            int N = SQLDBHelper.ExecuteNonQuery(sql,parameters);
            string result = "0";
            if (N == 1)
            {
                result = "1";
            }
            context.Response.Write(result);
        }


具体代码可参考本站下载资源http://download.csdn.net/download/jo_andy/6558727


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值