Java FullCalendar日历插件 JavaWeb项目FullCalendar日历插件使用的代码实例

软件发布|下载排行|最新软件

当前位置:首页IT学院IT技术

Java FullCalendar日历插件 JavaWeb项目FullCalendar日历插件使用的代码实例

Ezreal_geng   2021-03-29 我要评论
想了解JavaWeb项目FullCalendar日历插件使用的代码实例的相关内容吗,Ezreal_geng在本文为您仔细讲解Java FullCalendar日历插件的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:Java,FullCalendar日历插件,fullcalendar日历,fullcalendar,java,下面大家一起来学习吧。

本文介绍了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属性,可以从数据库查询数据动态添加事项

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);
          }
        });
      },

 可以给传递到后台的参数重新赋值,并刷新页面事项,可以调用如下代码:

$('#calendar').fullCalendar('refetchEvents');

没选择班级之前默认日历界面

没选择班级之前默认日历界面 

选择不同的班级,ajax会根据不同的班级id以及当前日期到后台查询事项并刷新\

选择不同的班级,ajax会根据不同的班级id以及当前日期到后台查询事项并刷新

Copyright 2022 版权所有 软件发布 访问手机版

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 联系我们