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

日历备忘录功能在很多办公系统中经常用到，日历备忘录的基本功能应该至少涵盖录入备忘录信息、显示对应日期的备忘录信息两大功能。有时追求操作的简洁性，希望在单一操作界面中实现所有功能，特别是在网站系统中，在某个区域显示一个日历表，所有操作都基于它完成：点击日期能弹出录入框录入备忘录信息，鼠标移动到日期上能显示此日的备忘录信息，这时可以尝试使用.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") + "' onmouseover='showMsg()' onmouseout='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;' onclick='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" onclick="InputMsg()" value="保存"/></td>

<td><input type="button" onclick='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