1.需要将fullcalendar插件导入项目
2.页面引入css和js文件
<script type='text/javascript'src='<s:url value="/js/fullcalendar/jquery/jquery-1.7.1.min.js" />'></script>
</pre><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> <p></p><p><link rel='stylesheet' type='text/css'href='<s:url value="/js/fullcalendar/fullcalendar/fullcalendar.css" />' /></p><p><link rel='stylesheet' type='text/css'href='<s:url value="/js/fullcalendar/fullcalendar/fullcalendar.css" />'media='print' /></p><p>皮肤css</p><p><link rel='stylesheet' type='text/css'href='<s:url value="/js/fullcalendar/demos/cupertino/theme.css" />' /></p><p>3.js控制fullcalendar插件</p><p></p><div class="dp-highlighter bg_javascript" sizcache="29" sizset="44"><div class="bar" sizcache="29" sizset="44"><div class="tools" sizcache="29" sizset="44"><strong>[javascript]</strong> <a target=_blank class="ViewSource" title="view plain" href="http://blog.csdn.net/pingchagnxin007/article/details/7693603#">view plain</a><a target=_blank class="CopyToClipboard" title="copy" href="http://blog.csdn.net/pingchagnxin007/article/details/7693603#">copy</a><a target=_blank class="PrintSource" title="print" href="http://blog.csdn.net/pingchagnxin007/article/details/7693603#">print</a><a target=_blank class="About" title="?" href="http://blog.csdn.net/pingchagnxin007/article/details/7693603#">?</a></div></div><ol class="dp-c"><li class="alt"><span><span> $(document).ready(</span><span class="keyword">function</span><span>() { </span></span></li><li><span> </span><span class="comment">//系统时间 </span><span> </span></li><li class="alt"><span> </span><span class="keyword">var</span><span> nowdate = </span><span class="keyword">new</span><span> Date(); </span></li><li><span> </span><span class="keyword">var</span><span> nowd = nowdate.getDate(); </span></li><li class="alt"><span> </span><span class="keyword">var</span><span> nowm = nowdate.getMonth(); </span></li><li><span> </span><span class="keyword">var</span><span> nowy = nowdate.getFullYear(); </span></li><li class="alt"><span> </span><span class="keyword">var</span><span> updateCrmCalendarDate=</span><span class="string">"<s:url action='updateClaendarDate' includeParams='none'/>"</span><span>; </span></li><li><span> </span><span class="keyword">var</span><span> dialogCrm=</span><span class="string">"<s:url action='saveOrUpdatemanager' includeParams='none'/>"</span><span>; </span></li><li class="alt"><span> </span><span class="keyword">var</span><span> pro= </span><span class="string">"<s:url action='listCalendars' includeParams='none'/>"</span><span>; </span></li><li><span> $(</span><span class="string">'#calendar'</span><span>).fullCalendar({ </span></li><li class="alt"><span> theme: </span><span class="keyword">true</span><span>,</span><span class="comment">//使用主题 </span><span> </span></li><li><span> aspectRatio: 1.35,</span><span class="comment">//每个日期的长宽比 </span><span> </span></li><li class="alt"><span> header: { </span></li><li><span> left: </span><span class="string">'prev,next today'</span><span>, </span></li><li class="alt"><span> center: </span><span class="string">'title'</span><span>, </span></li><li><span> right: </span><span class="string">'month,basicWeek,basicDay'</span><span class="comment">//控制显示样式 </span><span> </span></li><li class="alt"><span> },monthNames:[</span><span class="string">'一月'</span><span>,</span><span class="string">'二月'</span><span>, </span><span class="string">'三月'</span><span>, </span><span class="string">'四月'</span><span>, </span><span class="string">'五月'</span><span>, </span><span class="string">'六月'</span><span>, </span><span class="string">'七月'</span><span>,</span><span class="string">'八月'</span><span>, </span><span class="string">'九月'</span><span>, </span><span class="string">'十月'</span><span>, </span><span class="string">'十一月'</span><span>, </span><span class="string">'十二月'</span><span>], </span></li><li><span> dayNamesShort:[</span><span class="string">'星期日'</span><span>, </span><span class="string">'星期一'</span><span>, </span><span class="string">'星期二'</span><span>, </span><span class="string">'星期三'</span><span>,</span><span class="string">'星期四'</span><span>, </span><span class="string">'星期五'</span><span>, </span><span class="string">'星期六'</span><span>], </span></li><li class="alt"><span> dayNames:[</span><span class="string">'星期日'</span><span>, </span><span class="string">'星期一'</span><span>, </span><span class="string">'星期二'</span><span>, </span><span class="string">'星期三'</span><span>,</span><span class="string">'星期四'</span><span>, </span><span class="string">'星期五'</span><span>, </span><span class="string">'星期六'</span><span>], </span></li><li><span> buttonText:{ prev: </span><span class="string">'昨天'</span><span>, next:</span><span class="string">'明天'</span><span>, prevYear: </span><span class="string">'去年'</span><span>, nextYear: </span><span class="string">'明年'</span><span>, today:</span><span class="string">'今天'</span><span>, month:</span><span class="string">'月'</span><span>, week:</span><span class="string">'周'</span><span>, day:</span><span class="string">'日'</span><span> }, </span><span class="comment">//显示文字中文设置 </span><span> </span></li><li class="alt"><span> editable:</span><span class="keyword">true</span><span>,</span><span class="comment">//可以拖拽 </span><span> </span></li><li><span> disableResizing:</span><span class="keyword">true</span><span>,</span><span class="comment">//不可以改变大小 </span><span> </span></li><li class="alt"><span> </span><span class="comment">//事件拖动处理 </span><span> </span></li><li><span> eventDrop: </span><span class="keyword">function</span><span>(calEvent, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view) { </span></li><li class="alt"><span> </span><span class="keyword">var</span><span> fstart = $.fullCalendar.formatDate(calEvent.start, </span><span class="string">"yyyy-MM-dd HH:mm:ss"</span><span>); </span></li><li><span> </span><span class="keyword">var</span><span> fend = $.fullCalendar.formatDate(calEvent.end, </span><span class="string">"yyyy-MM-dd HH:mm:ss"</span><span>); </span></li><li class="alt"><span> </span><span class="keyword">var</span><span> fullDate = $.fullCalendar.formatDate(calEvent.start, </span><span class="string">"yyyy-MM-dd"</span><span>); </span></li><li><span> $.getJSON( </span></li><li class="alt"><span> updateCrmCalendarDate+</span><span class="string">"?date="</span><span>+fstart+</span><span class="string">"&crmSchedule.id="</span><span>+calEvent.id+</span><span class="string">"&nowDate="</span><span>+(</span><span class="keyword">new</span><span> Date()).valueOf(), </span></li><li><span> { </span></li><li class="alt"><span> }, </span></li><li><span> </span><span class="keyword">function</span><span>(data){ </span></li><li class="alt"><span> </span><span class="keyword">var</span><span> events = []; </span></li><li><span> </span><span class="keyword">if</span><span>(data != </span><span class="string">"{}"</span><span>){ </span></li><li class="alt"><span> </span><span class="keyword">var</span><span> termMap = eval(</span><span class="string">"("</span><span>+data+</span><span class="string">")"</span><span>); </span></li><li><span> $.each(termMap,</span><span class="keyword">function</span><span>(key,value) { </span></li><li class="alt"><span> toast(value); </span></li><li><span> </span><span class="keyword">if</span><span>(value==</span><span class="string">'操作成功'</span><span>){ </span></li><li class="alt"><span> refetchEvents: $(</span><span class="string">"#calendar"</span><span>).fullCalendar(</span><span class="string">"refetchEvents"</span><span>); </span></li><li><span> }</span><span class="keyword">else</span><span>{ </span></li><li class="alt"><span> revertFunc();</span><span class="comment">//操作失败可以复原 </span><span> </span></li><li><span> } </span></li><li class="alt"><span> }); </span></li><li><span> } </span></li><li class="alt"><span> </span></li><li><span> } </span></li><li class="alt"><span> ) </span></li><li><span> </span></li><li class="alt"><span> }, </span></li><li><span> </span><span class="comment">//月视图中,点击某一天的处理 </span><span> </span></li><li class="alt"><span> dayClick: </span><span class="keyword">function</span><span>(date, allDay, jsEvent, view) { </span></li><li><span> </span></li><li class="alt"><span> </span><span class="keyword">var</span><span> d = date.getDate(); </span></li><li><span> </span><span class="keyword">var</span><span> m = date.getMonth(); </span></li><li class="alt"><span> </span><span class="keyword">var</span><span> y = date.getFullYear(); </span></li><li><span> </span><span class="comment">//完整日期 </span><span> </span></li><li class="alt"><span> </span><span class="keyword">var</span><span> fullDate = y + </span><span class="string">'-'</span><span> + doHandleMonthPrj(m+1) + </span><span class="string">'-'</span><span> + doHandleDayPrj(d); </span></li><li><span> </span><span class="keyword">if</span><span>(nowy>y){ </span></li><li class="alt"><span> toast(</span><span class="string">"日期超限"</span><span>); </span></li><li><span> </span><span class="keyword">return</span><span> </span><span class="keyword">false</span><span>; </span></li><li class="alt"><span> }</span><span class="keyword">else</span><span> </span><span class="keyword">if</span><span>(nowy>=y&&nowm>m){ </span></li><li><span> toast(</span><span class="string">"日期超限"</span><span>); </span></li><li class="alt"><span> </span><span class="keyword">return</span><span> </span><span class="keyword">false</span><span>; </span></li><li><span> } </span><span class="keyword">else</span><span> </span><span class="keyword">if</span><span>(nowm>=m&&nowd>d){ </span></li><li class="alt"><span> toast(</span><span class="string">"日期超限"</span><span>); </span></li><li><span> </span><span class="keyword">return</span><span> </span><span class="keyword">false</span><span>; </span></li><li class="alt"><span> } </span></li><li><span> viewCrmDetail1(fullDate);</span><span class="comment">//添加窗体 </span><span> </span></li><li class="alt"><span> }, </span></li><li><span> </span><span class="comment">//事件点击处理 </span><span> </span></li><li class="alt"><span> eventClick: </span><span class="keyword">function</span><span>(calEvent, jsEvent, view) { </span></li><li><span> </span><span class="keyword">var</span><span> date = calEvent.start; </span></li><li class="alt"><span> </span><span class="keyword">var</span><span> d = date.getDate(); </span></li><li><span> </span><span class="keyword">var</span><span> m = date.getMonth(); </span></li><li class="alt"><span> </span><span class="keyword">var</span><span> y = date.getFullYear(); </span></li><li><span> </span><span class="comment">//完整日期 </span><span> </span></li><li class="alt"><span> </span><span class="keyword">var</span><span> fullDate = y + </span><span class="string">'-'</span><span> + doHandleMonthPrj(m+1) + </span><span class="string">'-'</span><span> + doHandleDayPrj(d); </span></li><li><span> </span><span class="comment">/* if(nowy>y){</span> </li><li class="alt"><span><span class="comment"> toast("日期超限");</span> </span></li><li><span><span class="comment"> return false;</span> </span></li><li class="alt"><span><span class="comment"> }else if(nowy>=y&&nowm>m){</span> </span></li><li><span><span class="comment"> toast("日期超限");</span> </span></li><li class="alt"><span><span class="comment"> return false;</span> </span></li><li><span><span class="comment"> } else if(nowm>=m&&nowd>d){</span> </span></li><li class="alt"><span><span class="comment"> toast("日期超限");</span> </span></li><li><span><span class="comment"> return false;</span> </span></li><li class="alt"><span><span class="comment"> }*/</span><span> </span></span></li><li><span> viewCrmDetail(fullDate,calEvent.id); </span></li><li class="alt"><span> </span></li><li><span> }, </span></li><li class="alt"><span> </span><span class="comment">//当鼠标悬停在一个事件上触发此操作 </span><span> </span></li><li><span> eventMouseover:</span><span class="keyword">function</span><span>( event, jsEvent, view ) { </span></li><li class="alt"><span> </span><span class="comment">//获得选中信息 </span><span> </span></li><li><span> </span><span class="keyword">var</span><span> title=</span><span class="string">"日程主题: "</span><span>+event.title; </span></li><li class="alt"><span> </span><span class="keyword">var</span><span> customername=</span><span class="string">"对应客户:"</span><span>+event.customername; </span></li><li><span> </span><span class="keyword">var</span><span> start=event.start; </span></li><li class="alt"><span> </span><span class="keyword">var</span><span> y=start.getFullYear(); </span></li><li><span> </span><span class="keyword">var</span><span> m=start.getMonth(); </span></li><li class="alt"><span> </span><span class="keyword">var</span><span> d=start.getDate(); </span></li><li><span> </span><span class="keyword">var</span><span> h=start.getHours(); </span></li><li class="alt"><span> </span><span class="keyword">var</span><span> f=start.getMinutes(); </span></li><li><span> start=</span><span class="string">"开始时间: "</span><span>+y+</span><span class="string">"-"</span><span>+(m+1)+</span><span class="string">"-"</span><span>+d+</span><span class="string">" "</span><span>+h+</span><span class="string">":"</span><span>+f; </span></li><li class="alt"><span> </span><span class="keyword">var</span><span> contents=</span><span class="string">"日程明细:"</span><span>+event.content; </span></li><li><span> </span><span class="keyword">var</span><span> smsAlertMobile=event.smsAlertMobile; </span></li><li class="alt"><span> </span><span class="keyword">var</span><span> smsAlertStrategy=event.smsAlertStrategy; </span></li><li><span> </span><span class="keyword">var</span><span> str=</span><span class="string">""</span><span>; </span></li><li class="alt"><span> </span><span class="keyword">if</span><span>(smsAlertStrategy==1){ </span></li><li><span> str+=</span><span class="string">"到时间提醒 手机:"</span><span>+smsAlertMobile; </span></li><li class="alt"><span> } </span></li><li><span> </span><span class="keyword">if</span><span>(smsAlertStrategy==2){ </span></li><li class="alt"><span> str+=</span><span class="string">"提前10分钟 手机:"</span><span>+smsAlertMobile; </span></li><li><span> } </span></li><li class="alt"><span> </span><span class="keyword">if</span><span>(smsAlertStrategy==3){ </span></li><li><span> str+=</span><span class="string">"提前半小时 手机:"</span><span>+smsAlertMobile; </span></li><li class="alt"><span> } </span></li><li><span> </span><span class="keyword">if</span><span>(smsAlertStrategy==3){ </span></li><li class="alt"><span> str+=</span><span class="string">"提前一小时 手机:"</span><span>+smsAlertMobile; </span></li><li><span> } </span></li><li class="alt"><span> </span><span class="comment">//显示 </span><span> </span></li><li><span> showTip(title,customername,start,contents,str); </span></li><li class="alt"><span> </span></li><li><span> },</span><span class="comment">//当鼠标从一个事件上移开触发此操作 </span><span> </span></li><li class="alt"><span> eventMouseout:</span><span class="keyword">function</span><span>( event, jsEvent, view ) { </span></li><li><span> </span><span class="comment">//关闭弹出层 </span><span> </span></li><li class="alt"><span> closeTip(); </span></li><li><span> }, </span></li><li class="alt"><span> </span><span class="comment">//绑定时间源,也就是为你的日历动态填充数据 </span><span> </span></li><li><span> events: </span><span class="keyword">function</span><span>(start, end, callback) { </span></li><li class="alt"><span> </span></li><li><span>· </span><span class="comment">//异步获取数据 </span><span> </span></li><li class="alt"><span> $.getJSON( </span></li><li><span> pro+</span><span class="string">"?date="</span><span>+(</span><span class="keyword">new</span><span> Date()).valueOf(),</span><span class="comment">//date参数 防止ajax数据缓存 </span><span> </span></li><li class="alt"><span> { </span></li><li><span> </span><span class="string">"start"</span><span>:Math.round(start.getTime() / 1000), </span></li><li class="alt"><span> </span><span class="string">"end"</span><span>:Math.round(end.getTime() / 1000) </span></li><li><span> }, </span></li><li class="alt"><span> </span><span class="keyword">function</span><span>(data){ </span></li><li><span> </span><span class="keyword">var</span><span> events = []; </span></li><li class="alt"><span> </span><span class="keyword">if</span><span>(data != </span><span class="string">"{}"</span><span>){ </span></li><li><span> </span><span class="keyword">var</span><span> termMap = eval(</span><span class="string">"("</span><span>+data+</span><span class="string">")"</span><span>); </span></li><li class="alt"><span> $.each(termMap,</span><span class="keyword">function</span><span>(key,value) { </span></li><li><span> events.push(value); </span></li><li class="alt"><span> }); </span></li><li><span> } </span></li><li class="alt"><span> </span><span class="comment">//将获取的数据添加到 </span><span> </span></li><li><span> callback(events); </span></li><li class="alt"><span> } </span></li><li><span> ); </span></li><li class="alt"><span> }, </span></li><li><span> loading: </span><span class="keyword">function</span><span>(bool) {</span><span class="comment">//正在处理数据提示 </span><span> </span></li><li class="alt"><span> </span><span class="keyword">if</span><span> (bool) $(</span><span class="string">'#loading'</span><span>).show(); </span></li><li><span> </span><span class="keyword">else</span><span> $(</span><span class="string">'#loading'</span><span>).hide(); </span></li><li class="alt"><span> } </span></li><li><span> }); </span></li><li class="alt"><span>}); </span></li></ol></div><pre style="DISPLAY: none" class="javascript" name="code"> $(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>
<div id='calendar'></div>