JavaWeb项目FullCalendar日历插件实例用法

  • 更新时间:2020-06-13 16:13:40
  • 编辑:相雨石
本站收集了一篇相关的编程文章,网友徐茂彦根据主题投稿了本篇教程内容,涉及到Java、FullCalendar日历插件、fullcalendar日历、fullcalendar、java、JavaWeb项目FullCalendar日历插件使用的示例代码相关内容,已被848网友关注,如果对知识点想更进一步了解可以在下方电子资料中获取。
  • 《Java数据科学指南》配套彩图,代码 / 4 MB 推荐度:
  • Java面向对象程序设计(第2版) / 610 KB 推荐度:
  • 疯狂Java讲义精粹(第2版) / 120.2 MB 推荐度:
  • PHP、MySQL与JavaScript学习手册(第4版) / 76 MB 推荐度:
  • Java 6程序设计实践教程 / 43.1 KB 推荐度:
  • 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属性,可以从数据库查询数据动态添加事项

    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');

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

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

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

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

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。

    相关教程

    • Java调用CXF WebService接口的方式实例总结

      今天小编就为大家分享一篇关于Java调用CXF WebService接口的两种方式实例,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧

      发布时间:2019-06-09

    • JavaWeb乱码问题的解决方法

      这篇文章主要给大家介绍了关于JavaWeb乱码问题的终极解决方案,文中通过示例代码介绍的非常详细,对大家学习或者使用JavaWeb具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧

      发布时间:2019-07-29

    • JavaWeb项目中classpath路径知识点总结

      今天小编就为大家分享一篇关于JavaWeb项目中classpath路径详解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧

      发布时间:2019-06-05

    • springboot+webmagic实现java爬虫jdbc及mysql实例代码

      今天小编就为大家分享一篇springboot+webmagic实现java爬虫jdbc及mysql的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

      发布时间:2020-02-10

    • Java Web登录页面的实现方法详解

      这篇文章主要介绍了Java Web 登录页面的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

      发布时间:2019-07-01

    • 介绍javaweb登录验证码的实现方法步骤

      这篇文章主要为大家详细介绍了javaweb登录验证码的实现方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

      发布时间:2020-01-27

    用户留言