jquery+java 仿Google日历 .

好久没有更新文章了，废话不多说，先直接上效果图

 

这次是要用jquery+java仿照一个google日历的功能，从数据库中读取任务显示在画面上，可以直接新建任务，或者编辑删除任务

 

 

在Eclipse中新建一个web project 。这次我们采用struct+spring+hibernate框架，实现起来可能有些难度。这里就不一一解释了

 

一）UI层处理

 

1）页面样式

[css] view plain copy print ?

1. <mce:style type="text/css"><!--  
2. /* 页面基本样式 */  
3. body, td, input {  
4.     font-family:Arial;  
5.     font-size:12px;  
6. }  
7.   
8. /* 日程表格样式 */  
9. #calTable {  
10.     border-collapse:collapse;  
11.     border:5px solid #C3D9FF;  
12. }  
13.   
14. /* 每日单元格样式 */  
15. td.calBox {  
16.     border:1px solid #CCDDEE;  
17.     width:100px;  
18.     height:80px;  
19.     vertical-align:top;  
20. }  
21.   
22. /* 每日单元格内日期样式 */  
23. td.calBox div.date {  
24.     background:#E8EEF7;  
25.     font-size:11px;  
26.     padding:2px;  
27.     cursor:pointer;  
28. }  
29.   
30. /* 每日单元格内周六周日样式 */  
31. td.sat div.date, td.sun div.date{  
32.     color:red;  
33. }  
34.   
35. /* 今日样式 */  
36. td.calBox div.today {  
37.     background:#BBCCDD;  
38. }  
39.   
40. /* 周标识样式 */  
41. td.day {  
42.     text-align:center;  
43.     background:#C3D9FF;  
44.     border:1px solid #CCDDEE;  
45.     color:#112ABB;  
46. }  
47.   
48. /* 当前显示的年月样式 */  
49. #dateInfo {  
50.     font-weight:bold;  
51.     margin:3px;  
52. }  
53.   
54. /* 添加任务div样式 */  
55. #addBox {  
56.     display:none;  
57.     position:absolute;  
58.     width:300px;  
59.     border:1px solid #000;  
60.     height:100px;  
61.     background:#FFFF99;  
62.     padding:10px;  
63. }  
64.   
65. /* 添加任务内日期样式 */  
66. #taskDate {  
67.     height:30px;  
68.     font-weight:bold;  
69.     padding:3px;  
70. }  
71.   
72. /* 按钮样式 */  
73. .taskBtn {  
74.     margin:10px;  
75. }  
76.   
77. /* 编辑任务div样式 */  
78. #editBox {  
79.     display:none;  
80.     position:absolute;  
81.     width:300px;  
82.     border:1px solid #000;  
83.     height:70px;  
84.     background:#99FF99;  
85.     padding:10px;  
86. }  
87.   
88. /* 任务样式 */  
89. div.task {  
90.     width:98px;  
91.     overflow:hidden;  
92.     white-space:nowrap;  
93.     background:#668CB3;  
94.     border:1px solid #FFF;  
95.     color:#FFF;  
96.     padding:1 2 1 3;  
97.     cursor:pointer;  
98. }  
99. --></mce:style><style type="text/css" mce_bogus="1">/* 页面基本样式 */  
100. body, td, input {  
101.     font-family:Arial;  
102.     font-size:12px;  
103. }  
104.   
105. /* 日程表格样式 */  
106. #calTable {  
107.     border-collapse:collapse;  
108.     border:5px solid #C3D9FF;  
109. }  
110.   
111. /* 每日单元格样式 */  
112. td.calBox {  
113.     border:1px solid #CCDDEE;  
114.     width:100px;  
115.     height:80px;  
116.     vertical-align:top;  
117. }  
118.   
119. /* 每日单元格内日期样式 */  
120. td.calBox div.date {  
121.     background:#E8EEF7;  
122.     font-size:11px;  
123.     padding:2px;  
124.     cursor:pointer;  
125. }  
126.   
127. /* 每日单元格内周六周日样式 */  
128. td.sat div.date, td.sun div.date{  
129.     color:red;  
130. }  
131.   
132. /* 今日样式 */  
133. td.calBox div.today {  
134.     background:#BBCCDD;  
135. }  
136.   
137. /* 周标识样式 */  
138. td.day {  
139.     text-align:center;  
140.     background:#C3D9FF;  
141.     border:1px solid #CCDDEE;  
142.     color:#112ABB;  
143. }  
144.   
145. /* 当前显示的年月样式 */  
146. #dateInfo {  
147.     font-weight:bold;  
148.     margin:3px;  
149. }  
150.   
151. /* 添加任务div样式 */  
152. #addBox {  
153.     display:none;  
154.     position:absolute;  
155.     width:300px;  
156.     border:1px solid #000;  
157.     height:100px;  
158.     background:#FFFF99;  
159.     padding:10px;  
160. }  
161.   
162. /* 添加任务内日期样式 */  
163. #taskDate {  
164.     height:30px;  
165.     font-weight:bold;  
166.     padding:3px;  
167. }  
168.   
169. /* 按钮样式 */  
170. .taskBtn {  
171.     margin:10px;  
172. }  
173.   
174. /* 编辑任务div样式 */  
175. #editBox {  
176.     display:none;  
177.     position:absolute;  
178.     width:300px;  
179.     border:1px solid #000;  
180.     height:70px;  
181.     background:#99FF99;  
182.     padding:10px;  
183. }  
184.   
185. /* 任务样式 */  
186. div.task {  
187.     width:98px;  
188.     overflow:hidden;  
189.     white-space:nowrap;  
190.     background:#668CB3;  
191.     border:1px solid #FFF;  
192.     color:#FFF;  
193.     padding:1 2 1 3;  
194.     cursor:pointer;  
195. }</style>  

<mce:style type="text/css"><!-- /* 页面基本样式 */ body, td, input { font-family:Arial; font-size:12px; } /* 日程表格样式 */ #calTable { border-collapse:collapse; border:5px solid #C3D9FF; } /* 每日单元格样式 */ td.calBox { border:1px solid #CCDDEE; width:100px; height:80px; vertical-align:top; } /* 每日单元格内日期样式 */ td.calBox div.date { background:#E8EEF7; font-size:11px; padding:2px; cursor:pointer; } /* 每日单元格内周六周日样式 */ td.sat div.date, td.sun div.date{ color:red; } /* 今日样式 */ td.calBox div.today { background:#BBCCDD; } /* 周标识样式 */ td.day { text-align:center; background:#C3D9FF; border:1px solid #CCDDEE; color:#112ABB; } /* 当前显示的年月样式 */ #dateInfo { font-weight:bold; margin:3px; } /* 添加任务div样式 */ #addBox { display:none; position:absolute; width:300px; border:1px solid #000; height:100px; background:#FFFF99; padding:10px; } /* 添加任务内日期样式 */ #taskDate { height:30px; font-weight:bold; padding:3px; } /* 按钮样式 */ .taskBtn { margin:10px; } /* 编辑任务div样式 */ #editBox { display:none; position:absolute; width:300px; border:1px solid #000; height:70px; background:#99FF99; padding:10px; } /* 任务样式 */ div.task { width:98px; overflow:hidden; white-space:nowrap; background:#668CB3; border:1px solid #FFF; color:#FFF; padding:1 2 1 3; cursor:pointer; } --></mce:style><style type="text/css" mce_bogus="1">/* 页面基本样式 */ body, td, input { font-family:Arial; font-size:12px; } /* 日程表格样式 */ #calTable { border-collapse:collapse; border:5px solid #C3D9FF; } /* 每日单元格样式 */ td.calBox { border:1px solid #CCDDEE; width:100px; height:80px; vertical-align:top; } /* 每日单元格内日期样式 */ td.calBox div.date { background:#E8EEF7; font-size:11px; padding:2px; cursor:pointer; } /* 每日单元格内周六周日样式 */ td.sat div.date, td.sun div.date{ color:red; } /* 今日样式 */ td.calBox div.today { background:#BBCCDD; } /* 周标识样式 */ td.day { text-align:center; background:#C3D9FF; border:1px solid #CCDDEE; color:#112ABB; } /* 当前显示的年月样式 */ #dateInfo { font-weight:bold; margin:3px; } /* 添加任务div样式 */ #addBox { display:none; position:absolute; width:300px; border:1px solid #000; height:100px; background:#FFFF99; padding:10px; } /* 添加任务内日期样式 */ #taskDate { height:30px; font-weight:bold; padding:3px; } /* 按钮样式 */ .taskBtn { margin:10px; } /* 编辑任务div样式 */ #editBox { display:none; position:absolute; width:300px; border:1px solid #000; height:70px; background:#99FF99; padding:10px; } /* 任务样式 */ div.task { width:98px; overflow:hidden; white-space:nowrap; background:#668CB3; border:1px solid #FFF; color:#FFF; padding:1 2 1 3; cursor:pointer; }</style>

 

2）导入jquery库和json2库文件

3）画面代码如下，可以看代码注释

[java] view plain copy print ?

1. <%@ page contentType="text/html; charset=utf-8" language="java"  %>  
2. <%@ taglib prefix="s" uri="/struts-tags" %>  
3. <html>  
4. <head>  
5. <meta http-equiv="Content-type" content="text/html; charset=utf-8" />  
6. <title>日程表</title>  
7. <mce:script type="text/javascript" src="${pageContext.request.contextPath}/common/jquery.js" mce_src="${pageContext.request.contextPath}/common/jquery.js"></mce:script>  
8. <mce:script type="text/javascript" src="${pageContext.request.contextPath}/common/json2.js" mce_src="${pageContext.request.contextPath}/common/json2.js"></mce:script>  
9. <mce:script type="text/javascript"><!--  
10. var daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);    //每月天数   
11. var today = new Today();    //今日对象   
12. var year = today.year;      //当前显示的年份   
13. var month = today.month;    //当前显示的月份   
14.   
15. //页面加载完毕后执行fillBox函数   
16. $(function() {  
17.     fillBox();  
18.      
19. });  
20.   
21.   
22.   
23. //今日对象   
24. function Today() {  
25.     this.now = new Date();  
26.     this.year = this.now.getFullYear();  
27.     this.month = this.now.getMonth();  
28.     this.day = this.now.getDate();  
29. }  
30.   
31. //根据当前年月填充每日单元格   
32. function fillBox() {  
33.     updateDateInfo();                   //更新年月提示   
34.     $("td.calBox").empty();             //清空每日单元格   
35.   
36.     var dayCounter = 1;                 //设置天数计数器并初始化为1   
37.     var cal = new Date(year, month, 1); //以当前年月第一天为参数创建日期对象   
38.     var startDay = cal.getDay();        //计算填充开始位置   
39.     //计算填充结束位置   
40.     var endDay = startDay + getDays(cal.getMonth(), cal.getFullYear()) - 1;  
41.   
42.     //如果显示的是今日所在月份的日程，设置day变量为今日日期   
43.     var day = -1;  
44.     if (today.year == year && today.month == month) {  
45.         day = today.day;  
46.     }  
47.   
48.     //从startDay开始到endDay结束，在每日单元格内填入日期信息   
49.     for (var i=startDay; i<=endDay; i++) {  
50.     ///////////////   
51.     var tempmonth; var tempday;  
52.     if(month+1<10 ){ tempmonth="0"+(month+1);}else{tempmonth=(month+1); }  
53.     if(dayCounter<10 ){ tempday="0"+dayCounter;}else{ tempday= dayCounter; }  
54.     ////////////////////////   
55.         if (dayCounter==day) {  
56.             $("#calBox" + i).html("<div class='date today' id='" + year + "-" + tempmonth + "-" + tempday + "' onclick='openAddBox(this)'>" + dayCounter + "</div>");  
57.         } else {  
58.             $("#calBox" + i).html("<div class='date' id='" + year + "-" + tempmonth + "-" + tempday + "' onclick='openAddBox(this)'>" + dayCounter + "</div>");  
59.         }  
60.         dayCounter++;  
61.     }  
62.     getTasks();                         //从服务器获取任务信息   
63.   $('#load-ing').hide();  
64. }  
65.   
66.   
67. //从服务器获取任务信息   
68. function getTasks() {   
69.     $.getJSON("schedule_getTasks.action",      
70.             "month="+year + "-" + (month + 1),  
71.             function(data)      
72.             {     
73.                 var json =  JSON.stringify(data);                     
74.                 //alert ("服务器端对象转换成字符串"+json);                                   
75.                 $.each(data.id,function(i){    
76.                      buildTask(data.buildDate[i], data.id[i], data.task[i]);  
77.                 });  
78.                       
79.             });   
80. }  
81.   
82.   
83. //根据日期、任务编号、任务内容在页面上创建任务节点   
84. function buildTask(buildDate, taskId, taskInfo) {  
85.     $("#" + buildDate).parent().append("<div id='task" + taskId + "' class='task' onclick='editTask(this)'>" + taskInfo + "</div>");  
86. }  
87.   
88. //判断是否闰年返回每月天数   
89. function getDays(month, year) {  
90.     if (1 == month) {  
91.         if (((0 == year % 4) && (0 != (year % 100))) || (0 == year % 400)) {  
92.             return 29;  
93.         } else {  
94.             return 28;  
95.         }  
96.     } else {  
97.         return daysInMonth[month];  
98.     }  
99. }  
100.   
101. //显示上月日程   
102. function prevMonth() {  
103.     if ((month - 1) < 0) {  
104.         month = 11;  
105.         year--;  
106.     } else {  
107.         month--;  
108.     }  
109.     fillBox();              //填充每日单元格   
110. }  
111.   
112. //显示下月日程   
113. function nextMonth() {  
114.     if((month + 1) > 11) {  
115.         month = 0;  
116.         year++;  
117.     } else {  
118.         month++;  
119.     }  
120.     fillBox();              //填充每日单元格   
121. }  
122.   
123. //显示本月日程   
124. function thisMonth() {  
125.     year = today.year;  
126.     month = today.month;  
127.     fillBox();              //填充每日单元格   
128. }  
129.   
130. //更新年月提示   
131. function updateDateInfo() {  
132.     $("#dateInfo").html(year + "年" + (month + 1) + "月");  
133. }  
134.   
135. //打开新建任务box   
136. function openAddBox(src) {  
137.       
138.     $("#taskDate").html(src.id);                    //设置新建日期   
139.     $("#taskInfo").val("");                         //初始化新建任务内容   
140.     var left = getLeft(src) + 15;                   //设置左边距   
141.     var top = getTop(src) + 15;                     //设置顶边距   
142.   //  $("#addBox").left(left).top(top).slideDown();   //显示新建任务box     
143.    $("#addBox").css("left",left).css("top",top).slideDown();   
144.       
145. }  
146.   
147. //向服务器提交新任务信息   
148. function addTask(obj) {  
149.       
150.     var taskInfo = $("#taskInfo").val();                //获取任务信息   
151.     $(obj).attr("disabled","disabled");   
152.     //检查任务信息是否为空   
153.     if ($.trim(taskInfo)=="") {  
154.         alert("请输入任务信息。");  
155.     } else {  
156.         var buildDate = $("#taskDate").html();          //获取任务日期   
157.   
158.         $.post("schedule_addTask.action",                          //服务器页面地址   
159.                 {  
160.                     singleTask: taskInfo,                     //任务信息参数   
161.                     month:year + "-" + (month + 1),  
162.                     singleBuildDate: buildDate                    //任务日期参数   
163.                 },  
164.                 function(date) {                          //回调函数    
165.                     //alert(date.singleId);   
166.                     buildTask(buildDate, date.singleId, taskInfo); //建立任务节点   
167.                     closeAddBox(obj);                          //关闭新建任务box   
168.                    
169.                 }  
170.             );  
171.     }  
172. }  
173.   
174. //关闭新建任务box   
175. function closeAddBox(obj) {  
176.     $("#addBox").slideUp("slow",function(){  
177.       $(obj).attr("disabled","");    
178.     });  
179. }  
180.   
181. //打开编辑任务box   
182. function editTask(src) {  
183.     $("#taskId").val(src.id.substr(4));             //对任务编号隐藏域赋值   
184.     $("#editTaskInfo").val(src.innerHTML);          //设置编辑内容   
185.     var left = getLeft(src) + 15;                   //设置左边距   
186.     var top = getTop(src) + 15;                     //设置顶边距   
187.    // $("#editBox").left(left).top(top).slideDown();  //显示编辑任务box   
188.    $("#editBox").css("left",left).css("top",top).slideDown();  //显示编辑任务box   
189. }  
190.   
191. //删除任务   
192. function delTask() {  
193.   
194.     var taskId = $("#taskId").val();                //获取任务编号   
195.     $.post("schedule_delTask.action",                          //服务器页面地址   
196.         {  
197.             singleId: taskId ,                         //任务编号参数   
198.             month:year + "-" + (month + 1)  
199.         },  
200.         function() {                                //回调函数   
201.             $("#task" + taskId).remove();           //在页面删除任务节点   
202.             closeEditBox();                         //关闭编辑box   
203.         }  
204.     );  
205.   
206. }  
207.   
208. //关闭编辑box   
209. function closeEditBox() {  
210.     $("#editBox").slideUp();  
211. }  
212.   
213. //更新任务信息   
214. function updateTask() {  
215.   
216.     var taskId = $("#taskId").val();                //任务编号    
217.     var taskInfo = $("#editTaskInfo").val();        //任务内容   
218.     //检查任务信息是否为空   
219.     if ($.trim(taskInfo)=="") {  
220.         alert("请输入任务信息。");  
221.     } else {  
222.         var buildDate = $("#taskDate").html();          //获取任务日期   
223.         $.post("schedule_updateTask.action",                      //服务器页面地址   
224.             {  
225.                 singleId: taskId,                     //年月参数   
226.                 singleTask: taskInfo,                //任务信息参数           
227.                 month:year + "-" + (month + 1),  
228.                 singleBuildDate: buildDate        
229.             },  
230.             function() {                            //回调函数   
231.                 $("#task" + taskId).html(taskInfo); //更新页面任务内容   
232.                 closeEditBox();                     //关闭编辑box   
233.             }  
234.         );  
235.     }  
236. }  
237.   
238. //返回对象对页面左边距   
239. function getLeft(src){  
240.     var obj = src;  
241.     var objLeft = obj.offsetLeft;  
242.     while(obj != null && obj.offsetParent != null && obj.offsetParent.tagName != "BODY"){  
243.         objLeft += obj.offsetParent.offsetLeft;  
244.         obj = obj.offsetParent;  
245.     }  
246.     return objLeft;  
247. }  
248.   
249. //返回对象对页面上边距   
250. function getTop(src){  
251.     var obj = src;  
252.     var objTop = obj.offsetTop;  
253.     while(obj != null && obj.offsetParent != null && obj.offsetParent.tagName != "BODY"){  
254.         objTop += obj.offsetParent.offsetTop;  
255.         obj = obj.offsetParent;  
256.     }  
257.     return objTop;  
258. }  
259. // --></mce:script>   
260. </head>  
261.   
262. <body>  
263. <h3>日程表</h3>  
264.   
265. <div id="load-ing" style="position:absolute;padding-left:6px;right:0px;top:0px;background-color: rgb(221, 68, 119);height:20px;width:76px;font-size:12px;padding-top: 1px; white-space: normal;color:#FFF;">  
266. 加载数据中...  
267. </div>  
268.   
269. <!-- 新建任务box -->  
270. <div id="addBox">  
271.     <div id="taskDate"></div>  
272.     内容：<input type="text" id="taskInfo" size="40" />  
273.     <div class="taskBtn">  
274.         <input type="button" value="创建新任务" onClick="addTask(this)"/>  
275.         <input type="button" value="取消" onClick="closeAddBox()"/>  
276.     </div>  
277. </div>  
278.   
279. <!-- 编辑任务box -->  
280. <div id="editBox">  
281.     <input type="hidden" id="taskId" />  
282.     内容：<input type="text" id="editTaskInfo" size="40"/>  
283.     <div class="taskBtn">  
284.         <input type="button" value="更新任务信息" onClick="updateTask()"/>  
285.         <input type="button" value="删除该任务" onClick="delTask()"/>  
286.         <input type="button" value="取消" onClick="closeEditBox()"/>  
287.     </div>  
288. </div>  
289.   
290. <!-- 日历表格 -->  
291. <table id="calTable">  
292. <tr>  
293.     <td colspan="7">  
294.         <input type="button" value="上月" onClick="prevMonth()"/>  
295.         <input type="button" value="本月" onClick="thisMonth()"/>  
296.         <input type="button" value="下月" onClick="nextMonth()"/>  
297.         <span id="dateInfo"></span>  
298.     </td>  
299. </tr>  
300. <tr>  
301.     <td class="day">周日</td>  
302.     <td class="day">周一</td>  
303.     <td class="day">周二</td>  
304.     <td class="day">周三</td>  
305.     <td class="day">周四</td>  
306.     <td class="day">周五</td>  
307.     <td class="day">周六</td>  
308. </tr>  
309. <tr>  
310.     <td class="calBox sun" id="calBox0"></td>  
311.     <td class="calBox" id="calBox1"></td>  
312.     <td class="calBox" id="calBox2"></td>  
313.     <td class="calBox" id="calBox3"></td>  
314.     <td class="calBox" id="calBox4"></td>  
315.     <td class="calBox" id="calBox5"></td>  
316.     <td class="calBox sat" id="calBox6"></td>  
317. </tr>  
318. <tr>  
319.     <td class="calBox sun" id="calBox7"></td>  
320.     <td class="calBox" id="calBox8"></td>  
321.     <td class="calBox" id="calBox9"></td>  
322.     <td class="calBox" id="calBox10"></td>  
323.     <td class="calBox" id="calBox11"></td>  
324.     <td class="calBox" id="calBox12"></td>  
325.     <td class="calBox sat" id="calBox13"></td>  
326. </tr>  
327. <tr>  
328.     <td class="calBox sun" id="calBox14"></td>  
329.     <td class="calBox" id="calBox15"></td>  
330.     <td class="calBox" id="calBox16"></td>  
331.     <td class="calBox" id="calBox17"></td>  
332.     <td class="calBox" id="calBox18"></td>  
333.     <td class="calBox" id="calBox19"></td>  
334.     <td class="calBox sat" id="calBox20"></td>  
335. </tr>  
336. <tr>  
337.     <td class="calBox sun" id="calBox21"></td>  
338.     <td class="calBox" id="calBox22"></td>  
339.     <td class="calBox" id="calBox23"></td>  
340.     <td class="calBox" id="calBox24"></td>  
341.     <td class="calBox" id="calBox25"></td>  
342.     <td class="calBox" id="calBox26"></td>  
343.     <td class="calBox sat" id="calBox27"></td>  
344. </tr>  
345. <tr>  
346.     <td class="calBox sun" id="calBox28"></td>  
347.     <td class="calBox" id="calBox29"></td>  
348.     <td class="calBox" id="calBox30"></td>  
349.     <td class="calBox" id="calBox31"></td>  
350.     <td class="calBox" id="calBox32"></td>  
351.     <td class="calBox" id="calBox33"></td>  
352.     <td class="calBox sat" id="calBox34"></td>  
353. </tr>  
354. <tr>  
355.     <td class="calBox sun" id="calBox35"></td>  
356.     <td class="calBox" id="calBox36"></td>  
357.     <td class="calBox" id="calBox37"></td>  
358.     <td class="calBox" id="calBox38"></td>  
359.     <td class="calBox" id="calBox39"></td>  
360.     <td class="calBox" id="calBox40"></td>  
361.     <td class="calBox sat" id="calBox41"></td>  
362. </tr>  
363. </table>  
364. </body>  
365. </html>  

<%@ page contentType="text/html; charset=utf-8" language="java" %> <%@ taglib prefix="s" uri="/struts-tags" %> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>日程表</title> <mce:script type="text/javascript" src="${pageContext.request.contextPath}/common/jquery.js" mce_src="${pageContext.request.contextPath}/common/jquery.js"></mce:script> <mce:script type="text/javascript" src="${pageContext.request.contextPath}/common/json2.js" mce_src="${pageContext.request.contextPath}/common/json2.js"></mce:script> <mce:script type="text/javascript"><!-- var daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); //每月天数 var today = new Today(); //今日对象 var year = today.year; //当前显示的年份 var month = today.month; //当前显示的月份 //页面加载完毕后执行fillBox函数 $(function() { fillBox(); }); //今日对象 function Today() { this.now = new Date(); this.year = this.now.getFullYear(); this.month = this.now.getMonth(); this.day = this.now.getDate(); } //根据当前年月填充每日单元格 function fillBox() { updateDateInfo(); //更新年月提示 $("td.calBox").empty(); //清空每日单元格 var dayCounter = 1; //设置天数计数器并初始化为1 var cal = new Date(year, month, 1); //以当前年月第一天为参数创建日期对象 var startDay = cal.getDay(); //计算填充开始位置 //计算填充结束位置 var endDay = startDay + getDays(cal.getMonth(), cal.getFullYear()) - 1; //如果显示的是今日所在月份的日程，设置day变量为今日日期 var day = -1; if (today.year == year && today.month == month) { day = today.day; } //从startDay开始到endDay结束，在每日单元格内填入日期信息 for (var i=startDay; i<=endDay; i++) { /////////////// var tempmonth; var tempday; if(month+1<10 ){ tempmonth="0"+(month+1);}else{tempmonth=(month+1); } if(dayCounter<10 ){ tempday="0"+dayCounter;}else{ tempday= dayCounter; } //////////////////////// if (dayCounter==day) { $("#calBox" + i).html("<div class='date today' id='" + year + "-" + tempmonth + "-" + tempday + "' onclick='openAddBox(this)'>" + dayCounter + "</div>"); } else { $("#calBox" + i).html("<div class='date' id='" + year + "-" + tempmonth + "-" + tempday + "' onclick='openAddBox(this)'>" + dayCounter + "</div>"); } dayCounter++; } getTasks(); //从服务器获取任务信息 $('#load-ing').hide(); } //从服务器获取任务信息 function getTasks() { $.getJSON("schedule_getTasks.action", "month="+year + "-" + (month + 1), function(data) { var json = JSON.stringify(data); //alert ("服务器端对象转换成字符串"+json); $.each(data.id,function(i){ buildTask(data.buildDate[i], data.id[i], data.task[i]); }); }); } //根据日期、任务编号、任务内容在页面上创建任务节点 function buildTask(buildDate, taskId, taskInfo) { $("#" + buildDate).parent().append("<div id='task" + taskId + "' class='task' onclick='editTask(this)'>" + taskInfo + "</div>"); } //判断是否闰年返回每月天数 function getDays(month, year) { if (1 == month) { if (((0 == year % 4) && (0 != (year % 100))) || (0 == year % 400)) { return 29; } else { return 28; } } else { return daysInMonth[month]; } } //显示上月日程 function prevMonth() { if ((month - 1) < 0) { month = 11; year--; } else { month--; } fillBox(); //填充每日单元格 } //显示下月日程 function nextMonth() { if((month + 1) > 11) { month = 0; year++; } else { month++; } fillBox(); //填充每日单元格 } //显示本月日程 function thisMonth() { year = today.year; month = today.month; fillBox(); //填充每日单元格 } //更新年月提示 function updateDateInfo() { $("#dateInfo").html(year + "年" + (month + 1) + "月"); } //打开新建任务box function openAddBox(src) { $("#taskDate").html(src.id); //设置新建日期 $("#taskInfo").val(""); //初始化新建任务内容 var left = getLeft(src) + 15; //设置左边距 var top = getTop(src) + 15; //设置顶边距 // $("#addBox").left(left).top(top).slideDown(); //显示新建任务box $("#addBox").css("left",left).css("top",top).slideDown(); } //向服务器提交新任务信息 function addTask(obj) { var taskInfo = $("#taskInfo").val(); //获取任务信息 $(obj).attr("disabled","disabled"); //检查任务信息是否为空 if ($.trim(taskInfo)=="") { alert("请输入任务信息。"); } else { var buildDate = $("#taskDate").html(); //获取任务日期 $.post("schedule_addTask.action", //服务器页面地址 { singleTask: taskInfo, //任务信息参数 month:year + "-" + (month + 1), singleBuildDate: buildDate //任务日期参数 }, function(date) { //回调函数 //alert(date.singleId); buildTask(buildDate, date.singleId, taskInfo); //建立任务节点 closeAddBox(obj); //关闭新建任务box } ); } } //关闭新建任务box function closeAddBox(obj) { $("#addBox").slideUp("slow",function(){ $(obj).attr("disabled",""); }); } //打开编辑任务box function editTask(src) { $("#taskId").val(src.id.substr(4)); //对任务编号隐藏域赋值 $("#editTaskInfo").val(src.innerHTML); //设置编辑内容 var left = getLeft(src) + 15; //设置左边距 var top = getTop(src) + 15; //设置顶边距 // $("#editBox").left(left).top(top).slideDown(); //显示编辑任务box $("#editBox").css("left",left).css("top",top).slideDown(); //显示编辑任务box } //删除任务 function delTask() { var taskId = $("#taskId").val(); //获取任务编号 $.post("schedule_delTask.action", //服务器页面地址 { singleId: taskId , //任务编号参数 month:year + "-" + (month + 1) }, function() { //回调函数 $("#task" + taskId).remove(); //在页面删除任务节点 closeEditBox(); //关闭编辑box } ); } //关闭编辑box function closeEditBox() { $("#editBox").slideUp(); } //更新任务信息 function updateTask() { var taskId = $("#taskId").val(); //任务编号 var taskInfo = $("#editTaskInfo").val(); //任务内容 //检查任务信息是否为空 if ($.trim(taskInfo)=="") { alert("请输入任务信息。"); } else { var buildDate = $("#taskDate").html(); //获取任务日期 $.post("schedule_updateTask.action", //服务器页面地址 { singleId: taskId, //年月参数 singleTask: taskInfo, //任务信息参数 month:year + "-" + (month + 1), singleBuildDate: buildDate }, function() { //回调函数 $("#task" + taskId).html(taskInfo); //更新页面任务内容 closeEditBox(); //关闭编辑box } ); } } //返回对象对页面左边距 function getLeft(src){ var obj = src; var objLeft = obj.offsetLeft; while(obj != null && obj.offsetParent != null && obj.offsetParent.tagName != "BODY"){ objLeft += obj.offsetParent.offsetLeft; obj = obj.offsetParent; } return objLeft; } //返回对象对页面上边距 function getTop(src){ var obj = src; var objTop = obj.offsetTop; while(obj != null && obj.offsetParent != null && obj.offsetParent.tagName != "BODY"){ objTop += obj.offsetParent.offsetTop; obj = obj.offsetParent; } return objTop; } // --></mce:script> </head> <body> <h3>日程表</h3> <div id="load-ing" style="position:absolute;padding-left:6px;right:0px;top:0px;background-color: rgb(221, 68, 119);height:20px;width:76px;font-size:12px;padding-top: 1px; white-space: normal;color:#FFF;"> 加载数据中... </div> <!-- 新建任务box --> <div id="addBox"> <div id="taskDate"></div> 内容：<input type="text" id="taskInfo" size="40" /> <div class="taskBtn"> <input type="button" value="创建新任务" onClick="addTask(this)"/> <input type="button" value="取消" onClick="closeAddBox()"/> </div> </div> <!-- 编辑任务box --> <div id="editBox"> <input type="hidden" id="taskId" /> 内容：<input type="text" id="editTaskInfo" size="40"/> <div class="taskBtn"> <input type="button" value="更新任务信息" onClick="updateTask()"/> <input type="button" value="删除该任务" onClick="delTask()"/> <input type="button" value="取消" onClick="closeEditBox()"/> </div> </div> <!-- 日历表格 --> <table id="calTable"> <tr> <td colspan="7"> <input type="button" value="上月" onClick="prevMonth()"/> <input type="button" value="本月" onClick="thisMonth()"/> <input type="button" value="下月" onClick="nextMonth()"/> <span id="dateInfo"></span> </td> </tr> <tr> <td class="day">周日</td> <td class="day">周一</td> <td class="day">周二</td> <td class="day">周三</td> <td class="day">周四</td> <td class="day">周五</td> <td class="day">周六</td> </tr> <tr> <td class="calBox sun" id="calBox0"></td> <td class="calBox" id="calBox1"></td> <td class="calBox" id="calBox2"></td> <td class="calBox" id="calBox3"></td> <td class="calBox" id="calBox4"></td> <td class="calBox" id="calBox5"></td> <td class="calBox sat" id="calBox6"></td> </tr> <tr> <td class="calBox sun" id="calBox7"></td> <td class="calBox" id="calBox8"></td> <td class="calBox" id="calBox9"></td> <td class="calBox" id="calBox10"></td> <td class="calBox" id="calBox11"></td> <td class="calBox" id="calBox12"></td> <td class="calBox sat" id="calBox13"></td> </tr> <tr> <td class="calBox sun" id="calBox14"></td> <td class="calBox" id="calBox15"></td> <td class="calBox" id="calBox16"></td> <td class="calBox" id="calBox17"></td> <td class="calBox" id="calBox18"></td> <td class="calBox" id="calBox19"></td> <td class="calBox sat" id="calBox20"></td> </tr> <tr> <td class="calBox sun" id="calBox21"></td> <td class="calBox" id="calBox22"></td> <td class="calBox" id="calBox23"></td> <td class="calBox" id="calBox24"></td> <td class="calBox" id="calBox25"></td> <td class="calBox" id="calBox26"></td> <td class="calBox sat" id="calBox27"></td> </tr> <tr> <td class="calBox sun" id="calBox28"></td> <td class="calBox" id="calBox29"></td> <td class="calBox" id="calBox30"></td> <td class="calBox" id="calBox31"></td> <td class="calBox" id="calBox32"></td> <td class="calBox" id="calBox33"></td> <td class="calBox sat" id="calBox34"></td> </tr> <tr> <td class="calBox sun" id="calBox35"></td> <td class="calBox" id="calBox36"></td> <td class="calBox" id="calBox37"></td> <td class="calBox" id="calBox38"></td> <td class="calBox" id="calBox39"></td> <td class="calBox" id="calBox40"></td> <td class="calBox sat" id="calBox41"></td> </tr> </table> </body> </html>

 

 

二）业务层

定义下列变量及其属性，用于记录单条任务的信息

private int singleId;
 private String singleTask;
 private Date singleBuildDate;

 

定义下列变量及其属性，用于记录多条任务的信息

private List<Integer> id;
 //任务内容
 private List<String> task;
 //任务日期
 private List<Date>  buildDate;

 

定义变量month及其属性，用于记录当前的月份和年份

 

三）dao层，对数据库中任务表的增删改查，部分代码如下（scheduleModel是数据库中任务表对应的实体类）

 

[java] view plain copy print ?

1. /** 
2.      * 获取目标月份任务信息 
3.      * @param month 月份 
4.      * @return 
5.      */  
6.     public List<scheduleModel> getTasks(String month)  
7.     {  
8.         DateFormat   df   =new   SimpleDateFormat("yyyy-MM");  
9.         String a = null;  
10.         try {  
11.             a = df.format(df.parse(String.valueOf(month)));  
12.         } catch (ParseException e) {  
13.             // TODO Auto-generated catch block   
14.             e.printStackTrace();  
15.         }  
16.         return localDb.find("from scheduleModel where CONVERT(varchar(100),buildDate, 23)  like '"+a+"%' order by id asc");  
17.     }  
18.   
19.     public List<scheduleModel> all()  
20.     {  
21.         return localDb.find("from scheduleModel");  
22.     }  
23.     /** 
24.      * 添加新任务 并获取新任务的任务编号 
25.      * @param newsch 
26.      * @return 
27.      */  
28.     public int addTask(scheduleModel newsch)  
29.     {  
30.          int newId = -1;     //用于保存新任务编号   
31.          Session session = this.localSessionFactory.getCurrentSession();  
32.             try {  
33.                 session.save("db.scheduleModel", newsch);  
34.                   
35.                 String hql = "select max(id)  from scheduleModel ";  
36.                 Query query = session.createQuery(hql);  
37.                 List lst = query.list();  
38.                 if (lst.size()>0) {  
39.                     newId = (Integer) lst.get(0);        //获取新id   
40.                 }  
41.                   
42.             } catch (Exception e) {  
43.                 e.printStackTrace();  
44.                   
45.             }  
46.             return newId;  
47.     }  
48.       
49.     /** 
50.      * 删除任务 
51.      * @param taskId 
52.      * @return 
53.      */  
54.     public Boolean delTask(int taskId)  
55.     {  
56.         Session session = this.localSessionFactory.getCurrentSession();  
57.         try {  
58.             String hql = " delete from scheduleModel where id=:tid";  
59.             Query query = session.createQuery(hql);  
60.             query.setInteger("tid", taskId);  
61.             int flag=query.executeUpdate();  
62.             if(flag>0)  
63.             {  
64.                 return true;  
65.             }  
66.             return false;  
67.               
68.         } catch (Exception e) {  
69.             e.printStackTrace();  
70.             return false;  
71.         }  
72.     }  
73.     /** 
74.      * 更新任务 
75.      * @param newsch 
76.      * @return 
77.      */  
78.     public Boolean updateTask(scheduleModel newsch)  
79.     {  
80.         Session session = this.localSessionFactory.getCurrentSession();  
81.         try {  
82.             //localDb.update("scheduleModel", newsch);   
83.             String hql = " update scheduleModel  set task=:task where id=:tid";  
84.             Query query = session.createQuery(hql);  
85.             query.setInteger("tid", newsch.getId());  
86.             query.setString("task", newsch.getTask());  
87.             int flag=query.executeUpdate();  
88.             if(flag>0)             
89.                 return true;  
90.             else return false;  
91.         } catch (Exception e) {  
92.             e.printStackTrace();  
93.             return false;  
94.         }  
95.     }