[Asp.net]Calendar+JqueryUi实现日程管理（右键菜单，添加，编辑，删除，源码）

引言

出差终于回来了，这篇文章算是这个月的博客的开篇吧。

上篇文章：[Asp.net]Calendar+JqueryUi实现日程管理——添加日程

上篇文章主要贴了一些该项目的界面，这里面，将主要代码也贴出来分享一下。

项目

数据库设计

 USE [Wolfy.Schedule]
 GO

 /****** Object:  Table [dbo].[TB_Schedule]    Script Date: 2014/7/5 16:30:00 ******/
 SET ANSI_NULLS ON
 GO

 SET QUOTED_IDENTIFIER ON
 GO

 SET ANSI_PADDING ON
 GO

 CREATE TABLE [dbo].[TB_Schedule](
     [scheduleId] [int] IDENTITY(1,1) NOT NULL,
     [scheduleDescription] [nvarchar](320) NULL,
     [scheduleCreateDate] [datetime] NULL,
     [scheduleColor] [varchar](32) NULL,
     [scheduleTitle] [nvarchar](160) NULL,
     [userId] [int] NOT NULL,
     [schedulePlanDate] [datetime] NULL,
  CONSTRAINT [PK_TB_Schedule] PRIMARY KEY CLUSTERED
 (
     [scheduleId] ASC
 )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
 ) ON [PRIMARY]

 GO

 SET ANSI_PADDING OFF
 GO

TB_Schedule

 USE [Wolfy.Schedule]
 GO

 /****** Object:  Table [dbo].[TB_UserInfo]    Script Date: 2014/7/5 16:30:22 ******/
 SET ANSI_NULLS ON
 GO

 SET QUOTED_IDENTIFIER ON
 GO

 SET ANSI_PADDING ON
 GO

 CREATE TABLE [dbo].[TB_UserInfo](
     [userId] [int] IDENTITY(1,1) NOT NULL,
     [userName] [nvarchar](20) NULL,
     [userGender] [bit] NULL,
     [userLoginName] [varchar](32) NULL,
     [userPwd] [varchar](32) NULL,
     [userCreateDate] [datetime] NULL,
     [userIsDelete] [bit] NULL,
     [userBirthday] [datetime] NULL,
     [userLoginCount] [int] NULL,
     [userAge] [int] NULL,
  CONSTRAINT [PK_TB_UserInfo] PRIMARY KEY CLUSTERED
 (
     [userId] ASC
 )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
 ) ON [PRIMARY]

 GO

 SET ANSI_PADDING OFF
 GO

TB_UserInfo

日程管理界面

添加

编辑

删除

代码实现

 <%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/Main.Master" CodeBehind="ScheduleManage.aspx.cs" Inherits="Wolfy.ScheduleDemo.ScheduleManage" %>

 <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
     <link href="js/Dialog/css/redmond/jquery-ui-1.10.4.custom.css" rel="stylesheet" />
     <script type="text/javascript" src="js/jquery-1.11.0.js"></script>
     <script type="text/javascript" src="js/Dialog/js/jquery-ui-1.10.4.custom.js"></script>
     <script type="text/javascript" src="js/jquery.contextmenu.r2.packed.js"></script>
     <script type="text/javascript">
         $(function () {

             $("#dialog").dialog({
                 autoOpen: false,// 初始化之后，是否立即显示对话框，默认为 true
                 width: 450,
                 modal: true,//是否模式对话框，默认为 false
                 draggable: true,//是否允许拖动，默认为 true
                 resizable: true,//是否可以调整对话框的大小，默认为 true
                 title: "添加日程",
                 position: "center",//用来设置对话框的位置，有三种设置方法 1.  一个字符串，允许的值为  'center', 'left', 'right', 'top', 'bottom'.  此属性的默认值即为 'center'，表示对话框居中。 2.  一个数组，包含两个以像素为单位的位置，例如， var dialogOpts = { position: [100, 100] }; 3. 一个字符串组成的数组，例如， ['right','top']，表示对话框将会位于窗口的右上角。var dialogOpts = {  position: ["left", "bottom"]    };

             });

             $("#btnSave").click(function () {
                 var strScheduleTitle = $("#<%=txtScheduleTitle.ClientID%>").val();
                 var strScheduleDescription = $("#<%=txtScheduleDescription.ClientID%>").val();
                 var strhdColor = $("#<%=hdColor.ClientID%>").val();
                 var strlblSchedulePlanDate = $("#<%=lblSchedulePlanDate.ClientID%>").html();
                 var strScheduleID = $("#<%=hdScheduleID.ClientID%>").val();      

                 $.ajax({
                     type: "POST",//
                     url: "ScheduleManage.aspx/AddSchedule",
                     data: "{strScheduleTitle:'" + strScheduleTitle + "',strScheduleDescription:'" + strScheduleDescription + "',strhdColor:'" + strhdColor + "',strlblSchedulePlanDate:'" + strlblSchedulePlanDate + "',strScheduleID:'" + strScheduleID + "'}",
                     contentType: "application/json",
                     dataType: "json",
                     success: function (data) {
                         $("#dialog").dialog("close");
                         if (data.d == 1) {

                             alert("添加成功")
                         } else if (data.d == 2) {
                             alert("添加失败");
                         } else if (data.d == 3) {
                             alert("修改成功");
                         } else {
                             alert("修改失败");
                         }
                         window.location = window.location;
                     },
                     error: function (msg) {
                         alert(msg.status);
                     }
                 });
             });
             // 打开日程添加窗口
             $("td[date]").each(function () {

                 //为每个单元格绑定右键菜单
                 $(this).contextMenu('myMenu1', {
                     //绑定右键菜单，通过ul,li的ID绑定
                     bindings:
                     {
                         'add': function (e) {

                             $("#<%=lblSchedulePlanDate.ClientID%>").text($("#" + e.id).attr("date"));
                             $("#<%=txtScheduleTitle.ClientID%>").val("");
                             $("#<%=txtScheduleDescription.ClientID%>").val("");
                             $("#btnSave").val("添加");
                             $("#dialog").dialog("open");
                         },
                         'edit': function (e) {
                             var strScheduleID = $("#" + e.id).attr("scheduleId");
                             if (strScheduleID == "NO") {
                                 alert("亲，该日没有日程安排，无法编辑，谢谢！");
                                 return;
                             } else {
                                 $("#<%=hdScheduleID.ClientID%>").val(strScheduleID);
                             }
                             $("#btnSave").val("编辑");

                             $.ajax({
                                 type: "POST",//
                                 url: "ScheduleManage.aspx/EditSchedule",
                                 data: "{strScheduleID:'" + strScheduleID + "'}",
                                 contentType: "application/json",
                                 dataType: "json",
                                 success: function (data) {
                                     $("#<%=txtScheduleTitle.ClientID%>").val(data.d[1]);
                                     $("#<%=txtScheduleDescription.ClientID%>").val(data.d[1]);

                                     $("#<%=hdColor.ClientID%>").val(data.d[4]);
                                     $("#" + data.d[4]).text("√");
                                     $("#" + data.d[4]).siblings().text("");

                                     $("#<%=lblSchedulePlanDate.ClientID%>").html(data.d[5]);

                                 },
                                 error: function (msg) {
                                     alert(msg.status);
                                 }
                             });
                             $("#dialog").dialog("open");
                         },
                         'delete': function (e) {
                             var strScheduleID = $("#" + e.id).attr("scheduleId");

                             if (strScheduleID == "NO") {
                                 alert("亲，该日没有日程安排，无法删除，谢谢！");
                                 return;
                             }

                             $.ajax({
                                 type: "POST",//
                                 url: "ScheduleManage.aspx/DeleteSchedule",
                                 data: "{strScheduleID:'" + strScheduleID + "'}",
                                 contentType: "application/json",
                                 dataType: "json",
                                 success: function (data) {
                                     if (data.d == 1) {
                                         $("#dialog").dialog("close");
                                         alert("删除成功");

                                     } else {
                                         alert("删除失败");
                                     }
                                     window.location = window.location;
                                 },
                                 error: function (msg) {
                                     alert(msg.status);
                                 }
                             });
                         }
                     }
                 });

             });
             $("#btnCancel").click(function () {
                 $("#dialog").dialog("close");
             });
             $("#tbColor tr td").each(function () {
                 $(this).click(function () {
                     $(this).text("√");
                     $("#<%=hdColor.ClientID%>").val($(this).css("background-color"));
                     $(this).siblings().text("");
                 });
             });
         });
     </script>

 </asp:Content>
 <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
     <asp:Calendar ID="CalendarSchedule" runat="server"
         BorderColor="#FFCC66" NextPrevStyle-Height="10px" Height="500px" Width="100%" BackColor="#FFFFCC" BorderWidth="1px" DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt" ForeColor="#663399" OnDayRender="CalendarSchedule_DayRender" ShowGridLines="True" OnSelectionChanged="CalendarSchedule_SelectionChanged" OnVisibleMonthChanged="CalendarSchedule_VisibleMonthChanged">
         <DayHeaderStyle BackColor="#FFCC66" Font-Bold="True" Height="1px" />
         <NextPrevStyle Height="10px" Font-Size="9pt" ForeColor="#FFFFCC"></NextPrevStyle>
         <OtherMonthDayStyle ForeColor="#CC9966" />
         <SelectedDayStyle BackColor="#CCCCFF" Font-Bold="True" />
         <SelectorStyle BackColor="#FFCC66" />
         <TitleStyle BackColor="#990000" Height="50px" Font-Bold="True" Font-Size="9pt" ForeColor="#FFFFCC" />
         <TodayDayStyle BackColor="#FFCC66" ForeColor="White" />
     </asp:Calendar>
     <div style="display: none" id="dialog">
         <table class="insert-tab" width="100%">
             <tbody>
                 <tr>
                     <th width="120"><i class="require-red">*</i>日程标题：</th>
                     <td>
                         <asp:TextBox ID="txtScheduleTitle" CssClass="common-text required" runat="server"></asp:TextBox>
                     </td>
                 </tr>
                 <tr>
                     <th>日程描述：</th>
                     <td>
                         <asp:TextBox ID="txtScheduleDescription" TextMode="MultiLine" CssClass="common-textarea" cols="30" Style="width: 98%;" Rows="5" runat="server"></asp:TextBox>
                     </td>
                 </tr>
                 <tr>
                     <th>日程创建时间：</th>
                     <td>
                         <asp:Literal Text="" ID="ltlScheduleCreateDate" runat="server" /></td>
                 </tr>
                 <tr>
                     <th><i class="require-red">*</i>日程颜色标识：</th>
                     <td>
                         <table id="tbColor" width="100%" border="1" style="height: 30px;">
                             <tr align="center">
                                 <td id="red" style="background-color: red">√</td>
                                 <td id="yellow" style="background-color: yellow"></td>
                                 <td id="green" style="background-color: green"></td>
                                 <td id="blue" style="background-color: blue"></td>
                             </tr>
                         </table>
                     </td>
                 </tr>
                 <tr>
                     <th>计划时间：</th>
                     <td>
                         <asp:Label Text="" ID="lblSchedulePlanDate" runat="server" />
                     </td>
                 </tr>
                 <tr align="center">
                     <th></th>
                     <td>
                         <input type="button" id="btnSave" class="btn btn-primary btn6 mr10" name="name" value="添加" />
                         <input type="button" id="btnCancel" class="btn btn6" name="name" value="取消" />
                     </td>
                 </tr>

             </tbody>
         </table>
         <asp:HiddenField runat="server" ID="hdColor" Value="red" />
         <asp:HiddenField runat="server" ID="hdScheduleID" Value="NO" />

     </div>
     <div class="contextMenu" id="myMenu1">
         <ul>
             <li id="add">添加</li>
             <li id="edit">编辑</li>
             <li id="delete">删除</li>
         </ul>
     </div>

 </asp:Content>

ScheduleManage.aspx

 using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Text;
 using System.Web;
 using System.Web.Services;
 using System.Web.UI;
 using System.Web.UI.WebControls;
 using Wolfy.Schedule.BLL;
 using Wolfy.Schedule.Model;
 namespace Wolfy.ScheduleDemo
 {
     public partial class ScheduleManage : PageBase
     {
         private static Schedule.Model.UserInfo _userInfo = null;
         Schedule.BLL.ScheduleBLL _scheduleBLL = new ScheduleBLL();
         IList<Schedule.Model.Schedule> _lstSchedules = null;
         DateTime dtCurrentDate = DateTime.Now; //当前
         DateTime dtPriviousDate = DateTime.Now.AddMonths(-); //上一个月
         protected void Page_Load(object sender, EventArgs e)
         {
             if (!IsPostBack)
             {

                 _userInfo = Session["user"] as UserInfo;
                 this.ltlScheduleCreateDate.Text = DateTime.Now.ToString("yyyy-MM-dd hh:mm:ss");
                 this.CalendarSchedule.SelectedDate = DateTime.Now;
             }

             _lstSchedules = _scheduleBLL.GetModelList(" userid=" + _userInfo.userId + " and SchedulePlanDate>='" + dtPriviousDate.AddDays(-) + "' and SchedulePlanDate <='" + dtCurrentDate.AddDays() + "'");
         }
         /// <summary>
         /// 初始化日历
         /// </summary>
         /// <param name="sender"></param>
         /// <param name="e"></param>
         protected void CalendarSchedule_DayRender(object sender, DayRenderEventArgs e)
         {

             e.Cell.Attributes.Add("date", e.Day.Date.ToString("yyyy-MM-dd"));
             e.Cell.Attributes.Add("id", "td" + e.Day.Date.ToString("MMdd"));
             e.Cell.Attributes.Add("scheduleId", "NO");
             if (_lstSchedules != null && _lstSchedules.Count > )
             {

                 foreach (Schedule.Model.Schedule schedule in _lstSchedules)
                 {
                     if (e.Day.Date.ToString("yyyy-MM-dd").Equals(schedule.SchedulePlanDate.ToString("yyyy-MM-dd")))
                     {
                         e.Cell.Style.Add("background-color", schedule.scheduleColor);
                         e.Cell.Attributes.Add("scheduleId", schedule.scheduleId.ToString());
                         e.Cell.Text = schedule.scheduleTitle + "<br/>" + schedule.scheduleDescription;
                         e.Cell.Font.Bold = true;
                         e.Cell.Font.Size = FontUnit.Smaller;
                     }
                 }
             }

         }

         protected void CalendarSchedule_SelectionChanged(object sender, EventArgs e)
         {

         }
         /// <summary>
         /// 添加日程
         /// </summary>
         /// <param name="strScheduleTitle">日程标题</param>
         /// <param name="strScheduleDescription">日程描述</param>
         /// <param name="strhdColor">标识颜色</param>
         /// <param name="strlblSchedulePlanDate">计划时间</param>
         /// <returns>1：成功，2：失败</returns>
         [WebMethod]
         public static string AddSchedule(string strScheduleTitle, string strScheduleDescription, string strhdColor, string strlblSchedulePlanDate, string strScheduleID)
         {
             //添加
             if (strScheduleID == "NO")
             {
                 Schedule.Model.Schedule schedule = new Schedule.Model.Schedule();
                 schedule.scheduleCreateDate = DateTime.Now;
                 schedule.scheduleColor = strhdColor;
                 schedule.scheduleDescription = strScheduleDescription;
                 schedule.SchedulePlanDate = Convert.ToDateTime(strlblSchedulePlanDate);
                 schedule.scheduleTitle = strScheduleTitle;
                 schedule.userId = _userInfo.userId;
                 ScheduleBLL scheduleBLL = new ScheduleBLL();
                 if (scheduleBLL.Add(schedule))
                 {
                     return "";
                 }
                 else
                 {
                     return "";
                 }
             }
             else
             {
                 //编辑
                 Schedule.Model.Schedule schedule = new Schedule.Model.Schedule();
                 schedule.scheduleId = Convert.ToInt32(strScheduleID);
                 schedule.scheduleCreateDate = DateTime.Now;
                 schedule.scheduleColor = strhdColor;
                 schedule.scheduleDescription = strScheduleDescription;
                 schedule.SchedulePlanDate = Convert.ToDateTime(strlblSchedulePlanDate);
                 schedule.scheduleTitle = strScheduleTitle;
                 schedule.userId = _userInfo.userId;
                 ScheduleBLL scheduleBLL = new ScheduleBLL();
                 if (scheduleBLL.Update(schedule))
                 {
                     return "";
                 }
                 else
                 {
                     return "";
                 }
             }

         }
         /// <summary>
         /// 编辑日程
         /// </summary>
         /// <param name="shecduleID">日程id</param>
         /// <returns></returns>
         [WebMethod]
         public static string[] EditSchedule(string strScheduleID)
         {
             if (string.IsNullOrEmpty(strScheduleID))
             {
                 return new string[];
             }
             else
             {
                 int intScheduleID = Convert.ToInt32(strScheduleID);
                 ScheduleBLL scheduleBLL = new ScheduleBLL();
                 IList<Schedule.Model.Schedule> lstSchedules = scheduleBLL.GetModelList(" userid=" + _userInfo.userId + " and scheduleId=" + intScheduleID + "");
                 if (lstSchedules.Count > )
                 {
                     Schedule.Model.Schedule schedule = lstSchedules[];
                     return new string[] { schedule.scheduleId.ToString(), schedule.scheduleTitle, schedule.scheduleDescription, Convert.ToDateTime(schedule.scheduleCreateDate).ToString("yyyy-MM-dd hh:mm:ss"), schedule.scheduleColor, schedule.SchedulePlanDate.ToString("yyyy-MM-dd") };
                 }
                 else
                 {
                     return new string[];
                 }
             }
         }
         /// <summary>
         /// 删除日程
         /// </summary>
         /// <param name="secheduleID">日程id</param>
         /// <returns></returns>
         [WebMethod]
         public static string DeleteSchedule(string strScheduleID)
         {
             if (string.IsNullOrEmpty(strScheduleID))
             {
                 return "";
             }
             else
             {
                 int intScheduleID = Convert.ToInt32(strScheduleID);
                 ScheduleBLL scheduleBLL = new ScheduleBLL();
                 if (scheduleBLL.Delete(intScheduleID))
                 {
                     return "";
                 }
                 else
                 {
                     return "";
                 }
             }
         }
         /// <summary>
         /// 月改变时触发的事件
         /// </summary>
         /// <param name="sender"></param>
         /// <param name="e"></param>
         protected void CalendarSchedule_VisibleMonthChanged(object sender, MonthChangedEventArgs e)
         {
             dtCurrentDate = e.NewDate;
             dtPriviousDate = e.PreviousDate;
             _lstSchedules = _scheduleBLL.GetModelList(" userid=" + _userInfo.userId + " and SchedulePlanDate>='" + dtPriviousDate.AddDays(-) + "' and SchedulePlanDate <='" + dtCurrentDate.AddDays() + "'");
         }
     }
 }

ScheduleManage.aspx.cs

总结

这里只是实现了功能的业务逻辑，很多细节没有考虑到，也没采用form验证或者windows验证，就拿那个代码写着顺手就采用哪种方式来写了。数据库设计也没考虑范式要求，就把能想到的都列出来了，业务逻辑清楚了，添加其他的字段就不难了。这里也把项目分享一下，有需要的可以下载，如果觉得不错，不妨推荐一下。

项目下载：链接：http://pan.baidu.com/s/1qWwgYJy 密码：2qx0