欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2017年08月29日 09:23:06   作者:Ezreal_geng  
本篇文章主要介紹了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)日歷界面

沒選擇班級之前默認(rèn)日歷界面 

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

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

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

相關(guān)文章

最新評論