溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

JavaWeb項目FullCalendar日歷插件使用的示例代碼

發(fā)布時間:2020-09-01 02:32:21 來源:腳本之家 閱讀:274 作者:Ezreal_geng 欄目:編程語言

本文介紹了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');

沒選擇班級之前默認日歷界面

JavaWeb項目FullCalendar日歷插件使用的示例代碼 

選擇不同的班級,ajax會根據(jù)不同的班級id以及當前日期到后臺查詢事項并刷新\

JavaWeb項目FullCalendar日歷插件使用的示例代碼

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。

向AI問一下細節(jié)

免責聲明:本站發(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)容。

AI