当前位置:首页 开发语言 正文

dhtmlxScheduler 使用

2011年10月18日 | 作者: 米豆网 - 1000seo | 分类: 开发语言 | 

最近OA系统里要加事件(日程)日历,功能像google的日历一样,可以在上面直接拖拽保存事件,在网上发现dhtmlxScheduler已经把这些功能都封装好了,只要自己增加把数据写到数据库的功能就可以了,看了一下dhtmlxScheduler提供的api可以在事件的操作上绑定相应的事件通过ajax实现无刷新提交数据。
<script type=”text/javascript” charset=”utf-8″>
var prev = null;
var curr = null;
var next = null; function doOnLoad() {
scheduler.config.multi_day = true;
scheduler.config.xml_date=”%Y-%m-%d %H:%i”;
scheduler.config.drag_resize=false;
scheduler.config.drag_move=false;
scheduler.config.drag_create=false;
scheduler.config.dblclick_create=false;
scheduler.config.readonly=true;
scheduler.config.edit_on_create=false;
scheduler.config.details_on_create=false;

scheduler.init(‘scheduler_here’,new Date(<%=year(now())%>,<%=month(now())-1%>,<%=day(now())%>),”day”);
scheduler.load(“myevent.asp”);
var calendar = scheduler.renderCalendar({
container:”cal_here”,
navigation:true,
handler:function(date){
scheduler.setCurrentView(date, scheduler._mode);
}
});
scheduler.linkCalendar(calendar);
scheduler.setCurrentView(scheduler._date, scheduler._mode);
scheduler.attachEvent(“onEventAdded”, function(event_id,event_object){
if (!event_object.text) {
//如果内容是空的那么弹出警示框
alert(“请输入日程内容”);
return false;
}
//提交程序
var sdatestr=new Date(event_object.start_date).format(“YYYY-MM-dd hh:mm”);
var edatestr=new Date(event_object.end_date).format(“YYYY-MM-dd hh:mm”);
var para=”stime=”+sdatestr+”&etime=”+edatestr+”&eid=”+event_id+”&title=”+event_object.text+””;
var url=”Schedule_add.asp”;
var myAjax = new Ajax.Request(
url,
{
method: ‘post’,
parameters: encodeURI(para),
onComplete: showResponse
});

function showResponse(originalRequest)
{
if(originalRequest.responseText==”1″)
{alert(“日程添加成功!”)}
else
{alert(“日程添加失败,请检查!”);
}
}
});
scheduler.attachEvent(“onEventSave”,function(id, data){
if (!data.text) {
//如果内容是空的那么弹出警示框
alert(“请输入日程内容”);
return false;
}
return true; });
//点击明细后、当事件被保存
scheduler.attachEvent(“onBeforeEventDelete”, function(id, data){
//删除日程程序
//提交程序

var para=”eid=”+id+””;
var url=”Schedule_del.asp”;
var myAjax = new Ajax.Request(
url,
{
method: ‘post’,
parameters: encodeURI(para),
onComplete: showResponse
});

function showResponse(originalRequest)
{
if(originalRequest.responseText==”1″)
{alert(“日程删除成功!”)}
else
{alert(“日程删除失败,请检查!”)}
}
return true; });
scheduler.attachEvent(“onEventChanged”, function(id,data){

//提交程序
var sdatestr=new Date(data.start_date).format(“YYYY-MM-dd hh:mm”);
var edatestr=new Date(data.end_date).format(“YYYY-MM-dd hh:mm”);
var para=”stime=”+sdatestr+”&etime=”+edatestr+”&eid=”+id+”&title=”+data.text+””;
var url=”Schedule_edit.asp”;
var myAjax = new Ajax.Request(
url,
{
method: ‘post’,
parameters: encodeURI(para),
onComplete: showResponse
});

function showResponse(originalRequest)
{
if(originalRequest.responseText==”1″)
{
//alert(“日程修改成功!”)
}
else
{
alert(“日程修改失败,请检查!”)
}
}
return true;
});
}
/**
* 时间对象的格式化;
*/
Date.prototype.format = function(format){
/*
* eg:format=”YYYY-MM-dd hh:mm:ss”;
*/
var o = {
“Y+” :  this.getFullYear(),
“M+” :  this.getMonth()+1,  //month
“d+” :  this.getDate(),     //day
“h+” :  this.getHours(),    //hour
“m+” :  this.getMinutes(),  //minute
“s+” :  this.getSeconds(), //second
“q+” :  Math.floor((this.getMonth()+3)/3),  //quarter
“S”  :  this.getMilliseconds() //millisecond
}

if(/(Y+)/.test(format)) {
format = format.replace(RegExp.$1, (this.getFullYear()+””).substr(4 – RegExp.$1.length));
}

for(var k in o) {
if(new RegExp(“(“+ k +”)”).test(format)) {
format = format.replace(RegExp.$1, RegExp.$1.length==1 ? o[k] : (“00″+ o[k]).substr((“”+ o[k]).length));
}
}
return format;
}
</script>

 

 

ajax部分使用了js的prototype框架,dhtmlx本身也提供ajax由于测试了下没有成功,所以最终还是选择了熟悉的prototype框架

dhtmlxScheduler documentation:http://docs.dhtmlx.com/doku.php?id=dhtmlxscheduler:toc

本文固定链接:http://www.1000seo.com/soft/557
本文章由 米豆网 - 1000seo 于2011年10月18日发布在开发语言分类下,您可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
+复制链接 转载请注明:dhtmlxScheduler 使用-米豆网
关键字:, , , , ,

好文章就要一起分享!

更多

发表评论

你的大名(必填)

你的邮箱(必填)

你的网站(选填)

评论内容(必填)

😉 😐 😡 😈 🙂 😯 🙁 🙄 😛 😳 😮 mrgreen.png 😆 💡 😀 👿 😥 😎 ➡ 😕 ❓ ❗