您好,登錄后才能下訂單哦!
本文介紹了JavaWeb項目FullCalendar日歷插件使用的示例代碼,分享給大家,具體如下:
使用FullCalendar需要引用的文件
1.css文件
2.js文件
<link href="${base}/assets/global/plugins/fullcalendar/fullcalendar.min.css" rel="external nofollow" rel="stylesheet" type="text/css" /> <script src="${base}/assets/global/plugins/fullcalendar/fullcalendar.min.js" type="text/javascript"></script>
生成日歷主界面
FullCalendar·里有個events屬性,可以從數(shù)據(jù)庫查詢數(shù)據(jù)動態(tài)添加事項
events: function(start,end,timezone, callback) { //當前日期 var date = this.getDate().format('YYYY-MM-DD'); $.ajax({ url: ctx + "/teach/attend-getCalendarEventsByClazzId.do", dataType: 'json', data: { calendarClazzId : function(){ return calendarClazzId; }, date : date }, success: function(result) { var events = []; $.each(result,function(index,r){ var beginTime = r.dateTime.substring(0,11) + r.beginTime.substring(11,20); var endTime = r.dateTime.substring(0,11) + r.endTime.substring(11,20); if(r.numbers != 0) { events.push({ title : r.numbers + "人缺勤", id : r.id, start : beginTime, end : endTime, backgroundColor : r.numbers >= 3 ? Metronic.getBrandColor('red') :Metronic.getBrandColor('yellow') }); } else { events.push({ title : "全部出勤", id : r.id, start : beginTime, end : endTime, backgroundColor : Metronic.getBrandColor('green') }); } }) callback(events); } }); },
可以給傳遞到后臺的參數(shù)重新賦值,并刷新頁面事項,可以調(diào)用如下代碼:
$('#calendar').fullCalendar('refetchEvents');
沒選擇班級之前默認日歷界面
選擇不同的班級,ajax會根據(jù)不同的班級id以及當前日期到后臺查詢事項并刷新\
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。