[{"allDay":false,"start":"2015-11-02 18:00","end":"2015-11-02 21:00","id":"1","title":"晚上练习"},{"allDay":false,"start":"2015-11-03 09:00","end":"2015-11-03 12:00","id":"2","title":"早上练习"},{"allDay":false,"start":"2015-11-04 14:00","end":"2015-11-04 16:00","id":"3","title":"下午练习"},{"allDay":false,"start":"2015-11-09 09:00","end":"2015-11-09 12:00","id":"5","title":"早上练习"}]
上面json格式代码
下面是jsp代码还有需要引用jquery-1.8.3.min.js
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ include file="/common/common.jsp"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <title>演示:FullCalendar应用——增删改数据操作</title> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/fullcalendar/css/fullcalendar.css"> <script src='${pageContext.request.contextPath }/js/fullcalendar/fullcalendar.min.js'></script> <script src='${pageContext.request.contextPath }/js/fullcalendar/jquery.fancybox-1.3.1.pack.js'></script> <script type="text/javascript"> $(function() { $('#calendar').fullCalendar({ header: { left: 'prev,next today', center: 'title', right: 'agendaWeek' /* right: 'month,agendaWeek,agendaDay' */ }, defaultView:'agendaWeek', firstDay: 1,//从星期一开始 events: '${pageContext.request.contextPath }/schedule/getCurrentWeek.do?coachId=1', dayClick: function(date, allDay, jsEvent, view) { var selDate =$.fullCalendar.formatDate(date,'yyyy-MM-dd'); alert(jsEvent.id); }, eventClick: function(calEvent, jsEvent, view) { alert(calEvent.id); } }); }); </script> </head> <body> <div> <div id='calendar'></div> </div> </body> </html>
在执行下一天和上一天时,插件自动调用url,同时把开始时间和结束时间一起传给后台
response.setContentType("text/html;charset=UTF-8"); String jsonString=""; //单位:秒 String start=request.getParameter("start"); String end=request.getParameter("end"); String startDate=MyDateUtils.getDate(Long.valueOf(start)*1000); String endDate=MyDateUtils.getDate(Long.valueOf(end)*1000); //选择教练 String coachId=request.getParameter("coachId"); Map params=new HashMap(); params.put("startDate", startDate); params.put("endDate", endDate); params.put("coachId", coachId); List list=scheduleService.getCurrentWeek(params); if(list!=null&&list.size()>0){ List nlist=new ArrayList(); for(int i=0;i<list.size();i++){ Schedule obj=(Schedule)list.get(i); Map map=new HashMap(); map.put("id", String.valueOf(obj.getId())); map.put("title", obj.getName()); map.put("start", obj.getFullDate()+" "+obj.getStarttime()); map.put("end", obj.getFullDate()+" "+obj.getEndtime()); map.put("allDay", false); nlist.add(map); } jsonString=JSON.toJSONString(nlist); }else{ jsonString="{success:true,totalCounts:0,result:''}"; } System.out.println(jsonString); response.getWriter().print(jsonString); return null;
相关推荐
利用FullCalendar应用实现日历事件开发
fullCalendar具体应用 fullCalendar具体应用 fullCalendar具体应用 fullCalendar具体应用
日程安排,FullCalendar,日历,JSON,jquery实例 在线演示FullCalendar新建、修改和删除日程事件的示例。
fullcalendar-1.5.1+中文应用方法,仿google日程管理
基于SpringBoot和fullCalendar的会议室预约系统设计源码,该项目包含143个文件,主要...该项目是一个基于fullCalendar和springboot实现的会议室预约系统,可能涉及用户界面设计、应用逻辑实现、数据存储等多个方面。
在fullcalendar-1.6.4的基础上增加农历和相关节日,直接拿过来可以用,包含所有的CSS、JS、HTML文件,可以直接应用于项目之中
开发者可以使用FullCalendar创建强大的日历日程应用,FullCalendar提供了丰富的选项设置和方法调用,使得开发者可以轻松的创建各种功能的日历程序。
主要介绍了在Vue项目中用fullcalendar制作日程表,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
laravel-fullcalendar, Laravel FullCalendar.io helper Laravel 5完整日历 helper 为 Laravel 4.2提供了英镑的收费: 使用 laravel-4 分支( )这是一个简单的helper 包,可以在 Laravel 应用程序中生成 http://full
fullcalendar-2.4.0这是从官网上下载到的最新版,有墙的朋友不用愁了,里面有demo。按照上面的做就能实现,像其它的js文件一样,引用很简单。只是更多的应用还要自己去学习。功能很强大的插件。
开发者可以使用FullCalendar创建强大的日历日程应用,FullCalendar提供了丰富的选项设置和方法调用,使得开发者可以轻松的创建各种功能的日历程序。 由于项目需求,需要通过日历的方式展现某些数据,在网上搜索了很...
fullcalendar-rails, 包含Adam的gem fullcalendar jquery插件的资产 Fullcalendar::Rails这个 gem 用于在你的RoR应用程序中添加FullCalendar插件的内容,这样你就不用下载和安装所有的FullCalendar资产。安装要安装 ...
fullcalendar-node2 heroku设置: ://dashboard.heroku.com/apps/fullcallendar-nodejs/settings 主要网站FullCalendar: ://fullcalendar.io/ 来自Creative TimHTML模板: : 灵感来自@MikeSmithDev ! 查看!本地...
该组件旨在添加到闪电应用程序页面,记录页面或主页中。 但是,它也可以作为嵌入到另一个组件中。 请参阅force-app / main / default / lwc / fullCalendar / fullCalendar.js-meta.xml文件以获取需要在组件中包含...
#FullcalendarEngine此引擎仅支持 Rails 4 应用程序。安装将 fullcalendar_engine 添加到您的 Gemfile 中: gem 'fullcalendar_engine'捆绑安装您的依赖项并运行安装生成器: bundle installbundle exec rails g ...
开发者可以使用FullCalendar创建强大的日历日程应用,FullCalendar提供了丰富的选项设置和方法调用,使得开发者可以轻松的创建各种功能的日历程序。FullCalendar用日历的形式直观的展示了日程安排、代办事宜等事件,...
Laravel易于访问,但功能强大,为大型,强大的应用程序提供了所需的强大工具。 出色的控制容器版本,富有表现力的移植系统以及紧密集成的单元测试支持,为您提供了构建任务所需的任何应用程序所需的工具。官方文件...
这是一个开放源代码应用程序,用于通过基于Web的日历使用cfWheels,Bootstrap3,jQuery,FullCalendar.js和其他位来预订房间。 作者:汤姆·金- / / @neokoenig 演示版 您可以在找到演示。 版 当前版本是1.2 文献...
vue2-demo - 基于Vue2实现的单页面应用