dhtmlxScheduler 4.1
一、dhtmlxScheduler简介
dhtmlxScheduler是一个JavaScript日程安排控件，类似于Google日历，提供了丰富的和直观的解决方案来管理事件,任务和约定。事件可以显示在10个完全可定制的视图,包括天,周,月,时间表,网格。日历事件通过Ajax动态加载，支持通过拖放功能调整事件日期和时间。支持iCal ( iCal 又称 iCalendar，是一种标准的互联网日历格式，让用户能够在各种计算机和各种程序之间创建和共享电子日历 )、XML、JSON三种数据交换格式，可以轻松地管理并保持事件的跟踪,这样用户不会错过开会,忘记预约,或失去分配的任务。
二、dhtmlScheduler的使用方法
1 、根据自己的需要，想做一天的计划还是一周的计划或者是一个月、一年的计划，单击图2-1红色标注的按钮可以切换Day、Week、Month、Year的显示方式。
图2-1
2、双击自己想要添加计划的时间对应的表格，或者可以拖动鼠标选择一段时间，会弹出编辑的对话框，标注上自己的计划，点击保存按钮。
图2-2
3、双击建立的计划，会弹出编辑的对话框，可以对以建立的计划进行修改。
4、单击建立的计划，会相应对应的菜单，可以进行编辑、修改或删除操作。
图3-3
三、dhtmlxScheduler
1、一个基础的dhtmlxScheduler开发程序
我们要考虑建立一个标准的调度程序从数据库加载数据并保存。
准备工作：http://www.dhtmlx.com/docs/products/dhtmlxScheduler/index.shtml下载资源文件
步骤1、一个新的HTML文件和所需的代码文件（dhtmlxscheduler.js、dhtmlxscheduler.css）及相应的资源（codebase文件夹）
<!DOCTYPE html>
<html>
<head>
<title>How to start</title>
<script src="../scheduler/dhtmlxscheduler.js" type="text/javascript"></script>
<link rel="stylesheet" href="../scheduler/dhtmlxscheduler.css" type="text/css">
</head>
<body>
//your code will be here
</body>
</html>
dhtmlxScheduler包的结构：
<!--[if !supportLists]-->· <!--[endif]-->sources -库的源代码文件。不缩小,易于阅读的文件。包主要是用于组件的调试。
<!--[if !supportLists]-->· <!--[endif]-->samples –样本代码示例。
<!--[if !supportLists]-->· <!--[endif]-->docs -文档的全部文档组件。
<!--[if !supportLists]-->· <!--[endif]-->codebase –scheduler的应用程序需要使用这个文件夹下的资源。
步骤2、页面布局，schedule初始化之前，定义相关的DIV容器
<div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%;'>
<div class="dhx_cal_navline">
<div class="dhx_cal_prev_button"> </div>
<div class="dhx_cal_next_button"> </div>
<div class="dhx_cal_today_button"></div>
<div class="dhx_cal_date"></div>
<div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
<div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
<div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
</div>
<div class="dhx_cal_header"></div>
<div class="dhx_cal_data"></div>
</div>
步骤3、在不同的浏览器的全屏模式下正常工作,为schedule定义以下风格:
<style type="text/css" media="screen">
html, body{
margin:0px;
padding:0px;
height:100%;
overflow:hidden;
}
</style>
如果你不使用全屏模式,不需要特别指定的风格，可以在main的div css属性直接设置:
<div id="scheduler_here" class="dhx_cal_container"
style='width:200px; height:300px; padding:10px;'>
步骤4、完成了准备工作之后,可以初始化。scheduler是一个静态的对象，在页面上,可以实例化一次。
//添加初始化函数, 在body的onload事件中调用上面的init函数
<script>
function init() {
scheduler.config.xml_date="%Y-%m-%d %H:%i";
scheduler.init('scheduler_here',null,"week");
scheduler.load("event!query.action");
}
</script>
<body οnlοad="init();">
scheduler.config.xml_date="%Y-%m-%d %H:%i"
DataTime数据类型的格式是“Y%-%m-d% H%:%i,不同于预期的日期格式调度器(“%m/%d/%Y %H:%i”)。提供正确的数据转换,应该更改默认scheduler的格式,可以通过指定xml_date配置选项。
scheduler.init('scheduler_here',null,"week")
void init(string| DOM element container [, Date date, string view] );包含三个参数，container：dhtmlxScheduler对象将被初始化的一个HTML容器(或其id)
date：默认当前时间
view：默认周
scheduler.load("event!query.action")
void load(string url [, string type, function callback] );
url: 服务器端url(可能是一个静态文件或一个服务器端脚本,输出数据为XML
type: (' json ',“xml”,“ical”)的数据类型。默认值——“xml”
callback:回调函数
如果您现在运行这个应用程序,你已经可以看到页面上的scheduler。但它不会包含任何数据。
2、scheduler的结构图
图3-1、图3-2、图3-3为scheduler的页面布局的结构图：
图3-1 以天为单位的结构
图3-2 以周为单位的结构图
图3-3 以月为单位的结构图
3、将scheduler集成到SSH
3、1 配置SSH环境
1、拷贝依赖包
-spring3.0 25
-spring3.0.4\dist 21
-spring依赖包\lib\jakarta-commons 1
-spring依赖包\lib\aspectj 2
-spring依赖包\lib\aopalliance 1
-hibernate3.6.10 11
-hibernate3.6: hibernate3 1
-hibernate3.6\lib\required 6
-hibernate3.6\lib\jpa 1
-日志转换
-slf4j-1.6.1\slf4j-1.6.1 1
-log4j-1.2.17\apache-log4j-1.2.17 1
-数据库的链接包
- mysql-connector-java-5.1.22-bin 1
-struts2.2.1
-取空项目中的包 7
-sturts和spring集成的包 1
-truts2-spring-plugin-2.2.1
-删除重复的包：javassist -1
2、spring与hibernate集成
-把SessionFactory、session、Transaction都交给spring管理
-注意：
*SessionFactory要注入到UserDao中
*做测试的时候只能对UserService做，不能对UserDao
因为事物管理的是UserService
3、spring与struts集成
-Web.xml
-增加Struts的Fileter
-增添Listener
-修改applicationContext.xml
<bean id="sessionFactory" class="org.springframework.orm.hibernate3.LocalSessionFactoryBean">
<property name="configLocation" value="classpath:hibernate.cfg.xml"></property>
</bean>
4、OpenSessionInViewFilter
-修改web.xml文件
<filter>
<filter-name>openSessionInView</filter-name>
<filter-class>org.springframework.orm.hibernate3.support.OpenSessionInViewFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>openSessionInView</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
5、把hibernate的配置文件中的内容配置到spring的配置文件中
-拷贝依赖包
spring依赖包\lib\jakarta-commons
-commons-pool.jar
-commons-dbcp.jar
-修改spring的配置文件
<context:component-scan base-package="sjzc.edu"></context:component-scan>
<bean id="sessionFactory" class="org.springframework.orm.hibernate3.LocalSessionFactoryBean">
<property name="configLocation" value="classpath:hibernate.cfg.xml"></property>
</bean>
<bean id="transactionManager" class="org.springframework.orm.hibernate3.HibernateTransactionManager">
<property name="sessionFactory" ref="sessionFactory"></property>
</bean>
<tx:advice id="txAdvice" transaction-manager="transactionManager">
<tx:attributes>
<tx:method name="*" />
</tx:attributes>
</tx:advice>
<aop:config>
<aop:pointcut expression="execution(* sjzc.edu.service.*.*(..))" id="AllServiceMethods"/>
<aop:advisor advice-ref="txAdvice" pointcut-ref="AllServiceMethods"/>
</aop:config>
</beans>
3、2 配置相关样式及js文件
WebRoot下：
css文件夹：dhtmlxscheduler.css
js文件夹：dhtmlxscheduler.js、public.js、jQuery.js
imgs文件夹：相关的图片
dhtmlxscheduler.js中定义相关的双击对应的表格增加事件，双击以定义的事件可以进行编辑，在编辑事件时点击选中区域以外的区域触发的相关事件，点击保存、取消、编辑按钮触发相关的事件。
public.js中定义了addorupdate和delEvent两个function方法，通过jQuery.js的$.get()方法传递Event的属性值。
function addorupdate(ev) {
var url = "event!addOrUpdateEvent.action?id=" + ev.id + "&start_date=" + ev.start_date.getTime() + "&end_date=" + ev.end_date.getTime() +
"&text=" + encodeURI(ev.text) + "&stage=" + ev.subject + "&director=" + ev.director;
$.get(url);
}
function delEvent(eventId){
var url = "event!deleteEvent.action?id=" + eventId;
$.get(url);
}
3、3表结构
t_event：
| id | varchar(255) | primary key |
| start_date | datetime |
|
| end_date | datetime |
|
| text | varchar(255) |
|
| director | varchar(255) |
|
| step | varchar(255) |
|
3、4如何和数据库实现交互？增加，删除，修改？
在管理员登录，在计划表管理菜单下点击日历图，连接到scheduler.jsp
在init()函数中，scheduler.load("event!query.action"),是将数据库中的数据展现。
通过dhtmlxscheduler.js获取页面的响应，调用public.js中function addorupdate(ev)和function delEvent(eventId)方法，提交到相应的action进行处理。
<!--EndFragment-->
扫一扫
2166
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
