Skip to content

Latest commit

 

History

History
175 lines (137 loc) · 9.94 KB

README.md

File metadata and controls

175 lines (137 loc) · 9.94 KB

xgcalendar

谷歌日历风格的日历控件 一个基于jQury的日历插件,可以帮助用户快速的创建日程(活动),类似谷歌日历 为啥叫xgcalendar? X=xuanye G=Google Calendar Like

####周视图
xgcalendar screenshot1

####月视图
xgcalendar screenshot2

最新的demo地址: http://xgcal.sinaapp.com/demo2/
原demo地址: http://xgcal.sinaapp.com/demo/

功能列表

  • 支持三种视图类型 (日,月,周)
  • 支持定义一周的开始日期(周一或者周日)
  • 支持无刷新获取数据和更新数据
  • 支持拖拽选择时间段新增日程(包括单日和跨日)
  • 快速删除
  • 通过拖拽方式快速修改时间
  • 通过拖拽改变大小来调整日程持续时间
  • 支持权限控制
  • 支持多主题风格
  • 优异的性能表现
  • 支持多语言
  • 支持的浏览器 IE6+,FireFox3.5+,Opera 10+,Chrome 3+

使用方法

在页面中插入html :

<div id="xgcalendarp">这里是日历控件</div>

引入JS: 其中xgcalendar_lang_zh_CN.js为本地化文件,xgcalendar支持多语言

<script src="static/js/plugin/xgcalendar_lang_zh_CN.js" type="text/javascript"></script>  
<script src="static/js/plugin/xgcalendar.js?v=1.2.0.4" type="text/javascript"></script>   

调用 :

var op = {
    view: "week", //默认视图,这里是周视图
    theme:1,//默认的主题风格
    autoload:true, //是否在页面加载完毕后自动获取当前视图时间的数据
    showday: new Date(), //当前视图的显示时间
    EditCmdhandler:edit, //点击的响应事件
    //DeleteCmdhandler:dcal, //删除的响应事件
    ViewCmdhandler:view,    //查看的响应事件
    onWeekOrMonthToDay:wtd,//当when weekview or month switch to dayview 
    onBeforeRequestData: cal_beforerequest,
    onAfterRequestData: cal_afterrequest,
    onRequestDataError: cal_onerror, 
    url: "/calendar/query" ,  //url for get event data by ajax request(post)
    quickAddUrl: "/calendar/add" ,   //url for quick add event data by ajax request(post)
    quickUpdateUrl: "/calendar/update" ,   //url for quick update event data by ajax request(post)
    quickDeleteUrl:  "/calendar/delete"  //url for quick delete event data by ajax request(post)
};
var _MH = document.documentElement.clientHeight; //获取页面高度,不同的文档类型需要不同的计算方法,注意示例中使用的doctype 用这个就搞定了
op.height = _MH-70; //container height;
op.eventItems =[]; //default event data;
$("#xgcalendarp").bcalendar(op);

参数说明

  • view: 默认是周视图 day,week,month
  • weekstartday: 默认星期一开始,即为1,如果设置为0则为从星期日开始
  • theme: 默认使用第一套主题,可设置范围0-21
  • height: 视图的高度,如果不设置则默认获取所在页面的高度
  • url: 必填 请求数据的Url
  • eventItems: 日程数据,是个数组,可通过此参数设置初始化数据
  • method: 异步提交数据的方式,默认为POST建议不要修改。
  • showday: 显示日期,默认为当天
  • onBeforeRequestData: 在异步调用调用开始之前执行的函数,可以用此参数配合下面的参数完成动态提示效果
  • onAfterRequestData: 异步调用完成之后
  • onRequestDataError: 在异步调用发生异常时
  • onWeekOrMonthToDay: 当周视图切换到日视图,因为在转换在内部完成,所以公开一个入口可得到该行为
  • quickAddHandler: 快速添加的拦截函数,该参数设置后quickAddUrl参数的设置将被忽略
  • quickAddUrl: 快速添加日程响应的 Url 地址
  • quickUpdateUrl: 拖拽更新时响应的 Url 地址
  • quickDeleteUrl: 快速删除日程时响应的Urk 地址
  • autoload: 自动使用url参数加载数据,如果eventItems参数没有配置,可启用该参数,默认第一次获取数据
  • readonly: 是否只读,某些情况下,可设置整个视图只读
  • extParam: 额外参数数组{name:"",value:""},在所以异步请求中,都会附加的额外参数,可配置其他扩展的查询条件
  • enableDrag:默认为true,是否可拖拽,和 readonly 参数不同的是 只是不能拖拽。
  • timeFormat:默认为HH:mm, t表示上午下午标识,h 表示12小时制的小时,H表示24小时制的小时,m表示分钟
  • tgtimeFormat:"HH:mm" //同上

数据格式

参数列表中的eventItems参数的数据格式,如果添加新的字段尽量往后添加

eventItems本身是个数组,数组的项本身又是个数组,结构如下所示 [主键,标题,开始时间,结束时间,是否全天日程,是否跨天日程,是否循环日程,颜色主题,是否有权限,地点,参与人] 对应的数据类型 [String,String,Date,Date,1/0,1/0,1/0,0-21,0/1,String,String]

可用的方法

所有方法通过 $("#calendarid").functionName(params) 方式调用

  • BCalSwtichview(viewtype) 切换视图 参数 viewtype 值为dayweekmonth 之一
  • BCalReload 重新加载当前视图 即刷新
  • BCalGoToday(day) 将时间回到day参数所在的时间段,不切换视图
  • BCalPrev 往前一个时间段,这个时间的范围由当前视图决定,如周视图即为往前一周
  • BCalNext 同上 往后一个时间段
  • BcalGetOp 获取当前参数,这个在切换视图的时候 会获取到某些文字提示,详见demo
  • BcalSetOp(p) 设置参数,p为额外的参数值 ,参考{p1:p1value},可动态设置参数

参数中的那些事件

  • onBeforeRequestData(type): type为数字,表示事件的类型(1:加载,2:新增,3:删除,4:更新)
  • onAfterRequestData(type): type同上
  • onRequestDataError(type,data):type同上,data为错误信息,如果存在的话
  • onWeekOrMonthToDay(p): p为当前的参数值,可从p.dayshow 获取提示信息,详见demo

####load时的参数说明
请求参数

showdate=2013-1-9&viewtype=month&timezone=8

其中showdate为当前日期,viewtype为当前视图,timezone为时区 后台会根据showdate和viewtype计算出对应的开始日期和结束日期,加上时区的偏移到数据库中检索 实际的情况应该根据你服务端编码实现的情况来处理,默认可通过request 的form中获取上述值

请求返回

{"events":[],"issort":true,"start":"/Date(1261353600000)/","end":"/Date(1261958399000)/","error":null}

events的结构同参数eventItems的结构, issort是否已在服务端排序(请在服务端做好排序), startend是本次请求的开始时间和结束时间,这里是date的json表示法 error是业务异常对象,可在服务端生成,结构为:{ErrorCode:””,ErrorMsg:””} 可在onRequestDataError中捕获,并做友好的提示。

####更新时的参数说明 请求参数

calendarId=98&CalendarStartTime=2013-1-2+00%3A00&CalendarEndTime=2013-1-2+00%3A00&timezone=8

开始时间和结束时间的格式同你的多语言配置相关

请求返回

{"IsSuccess":true,"Msg":""}

是否成功和失败时的错误信息

删除和新增雷同 不做展开说了,如果不清楚可以通过工具看看,chrome 使用F12调出开发者工具,切换 Network选项卡,操作一边就可以看到。

##FAQ

  • 有没有java版本的demo

    没有,我知道很多网友 实现了如果有愿意提供的那非常欢迎

  • 怎么把时间范围控制在8:00到下午18:00 (类似控制时间段)

    展示不提供类似功能,如你愿意付费我可以考虑帮你实现。

  • 弹出层中不能通过点击事件获得焦点,同样不能选中文字等等问题。

这个可能是因为我禁用了 弹出层的mousedown事件的冒泡 ,新的输入框不能通过点击获得焦点 在代码中弹出层有如下一段代码。 buddle.mousedown(function(e) { return false }) $(document).one("mousedown", function(){}) 主要是和这个事件冲突,你可以把上面的mousedown事件注释掉,然后在这个时间里面判断点击的位置是否在buddle中,可以通过判断pos,或者eventtarget 是buddle 子元素的方式

  • 我想在弹出层中新增一个字段要怎么做?

首先你要在弹出层的html中添加对应的input或者select标签
其次你在代码中必须对这个元素的取值赋值进行处理,并插入到post的请求参数中,还要存放到本地缓存中。 最后可能还要修改一些小瑕疵,根据你的测试情况,虽然我曾经帮别人实现过一次,但是时间过去的太久我已经记不得全部过程了。

  • xgcalendar的版权问题,它收费吗?可用于商业项目嘛?

xgcalendar是个开源项目,如果你把它使用到了你的商业项目中,我只要求你保留版权信息即可,不收取费用,当然你如果希望定制化的开发,那我可能会收取一些费用,视功能复杂情况而定。

  • 关于wdcalendar,我发现这个程序和你的xgcalendar非常相似?

确实我也发现了,还是一个法国人告诉我的,wdcalendar在很早的时候就盗版了xgcalendar ,也不能说完全一字不改把,至少注释都改成英文了。我强烈鄙视这种行为,另外盗版了我一些其他的jquery插件号称是其作品。http://www.web-delicious.com/jquery-plugins/,上面的插件都是我写的,这个站点也是盗版者的网站,虽然是全英文但是确实国人的,哎 受不了。

  • 怎么添加农历?

农历可作为一类日程数据 在服务端生成 再在客户端上显示