jquery+java 仿Google日历

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

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

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

一）UI层处理

1）页面样式

<mce:style type="text/css"></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）画面代码如下，可以看代码注释

<%@ 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"></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>  <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>  <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是数据库中任务表对应的实体类）

/** * 获取目标月份任务信息 * @param month 月份 * @return */ public List<scheduleModel> getTasks(String month) { DateFormat df =new SimpleDateFormat("yyyy-MM"); String a = null; try { a = df.format(df.parse(String.valueOf(month))); } catch (ParseException e) { // TODO Auto-generated catch block e.printStackTrace(); } return localDb.find("from scheduleModel where CONVERT(varchar(100),buildDate, 23) like '"+a+"%' order by id asc"); } public List<scheduleModel> all() { return localDb.find("from scheduleModel"); } /** * 添加新任务并获取新任务的任务编号 * @param newsch * @return */ public int addTask(scheduleModel newsch) { int newId = -1; //用于保存新任务编号 Session session = this.localSessionFactory.getCurrentSession(); try { session.save("db.scheduleModel", newsch); String hql = "select max(id) from scheduleModel "; Query query = session.createQuery(hql); List lst = query.list(); if (lst.size()>0) { newId = (Integer) lst.get(0); //获取新id } } catch (Exception e) { e.printStackTrace(); } return newId; } /** * 删除任务 * @param taskId * @return */ public Boolean delTask(int taskId) { Session session = this.localSessionFactory.getCurrentSession(); try { String hql = " delete from scheduleModel where id=:tid"; Query query = session.createQuery(hql); query.setInteger("tid", taskId); int flag=query.executeUpdate(); if(flag>0) { return true; } return false; } catch (Exception e) { e.printStackTrace(); return false; } } /** * 更新任务 * @param newsch * @return */ public Boolean updateTask(scheduleModel newsch) { Session session = this.localSessionFactory.getCurrentSession(); try { //localDb.update("scheduleModel", newsch); String hql = " update scheduleModel set task=:task where id=:tid"; Query query = session.createQuery(hql); query.setInteger("tid", newsch.getId()); query.setString("task", newsch.getTask()); int flag=query.executeUpdate(); if(flag>0) return true; else return false; } catch (Exception e) { e.printStackTrace(); return false; } }

jquery+java 仿Google日历

linux安装cuda和cudnn

模拟手机设备：使用 Playwright 实现移动端自动化测试

Mellanox网卡开启SR-IOV

全面系统的AI学习路径，帮助普通人也能玩转AI

HTML 00 Tutorial

uni-app实现上拉加载

vue3编译优化之“静态提升”

又是一个月-20240513

flask 如何保证返回json有序

linux服务器设置ssh免密

如果在——遇到愛情

寫在過渡期

php遠程連接mysql

java中系統剪貼板的使用

php中文件的下載（以及下載的文件名中文亂碼）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結