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

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以及当前日期到后台查询事项并刷新

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

相关文章

  • SpringBoot+thymeleaf+ajax实现局部刷新详情

    SpringBoot+thymeleaf+ajax实现局部刷新详情

    这篇文章主要介绍了SpringBoot+thymeleaf+ajax实现局部刷新详情,文章围绕主题展开详细的内容介绍具有一定的参考价值,需要的小伙伴可以参考一下
    2022-09-09
  • 使用Spring Boot搭建Java web项目及开发过程图文详解

    使用Spring Boot搭建Java web项目及开发过程图文详解

    这篇文章主要介绍了使用Spring Boot搭建Java web项目及开发过程,本文通过图文并茂的形式给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-06-06
  • Springboot使用redis进行api防刷限流过程详解

    Springboot使用redis进行api防刷限流过程详解

    这篇文章主要介绍了Springboot使用redis进行api防刷限流过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-12-12
  • Reactor3 Map与FlatMap的区别示例详解

    Reactor3 Map与FlatMap的区别示例详解

    这篇文章主要为大家介绍了Reactor3 Map与FlatMap的区别示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • 浅谈Java设计模式之原型模式知识总结

    浅谈Java设计模式之原型模式知识总结

    Java原型模式主要用于创建重复的对象,同时又能保证性能,这篇文章就带大家仔细了解一下原型模式的知识,对正在学习java的小伙伴们很有帮助,需要的朋友可以参考下
    2021-05-05
  • HashMap链表与红黑树转换详解

    HashMap链表与红黑树转换详解

    这篇文章主要介绍了HashMap链表与红黑树转换详解,HashMap是Java中的一种数据结构,它实现了Map接口,提供了键值对的存储和检索功能,它基于哈希表的原理,通过将键映射到哈希表中的位置来存储和获取值,从而实现了快速的查找和插入操作,需要的朋友可以参考下
    2023-11-11
  • Java虚拟机JVM优化实战的过程全记录

    Java虚拟机JVM优化实战的过程全记录

    有人说Java之所以能够崛起,JVM功不可没。Java虚拟机最初服务于让Java语言凌驾于平台之上,实现“编写一次,到处运行”,那么下面这篇文章主要给大家分享了个关于Java虚拟机JVM优化实战的过程全记录,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-08-08
  • Java客户端服务端上传接收文件实现详解

    Java客户端服务端上传接收文件实现详解

    这篇文章主要介绍了Java客户端服务端上传接收文件实现详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • 解决Nacos在执行startup.cmd的时候出现闪退的问题

    解决Nacos在执行startup.cmd的时候出现闪退的问题

    因为在工作中的项目中需要使用到nacos作为注册中心,但是在使用nacos的过程中运行startup.cmd的时候出现了闪退的情况,运行startup.cmd闪一下就没有了,我把解决这个问题的全过程理了一下,希望能帮到您,需要的朋友可以参考下
    2023-12-12
  • 如何将eclipse项目导入到idea的方法步骤(图文)

    如何将eclipse项目导入到idea的方法步骤(图文)

    这篇文章主要介绍了如何将eclipse项目导入到idea的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03

最新评论