FullCalendar控件的使用

来源：互联网发布：爱上学软件下载编辑：程序博客网时间：2024/05/01 05:56

FullCalendar提供了丰富的属性设置和方法调用，开发者可以根据FullCalendar提供的API快速完成一个日历日程的开发，下面展示使用的案例：

本人开发的页面及代码如下

<head>

<title>日历</title>

<link rel='stylesheet' href='<%=contextPath%>/calendarManage1/fullcalendar/fullcalendar.css' />

<script src='<%=contextPath%>/calendarManage1/fullcalendar/lib/jquery.min.js'></script>

<script src='<%=contextPath%>/calendarManage1/fullcalendar/lib/moment.min.js'></script>

<script src='<%=contextPath%>/calendarManage1/fullcalendar/fullcalendar.js'></script>

<script src='<%=contextPath%>/calendarManage1/fullcalendar/lib/jquery-ui.min.js'></script>

<script src='<%=contextPath%>/calendarManage1/js/calendar.js'></script>

<script type="text/javascript">

<% 从 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";

}

}

}

} %>

</script>

<style type='text/css'>

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;

}

</style>

</head>

<body>

<div class="nui-fit">

<div id="layout1" class="nui-layout" style="width:100%;height:100%;">

<div title="center" region="center">

<fieldset style="margin:5px;padding:0px;" class="noCollaborate">

<legend><span>日历任务管理</span></legend>

<div height="30px"></div>

<div class="search-condition">

<div class="list">

<div id="form1">

<table style="width:100%;" class="table">

<tr class="nui-form-widget-tr " >

<td class="tit"><label for="name">机构人员：</label></td>

<td >

<input id="managerOrgtree" name="managerOrg" class="nui-treeselect" size="30" url="com.ops.taskManage.taskList.managerOrgtree.biz.ext" onvaluechanged="loadCalendar"oncloseclick="onCloseClick"

textField="nodeText" valueField="nodeId" parentField="pid" dataField="treeList"

showFolderCheckBox="true" expandOnLoad="false" resultAsTree="false" showClose="true"virtualScroll="true"

popupWidth="200" style="width:125px;"/>

</td>

</tr>

</table>

</div>

</div>

</div>

</fieldset>

<fieldset style="margin:5px;padding:0px; height:810px">

<br><br>

<div style="height:99%;width:100%;margin:0 auto;">

<div class="Audi-block-self" style="width:99%;height:80%;max-width:1000px;margin:0 auto;">

<div id='testCalendar'></div>

</div>

</div>

</fieldset>

</div>

</div>

</div>

<script type="text/javascript">

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<workitems.length;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<dealing.length;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();

}

</script>

</body>

想要进一步了解学习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

1 0