[Asp.net]Calendar+JqueryUi实现日程管理（右键菜单，添加，编辑，删除，源码）
推荐一篇文章，大家有兴趣的可以看看，有源码哦！
项目
![[Asp.net]Calendar+JqueryUi实现日程管理（右键菜单，添加，编辑，删除，源码）_第1张图片](http://img.e-com-net.com/image/info8/a46c21329c0c461db1ba6abb12832c98.png)
数据库设计
1 USE [Wolfy.Schedule] 2 GO 3 4 /****** Object: Table [dbo].[TB_Schedule] Script Date: 2014/7/5 16:30:00 ******/ 5 SET ANSI_NULLS ON 6 GO 7 8 SET QUOTED_IDENTIFIER ON 9 GO 10 11 SET ANSI_PADDING ON 12 GO 13 14 CREATE TABLE [dbo].[TB_Schedule]( 15 [scheduleId] [int] IDENTITY(1,1) NOT NULL, 16 [scheduleDescription] [nvarchar](320) NULL, 17 [scheduleCreateDate] [datetime] NULL, 18 [scheduleColor] [varchar](32) NULL, 19 [scheduleTitle] [nvarchar](160) NULL, 20 [userId] [int] NOT NULL, 21 [schedulePlanDate] [datetime] NULL, 22 CONSTRAINT [PK_TB_Schedule] PRIMARY KEY CLUSTERED 23 ( 24 [scheduleId] ASC 25 )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY] 26 ) ON [PRIMARY] 27 28 GO 29 30 SET ANSI_PADDING OFF 31 GO
1 USE [Wolfy.Schedule] 2 GO 3 4 /****** Object: Table [dbo].[TB_UserInfo] Script Date: 2014/7/5 16:30:22 ******/ 5 SET ANSI_NULLS ON 6 GO 7 8 SET QUOTED_IDENTIFIER ON 9 GO 10 11 SET ANSI_PADDING ON 12 GO 13 14 CREATE TABLE [dbo].[TB_UserInfo]( 15 [userId] [int] IDENTITY(1,1) NOT NULL, 16 [userName] [nvarchar](20) NULL, 17 [userGender] [bit] NULL, 18 [userLoginName] [varchar](32) NULL, 19 [userPwd] [varchar](32) NULL, 20 [userCreateDate] [datetime] NULL, 21 [userIsDelete] [bit] NULL, 22 [userBirthday] [datetime] NULL, 23 [userLoginCount] [int] NULL, 24 [userAge] [int] NULL, 25 CONSTRAINT [PK_TB_UserInfo] PRIMARY KEY CLUSTERED 26 ( 27 [userId] ASC 28 )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY] 29 ) ON [PRIMARY] 30 31 GO 32 33 SET ANSI_PADDING OFF 34 GO
日程管理界面
添加
![[Asp.net]Calendar+JqueryUi实现日程管理（右键菜单，添加，编辑，删除，源码）_第2张图片](http://img.e-com-net.com/image/info8/005fc25933e24e67babd99aabe8cf29a.jpg)
![[Asp.net]Calendar+JqueryUi实现日程管理（右键菜单，添加，编辑，删除，源码）_第3张图片](http://img.e-com-net.com/image/info8/b19062a3e0eb49d3aec5b754039b1f5e.jpg)
![[Asp.net]Calendar+JqueryUi实现日程管理（右键菜单，添加，编辑，删除，源码）_第4张图片](http://img.e-com-net.com/image/info8/799f65f6922741d193e7140f5f4f03a0.jpg)
编辑
![[Asp.net]Calendar+JqueryUi实现日程管理（右键菜单，添加，编辑，删除，源码）_第5张图片](http://img.e-com-net.com/image/info8/f96d4e5fbde54a14a1a414750853fb51.jpg)
![[Asp.net]Calendar+JqueryUi实现日程管理（右键菜单，添加，编辑，删除，源码）_第6张图片](http://img.e-com-net.com/image/info8/de61be60c7dc4b2192587bdf8e415507.jpg)
![[Asp.net]Calendar+JqueryUi实现日程管理（右键菜单，添加，编辑，删除，源码）_第7张图片](http://img.e-com-net.com/image/info8/9f8645cc477441c79a6433f702ddebfd.png)
删除
![[Asp.net]Calendar+JqueryUi实现日程管理（右键菜单，添加，编辑，删除，源码）_第8张图片](http://img.e-com-net.com/image/info8/5515825a74c146d789568452388565d9.jpg)
![[Asp.net]Calendar+JqueryUi实现日程管理（右键菜单，添加，编辑，删除，源码）_第9张图片](http://img.e-com-net.com/image/info8/7ad0a2f03d4a4488b898dc7e8319b5d5.jpg)
代码实现
1 <%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/Main.Master" CodeBehind="ScheduleManage.aspx.cs" Inherits="Wolfy.ScheduleDemo.ScheduleManage" %> 2 3 <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> 4 <link href="js/Dialog/css/redmond/jquery-ui-1.10.4.custom.css" rel="stylesheet" /> 5 <script type="text/javascript" src="js/jquery-1.11.0.js">script> 6 <script type="text/javascript" src="js/Dialog/js/jquery-ui-1.10.4.custom.js">script> 7 <script type="text/javascript" src="js/jquery.contextmenu.r2.packed.js">script> 8 <script type="text/javascript"> 9 $(function () { 10 11 $("#dialog").dialog({ 12 autoOpen: false,// 初始化之后，是否立即显示对话框，默认为 true 13 width: 450, 14 modal: true,//是否模式对话框，默认为 false 15 draggable: true,//是否允许拖动，默认为 true 16 resizable: true,//是否可以调整对话框的大小，默认为 true 17 title: "添加日程", 18 position: "center",//用来设置对话框的位置，有三种设置方法 1. 一个字符串，允许的值为 'center', 'left', 'right', 'top', 'bottom'. 此属性的默认值即为 'center'，表示对话框居中。 2. 一个数组，包含两个以像素为单位的位置，例如， var dialogOpts = { position: [100, 100] }; 3. 一个字符串组成的数组，例如， ['right','top']，表示对话框将会位于窗口的右上角。var dialogOpts = { position: ["left", "bottom"] }; 19 20 }); 21 22 $("#btnSave").click(function () { 23 var strScheduleTitle = $("#<%=txtScheduleTitle.ClientID%>").val(); 24 var strScheduleDescription = $("#<%=txtScheduleDescription.ClientID%>").val(); 25 var strhdColor = $("#<%=hdColor.ClientID%>").val(); 26 var strlblSchedulePlanDate = $("#<%=lblSchedulePlanDate.ClientID%>").html(); 27 var strScheduleID = $("#<%=hdScheduleID.ClientID%>").val(); 28 29 30 $.ajax({ 31 type: "POST",// 32 url: "ScheduleManage.aspx/AddSchedule", 33 data: "{strScheduleTitle:'" + strScheduleTitle + "',strScheduleDescription:'" + strScheduleDescription + "',strhdColor:'" + strhdColor + "',strlblSchedulePlanDate:'" + strlblSchedulePlanDate + "',strScheduleID:'" + strScheduleID + "'}", 34 contentType: "application/json", 35 dataType: "json", 36 success: function (data) { 37 $("#dialog").dialog("close"); 38 if (data.d == 1) { 39 40 alert("添加成功") 41 } else if (data.d == 2) { 42 alert("添加失败"); 43 } else if (data.d == 3) { 44 alert("修改成功"); 45 } else { 46 alert("修改失败"); 47 } 48 window.location = window.location; 49 }, 50 error: function (msg) { 51 alert(msg.status); 52 } 53 }); 54 }); 55 // 打开日程添加窗口 56 $("td[date]").each(function () { 57 58 //为每个单元格绑定右键菜单 59 $(this).contextMenu('myMenu1', { 60 //绑定右键菜单，通过ul,li的ID绑定 61 bindings: 62 { 63 'add': function (e) { 64 65 $("#<%=lblSchedulePlanDate.ClientID%>").text($("#" + e.id).attr("date")); 66 $("#<%=txtScheduleTitle.ClientID%>").val(""); 67 $("#<%=txtScheduleDescription.ClientID%>").val(""); 68 $("#btnSave").val("添加"); 69 $("#dialog").dialog("open"); 70 }, 71 'edit': function (e) { 72 var strScheduleID = $("#" + e.id).attr("scheduleId"); 73 if (strScheduleID == "NO") { 74 alert("亲，该日没有日程安排，无法编辑，谢谢！"); 75 return; 76 } else { 77 $("#<%=hdScheduleID.ClientID%>").val(strScheduleID); 78 } 79 $("#btnSave").val("编辑"); 80 81 $.ajax({ 82 type: "POST",// 83 url: "ScheduleManage.aspx/EditSchedule", 84 data: "{strScheduleID:'" + strScheduleID + "'}", 85 contentType: "application/json", 86 dataType: "json", 87 success: function (data) { 88 $("#<%=txtScheduleTitle.ClientID%>").val(data.d[1]); 89 $("#<%=txtScheduleDescription.ClientID%>").val(data.d[1]); 90 91 $("#<%=hdColor.ClientID%>").val(data.d[4]); 92 $("#" + data.d[4]).text("√"); 93 $("#" + data.d[4]).siblings().text(""); 94 95 $("#<%=lblSchedulePlanDate.ClientID%>").html(data.d[5]); 96 97 }, 98 error: function (msg) { 99 alert(msg.status); 100 } 101 }); 102 $("#dialog").dialog("open"); 103 }, 104 'delete': function (e) { 105 var strScheduleID = $("#" + e.id).attr("scheduleId"); 106 107 if (strScheduleID == "NO") { 108 alert("亲，该日没有日程安排，无法删除，谢谢！"); 109 return; 110 } 111 112 $.ajax({ 113 type: "POST",// 114 url: "ScheduleManage.aspx/DeleteSchedule", 115 data: "{strScheduleID:'" + strScheduleID + "'}", 116 contentType: "application/json", 117 dataType: "json", 118 success: function (data) { 119 if (data.d == 1) { 120 $("#dialog").dialog("close"); 121 alert("删除成功"); 122 123 } else { 124 alert("删除失败"); 125 } 126 window.location = window.location; 127 }, 128 error: function (msg) { 129 alert(msg.status); 130 } 131 }); 132 } 133 } 134 }); 135 136 }); 137 $("#btnCancel").click(function () { 138 $("#dialog").dialog("close"); 139 }); 140 $("#tbColor tr td").each(function () { 141 $(this).click(function () { 142 $(this).text("√"); 143 $("#<%=hdColor.ClientID%>").val($(this).css("background-color")); 144 $(this).siblings().text(""); 145 }); 146 }); 147 }); 148 script> 149 150 asp:Content> 151 <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"> 152 <asp:Calendar ID="CalendarSchedule" runat="server" 153 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"> 154 <DayHeaderStyle BackColor="#FFCC66" Font-Bold="True" Height="1px" /> 155 <NextPrevStyle Height="10px" Font-Size="9pt" ForeColor="#FFFFCC">NextPrevStyle> 156 <OtherMonthDayStyle ForeColor="#CC9966" /> 157 <SelectedDayStyle BackColor="#CCCCFF" Font-Bold="True" /> 158 <SelectorStyle BackColor="#FFCC66" /> 159 <TitleStyle BackColor="#990000" Height="50px" Font-Bold="True" Font-Size="9pt" ForeColor="#FFFFCC" /> 160 <TodayDayStyle BackColor="#FFCC66" ForeColor="White" /> 161 asp:Calendar> 162 <div style="display: none" id="dialog"> 163 <table class="insert-tab" width="100%"> 164 <tbody> 165 <tr> 166 <th width="120"><i class="require-red">*i>日程标题：th> 167 <td> 168 <asp:TextBox ID="txtScheduleTitle" CssClass="common-text required" runat="server">asp:TextBox> 169 td> 170 tr> 171 <tr> 172 <th>日程描述：th> 173 <td> 174 <asp:TextBox ID="txtScheduleDescription" TextMode="MultiLine" CssClass="common-textarea" cols="30" Style="width: 98%;" Rows="5" runat="server">asp:TextBox> 175 td> 176 tr> 177 <tr> 178 <th>日程创建时间：th> 179 <td> 180 <asp:Literal Text="" ID="ltlScheduleCreateDate" runat="server" />td> 181 tr> 182 <tr> 183 <th><i class="require-red">*i>日程颜色标识：th> 184 <td> 185 <table id="tbColor" width="100%" border="1" style="height: 30px;"> 186 <tr align="center"> 187 <td id="red" style="background-color: red">√td> 188 <td id="yellow" style="background-color: yellow">td> 189 <td id="green" style="background-color: green">td> 190 <td id="blue" style="background-color: blue">td> 191 tr> 192 table> 193 td> 194 tr> 195 <tr> 196 <th>计划时间：th> 197 <td> 198 <asp:Label Text="" ID="lblSchedulePlanDate" runat="server" /> 199 td> 200 tr> 201 <tr align="center"> 202 <th>th> 203 <td> 204 <input type="button" id="btnSave" class="btn btn-primary btn6 mr10" name="name" value="添加" /> 205 <input type="button" id="btnCancel" class="btn btn6" name="name" value="取消" /> 206 td> 207 tr> 208 209 tbody> 210 table> 211 <asp:HiddenField runat="server" ID="hdColor" Value="red" /> 212 <asp:HiddenField runat="server" ID="hdScheduleID" Value="NO" /> 213 214 div> 215 <div class="contextMenu" id="myMenu1"> 216 <ul> 217 <li id="add">添加li> 218 <li id="edit">编辑li> 219 <li id="delete">删除li> 220 ul> 221 div> 222 223 asp:Content>
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Text; 5 using System.Web; 6 using System.Web.Services; 7 using System.Web.UI; 8 using System.Web.UI.WebControls; 9 using Wolfy.Schedule.BLL; 10 using Wolfy.Schedule.Model; 11 namespace Wolfy.ScheduleDemo 12 { 13 public partial class ScheduleManage : PageBase 14 { 15 private static Schedule.Model.UserInfo _userInfo = null; 16 Schedule.BLL.ScheduleBLL _scheduleBLL = new ScheduleBLL(); 17 IList_lstSchedules = null; 18 DateTime dtCurrentDate = DateTime.Now; //当前 19 DateTime dtPriviousDate = DateTime.Now.AddMonths(-1); //上一个月 20 protected void Page_Load(object sender, EventArgs e) 21 { 22 if (!IsPostBack) 23 { 24 25 _userInfo = Session["user"] as UserInfo; 26 this.ltlScheduleCreateDate.Text = DateTime.Now.ToString("yyyy-MM-dd hh:mm:ss"); 27 this.CalendarSchedule.SelectedDate = DateTime.Now; 28 } 29 30 _lstSchedules = _scheduleBLL.GetModelList(" userid=" + _userInfo.userId + " and SchedulePlanDate>='" + dtPriviousDate.AddDays(-10) + "' and SchedulePlanDate <='" + dtCurrentDate.AddDays(30) + "'"); 31 } 32 /// 33 /// 初始化日历 34 /// 35 /// 36 /// 37 protected void CalendarSchedule_DayRender(object sender, DayRenderEventArgs e) 38 { 39 40 e.Cell.Attributes.Add("date", e.Day.Date.ToString("yyyy-MM-dd")); 41 e.Cell.Attributes.Add("id", "td" + e.Day.Date.ToString("MMdd")); 42 e.Cell.Attributes.Add("scheduleId", "NO"); 43 if (_lstSchedules != null && _lstSchedules.Count > 0) 44 { 45 46 foreach (Schedule.Model.Schedule schedule in _lstSchedules) 47 { 48 if (e.Day.Date.ToString("yyyy-MM-dd").Equals(schedule.SchedulePlanDate.ToString("yyyy-MM-dd"))) 49 { 50 e.Cell.Style.Add("background-color", schedule.scheduleColor); 51 e.Cell.Attributes.Add("scheduleId", schedule.scheduleId.ToString()); 52 e.Cell.Text = schedule.scheduleTitle + "
" + schedule.scheduleDescription; 53 e.Cell.Font.Bold = true; 54 e.Cell.Font.Size = FontUnit.Smaller; 55 } 56 } 57 } 58 59 60 61 } 62 63 protected void CalendarSchedule_SelectionChanged(object sender, EventArgs e) 64 { 65 66 67 68 } 69 ///70 /// 添加日程 71 /// 72 /// 日程标题 73 /// 日程描述 74 /// 标识颜色 75 /// 计划时间 76 /// 1：成功，2：失败 77 [WebMethod] 78 public static string AddSchedule(string strScheduleTitle, string strScheduleDescription, string strhdColor, string strlblSchedulePlanDate, string strScheduleID) 79 { 80 //添加 81 if (strScheduleID == "NO") 82 { 83 Schedule.Model.Schedule schedule = new Schedule.Model.Schedule(); 84 schedule.scheduleCreateDate = DateTime.Now; 85 schedule.scheduleColor = strhdColor; 86 schedule.scheduleDescription = strScheduleDescription; 87 schedule.SchedulePlanDate = Convert.ToDateTime(strlblSchedulePlanDate); 88 schedule.scheduleTitle = strScheduleTitle; 89 schedule.userId = _userInfo.userId; 90 ScheduleBLL scheduleBLL = new ScheduleBLL(); 91 if (scheduleBLL.Add(schedule)) 92 { 93 return "1"; 94 } 95 else 96 { 97 return "2"; 98 } 99 } 100 else 101 { 102 //编辑 103 Schedule.Model.Schedule schedule = new Schedule.Model.Schedule(); 104 schedule.scheduleId = Convert.ToInt32(strScheduleID); 105 schedule.scheduleCreateDate = DateTime.Now; 106 schedule.scheduleColor = strhdColor; 107 schedule.scheduleDescription = strScheduleDescription; 108 schedule.SchedulePlanDate = Convert.ToDateTime(strlblSchedulePlanDate); 109 schedule.scheduleTitle = strScheduleTitle; 110 schedule.userId = _userInfo.userId; 111 ScheduleBLL scheduleBLL = new ScheduleBLL(); 112 if (scheduleBLL.Update(schedule)) 113 { 114 return "3"; 115 } 116 else 117 { 118 return "4"; 119 } 120 } 121 122 } 123 /// 124 /// 编辑日程 125 /// 126 /// 日程id 127 /// 128 [WebMethod] 129 public static string[] EditSchedule(string strScheduleID) 130 { 131 if (string.IsNullOrEmpty(strScheduleID)) 132 { 133 return new string[0]; 134 } 135 else 136 { 137 int intScheduleID = Convert.ToInt32(strScheduleID); 138 ScheduleBLL scheduleBLL = new ScheduleBLL(); 139 IList lstSchedules = scheduleBLL.GetModelList(" userid=" + _userInfo.userId + " and scheduleId=" + intScheduleID + ""); 140 if (lstSchedules.Count > 0) 141 { 142 Schedule.Model.Schedule schedule = lstSchedules[0]; 143 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") }; 144 } 145 else 146 { 147 return new string[0]; 148 } 149 } 150 } 151 /// 152 /// 删除日程 153 /// 154 /// 日程id 155 /// 156 [WebMethod] 157 public static string DeleteSchedule(string strScheduleID) 158 { 159 if (string.IsNullOrEmpty(strScheduleID)) 160 { 161 return "0"; 162 } 163 else 164 { 165 int intScheduleID = Convert.ToInt32(strScheduleID); 166 ScheduleBLL scheduleBLL = new ScheduleBLL(); 167 if (scheduleBLL.Delete(intScheduleID)) 168 { 169 return "1"; 170 } 171 else 172 { 173 return "0"; 174 } 175 } 176 } 177 /// 178 /// 月改变时触发的事件 179 /// 180 /// 181 /// 182 protected void CalendarSchedule_VisibleMonthChanged(object sender, MonthChangedEventArgs e) 183 { 184 dtCurrentDate = e.NewDate; 185 dtPriviousDate = e.PreviousDate; 186 _lstSchedules = _scheduleBLL.GetModelList(" userid=" + _userInfo.userId + " and SchedulePlanDate>='" + dtPriviousDate.AddDays(-10) + "' and SchedulePlanDate <='" + dtCurrentDate.AddDays(30) + "'"); 187 } 188 } 189 }