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

最新推荐文章于 2022-02-23 13:39:30 发布

Jo@mykine

最新推荐文章于 2022-02-23 13:39:30 发布

阅读量2.8k

点赞数

分类专栏： .NET Web 文章标签： .NET日历控件 Calendar Javascript操作日历控件日历备忘录 AJAX日历

本文链接：https://blog.csdn.net/Jo_Andy/article/details/16341331

版权

Web 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

.NET

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:

②.显示输入框

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);
}