JavaWeb項目FullCalendar日歷插件使用的示例代碼
本文介紹了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) { //當(dāng)前日期 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');
沒選擇班級之前默認(rèn)日歷界面
選擇不同的班級,ajax會根據(jù)不同的班級id以及當(dāng)前日期到后臺查詢事項并刷新\
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Java使用Lambda表達式查找list集合中是否包含某值問題
Java使用Lambda表達式查找list集合中是否包含某值的問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-06-06java數(shù)組實現(xiàn)循環(huán)隊列示例介紹
大家好,本篇文章主要講的是java數(shù)組實現(xiàn)循環(huán)隊列示例介紹,感興趣的同學(xué)趕快來看一看吧,對你有幫助的話記得收藏一下,方便下次瀏覽2022-01-01Shell重啟SpringBoot項目腳本的示例代碼(含服務(wù)守護)
本文介紹了如何使用?Bash?腳本來管理和守護運行服務(wù),將展示一個示例腳本,該腳本可以停止、啟動和守護運行一個服務(wù),并提供了相應(yīng)的解釋和用法說明,文章通過代碼示例介紹的非常詳細,需要的朋友可以參考下2023-11-11