fullcalendar在java/web的应用

fullcalendar做了一个日程管理总结一下用法 怕忘了

1.需要将fullcalendar插件导入项目

2.页面引入css和js文件

<script type='text/javascript'src='<s:url value="/js/fullcalendar/jquery/jquery-1.7.1.min.js" />'></script>

<script type='text/javascript'src='<s:url value="/js/fullcalendar/jquery/jquery-ui-1.8.17.custom.min.js" />'></script><script type='text/javascript'src='<s:url value="/js/fullcalendar/fullcalendar/fullcalendar.min.js" />'></script>
<link rel='stylesheet' type='text/css'href='<s:url value="/js/fullcalendar/fullcalendar/fullcalendar.css" />' />
<link rel='stylesheet' type='text/css'href='<s:url value="/js/fullcalendar/fullcalendar/fullcalendar.css" />'media='print' />
皮肤css
<link rel='stylesheet' type='text/css'href='<s:url value="/js/fullcalendar/demos/cupertino/theme.css" />' />
3.js控制fullcalendar插件

$(document).ready(function() {
//系统时间
var nowdate = new Date();
var nowd = nowdate.getDate();
var nowm = nowdate.getMonth();
var nowy = nowdate.getFullYear();
var updateCrmCalendarDate="<s:url action='updateClaendarDate' includeParams='none'/>";
var dialogCrm="<s:url action='saveOrUpdatemanager' includeParams='none'/>";
var  pro= "<s:url action='listCalendars' includeParams='none'/>";
$('#calendar').fullCalendar({
theme: true,//使用主题
aspectRatio: 1.35,//每个日期的长宽比
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'//控制显示样式
},monthNames:['一月','二月', '三月', '四月', '五月', '六月', '七月','八月', '九月', '十月', '十一月', '十二月'],
dayNamesShort:['星期日', '星期一', '星期二', '星期三','星期四', '星期五', '星期六'],
dayNames:['星期日', '星期一', '星期二', '星期三','星期四', '星期五', '星期六'],
buttonText:{ prev: '昨天', next:'明天', prevYear: '去年', nextYear: '明年', today:'今天', month:'月', week:'周', day:'日' }, //显示文字中文设置
editable:true,//可以拖拽
disableResizing:true,//不可以改变大小
//事件拖动处理
eventDrop: function(calEvent, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view) {
var fstart  = $.fullCalendar.formatDate(calEvent.start, "yyyy-MM-dd HH:mm:ss");
var fend  = $.fullCalendar.formatDate(calEvent.end, "yyyy-MM-dd HH:mm:ss");
var fullDate = $.fullCalendar.formatDate(calEvent.start, "yyyy-MM-dd");
$.getJSON(
updateCrmCalendarDate+"?date="+fstart+"&crmSchedule.id="+calEvent.id+"&nowDate="+(new Date()).valueOf(),
{
},
function(data){
var events = [];
if(data != "{}"){
var termMap = eval("("+data+")");
$.each(termMap,function(key,value) {
toast(value);
if(value=='操作成功'){
refetchEvents: $("#calendar").fullCalendar("refetchEvents");
}else{
revertFunc();//操作失败可以复原
}
});
}

}
)

},
//月视图中，点击某一天的处理
dayClick: function(date, allDay, jsEvent, view) {

var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
//完整日期
var fullDate = y + '-' + doHandleMonthPrj(m+1) + '-' + doHandleDayPrj(d);
if(nowy>y){
toast("日期超限");
return false;
}else if(nowy>=y&&nowm>m){
toast("日期超限");
return false;
} else if(nowm>=m&&nowd>d){
toast("日期超限");
return false;
}
viewCrmDetail1(fullDate);//添加窗体
},
//事件点击处理
eventClick: function(calEvent, jsEvent, view) {
var date = calEvent.start;
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
//完整日期
var fullDate = y + '-' + doHandleMonthPrj(m+1) + '-' + doHandleDayPrj(d);
/* if(nowy>y){
toast("日期超限");
return false;
}else if(nowy>=y&&nowm>m){
toast("日期超限");
return false;
} else if(nowm>=m&&nowd>d){
toast("日期超限");
return false;
}*/
viewCrmDetail(fullDate,calEvent.id);

},
//当鼠标悬停在一个事件上触发此操作
eventMouseover:function( event, jsEvent, view ) {
//获得选中信息
var title="日程主题: "+event.title;
var customername="对应客户："+event.customername;
var start=event.start;
var y=start.getFullYear();
var m=start.getMonth();
var d=start.getDate();
var h=start.getHours();
var f=start.getMinutes();
start="开始时间: "+y+"-"+(m+1)+"-"+d+" "+h+":"+f;
var contents="日程明细："+event.content;
var smsAlertMobile=event.smsAlertMobile;
var smsAlertStrategy=event.smsAlertStrategy;
var str="";
if(smsAlertStrategy==1){
str+="到时间提醒              手机:"+smsAlertMobile;
}
if(smsAlertStrategy==2){
str+="提前10分钟             手机:"+smsAlertMobile;
}
if(smsAlertStrategy==3){
str+="提前半小时             手机:"+smsAlertMobile;
}
if(smsAlertStrategy==3){
str+="提前一小时             手机:"+smsAlertMobile;
}
//显示
showTip(title,customername,start,contents,str);

},//当鼠标从一个事件上移开触发此操作
eventMouseout:function( event, jsEvent, view ) {
//关闭弹出层
closeTip();
},
//绑定时间源，也就是为你的日历动态填充数据
events: function(start, end, callback) {

·		//异步获取数据
$.getJSON(
pro+"?date="+(new Date()).valueOf(),//date参数 防止ajax数据缓存
{
"start":Math.round(start.getTime() / 1000),
"end":Math.round(end.getTime() / 1000)
},
function(data){
var events = [];
if(data != "{}"){
var termMap = eval("("+data+")");
$.each(termMap,function(key,value) {
events.push(value);
});
}
//将获取的数据添加到
callback(events);
}
);
},
loading: function(bool) {//正在处理数据提示
if (bool) $('#loading').show();
else $('#loading').hide();
}
});
});

页面只需要一个div即可

<div id='calendar'></div>

页面效果

插件下载地址