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

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

(0)

相关推荐

  • Ajax分页插件Pagination从前台jQuery到后端java总结

    困惑了我一段时间的网页分页,今天特地整理了一下我完成不久的项目.下面我要分享下我这个项目的分页代码,前后端通吃.希望前辈多多指教. 一.效果图 下面我先上网页前台和管理端的部分分页效果图,他们用的是一套代码. 二.上代码前的一些知识点 此jQuery插件为Ajax分页插件,一次性加载,故分页切换时无刷新与延迟,如果数据量较大不建议用此方法,因为加载会比较慢. 三.前台代码部分 var pageSize =6; //每页显示多少条记录 var total; //总共多少记录 $(function(

  • Java简单实现SpringMVC+MyBatis分页插件

    1.封装分页Page类 package com.framework.common.page.impl; import java.io.Serializable; import com.framework.common.page.IPage; /** * * * */ public abstract class BasePage implements IPage, Serializable { /** * */ private static final long serialVersionUID

  • Java中使用WebUploader插件上传大文件单文件和多文件的方法小结

    一.使用webuploader插件的原因说明 被现在做的项目坑了. 先说一下我的项目架构spring+struts2+mybatis+MySQL 然后呢.之前说好的按照2G上传就可以了,于是乎,用了ajaxFileUpload插件,因为之前用图片上传也是用这个,所以上传附件的时候就直接拿来用了 各种码代码,测试也测过了,2G文件上传没问题,坑来了,项目上线后,客户又要求上传4G文件,甚至还有20G以上的..纳尼,你不早说哦... 在IE11下用ajaxFileUpload.js插件上传超过4G的

  • Java运用SWT插件编写桌面记事本应用程序

    本文实例介绍了Java基于SWT编写记事本的详细过程,分享给大家供大家参考,具体内容如下 可实现windows系统桌面记事本基本功能,傻瓜式教学,一步一步手把手操作.小白也可自己编写出完整的应用程序. 需要工具:Eclipse(带SWT插件) 成品如下: 应用程序功能介绍: 功能分析: 1.文件(F) 2.编辑(E) 3.格式(O) 4.查看(V) 5.帮助(H) 其中文件菜单中包括 1.1.新建(N) Ctrl+N 1.2打开(O) Ctrl+O 1.3保存(S) Ctrl+S 1.4另存为(

  • Java探索之Feign入门使用详解

    一,简介 Feign使得 Java HTTP 客户端编写更方便.Feign 灵感来源于Retrofit.JAXRS-2.0和WebSocket.Feign最初是为了降低统一绑定Denominator到HTTP API的复杂度,不区分是否支持Restful.Feign旨在通过最少的资源和代码来实现和HTTP API的连接.通过可定制的解码器和错误处理,可以编写任意的HTTP API. Maven依赖: <!-- https://mvnrepository.com/artifact/com.netf

  • 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/c

  • FullCalendar日历插件应用之数据展现(一)

    开发者可以使用FullCalendar创建强大的日历日程应用,FullCalendar提供了丰富的选项设置和方法调用,使得开发者可以轻松的创建各种功能的日历程序. 由于项目需求,需要通过日历的方式展现某些数据,在网上搜索了很多日历的插件,觉得比较好用的还是fullCalendar,下面是我写的一个简单Demo,如有不足,请多多指正!!! 一.引入必要的文件: <link href="Scripts/Plugins/fullcalendar.css" rel="style

  • php使用fullcalendar日历插件详解

    最近做课程表的项目,找了好多个插件感觉都不好用,无意间看到了fullcalendar,还挺简单的,很方便,先贴一张项目页面 <!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <!-- 日历插件 --> <link href='/public/school/table/fullcalendar.min.css' rel='stylesheet' /> <link href

  • Java中Maven项目导出jar包配置的示例代码

    具体代码如下所示: <!-- 第一种打包方式 (maven-jar-plugin), 将依赖包和配置文件放到jar包外 --> <build> <sourceDirectory>src/main/java</sourceDirectory> <resources> <resource> <directory>src/main/resources</directory> <!-- 将<director

  • SpringBoot项目中使用Groovy脚本的示例代码

    目录 1. 引入依赖 2. 使用脚本引擎运行groovy脚本 3.思考 SpringBoot+Groovy运行动态脚本 GroovyClassLoader方式 GroovyScriptEngine方式 变量绑定 最近项目中遇到了这样的需求:需要检查一个表的某些字段,是否为空,或者是否符合预期规则:比如大于0,或者在某个范围内.考虑将表名和字段名配置在数据库中,然后规则使用Groovy来写,比较灵活. 1. 引入依赖 <dependency> <groupId>org.codehau

  • Vue的移动端多图上传插件vue-easy-uploader的示例代码

    前言 这段时间赶项目,需要用到多文件上传,用Vue进行前端项目开发.在网上找了不少插件,都不是十分满意,有的使用起来繁琐,有的不能适应本项目.就打算自己折腾一下,写一个Vue的上传插件,一劳永逸,以后可以直接使用. 目前vue-easy-uploader已上传到GitHub和NPM,使用起来方便简单,不需要繁琐的配置即可投入生产,不过需要后端配合,实现上传接口. 本项目GitHub地址: https://github.com/quanzaiyu/vue-easy-uploader 本项目NPM地

  • vue 项目中使用Loading组件的示例代码

    什么是vue插件? 从功能上说,插件是为Vue添加全局功能的一种机制,比如给Vue添加一个全局组件,全局指令等: 从代码结构上说,插件就是一个必须拥有install方法的对象,这个方法的接收的第一个参数是Vue构造函数,还可以接收一个可选的参数,用于配置插件: var myplugin = { install:function(Vue, options){ ... } } 从意义上来说,正如jQuery的$.fn使jQuery有了一个庞大的生态一样,Vue的插件机制使Vue形成了一个生态系统,你

  • SpringBoot项目如何访问jsp页面的示例代码

    最近在接支付项目,从官方下了个及时到款的demo,想在springBoot项目中运行起来,发现访问jsp的时候直接会访问到jsp页面的源文件. 如何在springBoot项目中访问到jsp页面? 1.添加pom依赖 首先在原来的pom文件基础上加上这两个配置 <!-- tomcat 的支持.--> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring

  • springboot~nexus项目打包要注意的地方示例代码详解

    一个使用maven制作框架包时,会有一个主项目,然后它有多个子项目框架组成,很少一个工具包一个工程,像springboot,springcloud都是这种结构,主项目用来管理一些依赖包的版本,这对于框架型项目来说是很必要的,而对于业务项目来说,因为目前都是推荐使用微服务的轻量方式,所以不建议用多项目绑定一个大项目的方式,而都是一个服务一个项目. 主pom文件 主项目的pom文件用来管理依赖包版本,一般在dependencyManagement节点去声明它们的版本号,这样在子项目里可以不声明相同包

  • 在Vue项目中用fullcalendar制作日程表的示例代码

    前言 最近老牌日历插件fullcalendar更新了v4版本,而且添加了Vue支持,所以用最新的fullcalendar v4制作一个完整日历体验一下,效果图: 安装 FullCalendar的功能被分解为"插件".如果您需要它提供的功能,您只需要包含一个插件. 也就是说,FullCalendar v4所有插件都得单独安装引用. npm install --save @fullcalendar/vue @fullcalendar/core @fullcalendar/daygrid 引

随机推荐