FullCalendar提供了丰富的属性设置和方法调用,开发者可以根据FullCalendar提供的API快速完成一个日历日程的开发,下面展示使用的案例:
本人开发的页面及代码如下
日历
<
link
rel='stylesheet' href='<%=contextPath%>/calendarManage1/fullcalendar/fullcalendar.css' />
<
script
src='<%=contextPath%>/calendarManage1/fullcalendar/lib/jquery.min.js'>
<% 从 session 中获取登录这的信息 ,这里可以获取登录者的对象,想要获取那个信息提取那个信息即可 %>
<%
IMUODataContext muo = DataContextManager.current().getMUODataContext();
String roleId = null;
if (muo != null) {
IUserObject userobject = muo.getUserObject();
if (userobject != null) {
DataObject[] roles = (DataObject[]) userobject.getAttributes().get("roles");
for (int i = 0; i < roles.length; i++) {
String roleIdd = roles[i].get("roleid").toString();
if(roleIdd.equals("manager")){
roleId = "manager";
}
}
}
} %>
body {
margin: 40px 10px;
padding: 0;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
}
#calendar {
max-width: 900px;
margin: 0 auto;
}
日历任务管理
机构人员:
textField="nodeText" valueField="nodeId" parentField="pid" dataField="treeList"
showFolderCheckBox="true" expandOnLoad="false" resultAsTree="false" showClose="true"virtualScroll="true"
popupWidth="200" style="width:125px;"/>
nui.parse();
var date = new Date();
var roleId = "<%=roleId %>";
var event=[];
setData();
//在添加了选择条件筛选之后,虽然后台中查询到的数据可以返回到前台,但是前台页面不能刷新,所以一直达不到想要的的效果,在执行了下面的代码后终于可以刷新日历页面了,达到了想要的效果
function loadCalendar() {
$('#testCalendar').fullCalendar('removeEventSource', event);
event.splice(0,event.length);
console.log(event);
event = queryall();
$('#testCalendar').fullCalendar( 'addEventSource', event);
$('#testCalendar').fullCalendar( 'refetchEvents' );
}
//根据用户的角色判断筛选框是否显示
function setData() {
event = queryall();
if(roleId != "manager"){
$(".noCollaborate").hide();
}
$('#testCalendar').fullCalendar({
header: {left: 'prev next today',center: 'title',right: 'month,agendaWeek,agendaDay'},
buttonText: {today: '今天',month: '本月',week: '本周',day: '本日',prev: '上一月', next: '下一月'},
monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
today: ["今天"],
firstDay: 1,
titleFormat:{month:"YYYY年MM月",week: "YYYY年MM月DD日",day: "YYYY年MM月DD日",},
defultDate:date,
navLinks: true, // 可以单击日期/星期名称浏览视图
editable: true,
eventLimit: true, //允许更多的时间
events: event
});
}
function queryall(){
var managerOrg = nui.get("managerOrgtree");
var managerOrgObj = managerOrg.getSelectedNode();
var data = {"managerOrg":managerOrgObj};
var json = nui.encode(data);
nui.ajax({
url:"com.ops.calendarManage.fullcalendar.queryYBworkitems.biz.ext",
type:'post',
data:json,
async:false,
success:function(text){
var workitems = text.workitems;
for(var i=0;i
var data = {"title":workitems[i].TASK_CONTENT,"start":workitems[i].ENDTIME};
event.push(data);
}
}
});
nui.ajax({
url:"com.ops.calendarManage.fullcalendar.queryDAIBANworkitems.biz.ext",
type:'post',
data:json,
async:false,
success:function(text){
var dealing = text.workitems;
for(var i=0;i
var data = {"title":dealing[i].taskContent,"start":dealing[i].starttime,"color":"red"};
event.push(data);
}
}
});
return event;
}
//清楚任务类型条件
function onCloseClick(e) {
var obj = e.sender;
obj.setText("");
obj.setValue("");
loadCalendar();
}
想要进一步了解学习fullcalendar的朋友可以点击下列链接地址:
http://www.helloweba.com/view-blog-231.html
http://blog.163.com/lizhenming_2008/blog/static/7655833320124304254255/
https://fullcalendar.io/docs/
其中包括控件的属性,事件和方法
http://codego.net/433347/
http://www.iteye.com/problems/97796