.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:

②.显示输入框

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

原文链接：https://www.f2er.com/ajax/165593.html

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

猜你在找的Ajax相关文章