文档章节

fullcalendar 及mysql数据库的工作日管理

俺又不乱来
 俺又不乱来
发布于 2016/04/06 15:14
字数 743
阅读 200
收藏 1
点赞 1
评论 0


在此之前你应该引入fullCalendar的插件:


下载地址:http://fullcalendar.io/download/

实现的效果图可查看:点击日期可改变日期的状态(工作日和非工作日的切换)






 首先是jsp页面:

<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
 <title>日期信息管理</title>
 <meta name="decorator" content="default"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href='${ctxStatic}/fullcalendar-2.5.0/fullcalendar.css' rel='stylesheet' />
 <link href='${ctxStatic}/fullcalendar-2.5.0/fullcalendar.print.css' rel='stylesheet' media='print' />
 <script src='${ctxStatic}/fullcalendar-2.5.0/lib/moment.min.js'></script>
 <script src='${ctxStatic}/fullcalendar-2.5.0/lib/jquery.min.js'></script>
 <script src='${ctxStatic}/fullcalendar-2.5.0/fullcalendar.min.js'></script>
 <script src='${ctxStatic}/fullcalendar-2.5.0/lang-all.js'></script>
<script>
  $(document).ready(function() {
   //日历显示字体
   var currentLangCode = 'zh-cn';
   // build the language selector's options
   $.each($.fullCalendar.langs, function(langCode) {
    $('#lang-selector').append(
     $('<option/>')
      .attr('value', langCode)
      .prop('selected', langCode == currentLangCode)
      .text(langCode)
    );
   });
   // rerender the calendar when the selected option changes
   $('#lang-selector').on('change', function() {
    if (this.value) {
     currentLangCode = this.value;
     $('#calendar').fullCalendar('destroy');
     renderCalendar();
    }
   });
   
   
   $('#calendar').fullCalendar({
    header: {
     left: 'prev,next today',
     center: 'title',
     right: 'month,agendaWeek,agendaDay'
    },
      //点击day触发改变日期
     dayClick: function(date, allDay, jsEvent, view){
           var dates =date.format();
              $.ajax({
               url:"${ctx}/current/dateInfo/updateisworkday?date="+dates,
               async:false
               })
               $('#calendar').fullCalendar('refetchEvents');
               $("#message").empty();
              
 $("#message").append('<div style="display: block;" id="messageBox" 
class="alert alert-success hide"><button data-dismiss="alert" 
class="close">×</button><div>修改成功</div></div>
');
            }, 
    lang: currentLangCode,
    /* defaultDate: '2015-12-12', */
    editable: true,
    eventLimit: true, // allow "more" link when too many events
    events: {
//查询数据库的日期
     url: '${ctx}/current/dateInfo/queryByDate',
     error: function() {
      $('#script-warning').show();
     }
    },
    loading: function(bool) {
     
     $('#loading').toggle(bool);
    }
   });
   
  });
  
</script>
<style>
 body {margin: 40px 10px;padding: 0;font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;font-size: 14px;}
 #top{width=1500px;height=800px;}
    #intruduce{width:200px;height:200px;}
    #int1{width:100px;height:60px;background-color: #FF9F89;}
     #int2{width:100px;height:60px;background-color: #FFF68F;}
 #calendar {max-width: 900px;margin: 0 auto;}
</style>
</head>
<body>
<div id="message"></div>
<table id="top">
  <tr>
    <td id="iswork">
     <div id="intruduce">
      <div id="int1">工作日</div>
      &nbsp;
      <div id="int2">休息</div>
     </div>
   </td>
    <td>
    <div id='calendar'></div>
    </td>
 </tr>
</table>
</body>
</html>



控制层:

/**
  * 查询日期数据并设置数据的样式
  * @param  start
  * @param  end
  * @param  request
  * @param  response
  * @param  model
  * @return
  */
 @RequiresPermissions("current:dateInfo:view")
 @RequestMapping(value = {"queryByDate"})
 public String queryByDate(Date start,Date end, HttpServletRequest request, HttpServletResponse response, Model model) {
  List<DateInfo> dateInfos = dateInfoService.queryByDate( start, end);
  List<Object> list = new ArrayList<Object>();
  for(DateInfo dateInfo: dateInfos){
   HashMap<String,String> map =  new HashMap<String,String>();
   map.put("title", DictUtils.getDictLabel(dateInfo.getIsWorkday(), "is_workday", ""));//设置工作日和非工作日的颜色
   map.put("color", !"0".equals(dateInfo.getIsWorkday())?"#FF9F89":"#FFF68F");
   map.put("rendering", "background");
   map.put("start", DateUtils.formatDate(dateInfo.getDate(), "yyyy-MM-dd"));
   list.add(map);
  }
  return renderString(response,list);
 } 
修改日期的状态(工作日点击可改为非工作日):
 /**
  * 修改工作日状态
  * @param dateInfo
  * @param request
  * @param response
  * @param model
  * @param redirectAttributes
  * @return
  */
 @RequiresPermissions("current:dateInfo:view")
 @RequestMapping(value = {"updateisworkday"})
 public
 String findByDate(DateInfo dateInfo, HttpServletRequest request, 
HttpServletResponse response, Model model,RedirectAttributes 
redirectAttributes) {
  if (!beanValidator(model, dateInfo)){
   return form(dateInfo, model);
  }
  DateInfo entity = dateInfoService.findByDate(dateInfo);
  entity.setIsWorkday(CurrentProjectConstant.IS_WORKDAY_NO.equals(entity.getIsWorkday())?CurrentProjectConstant.IS_WORKDAY_YES:CurrentProjectConstant.IS_WORKDAY_NO);
  dateInfoService.update(entity);
  addMessage(redirectAttributes, "工作日状态修改成功");
  return "modules/current/dateInfo";
 }
另外附上初始化日期的代码:
 
 /**
  * 初始化日期信息
  * @throws Exception
  */
 @Test
 public void TestInitDateInfo() throws Exception {
//  SimpleDateFormat sf = new SimpleDateFormat("yyyy-MM-dd");
  Calendar c = Calendar.getInstance();
//设置时间
  c.setTime(DateUtils.parseDate("2015-12-01"));
//范围三年(可调整)
  for(int i = 0;i< 1080;i++){
   System.out.println();
//数据库表在项目中的实体
   DateInfo dateInfo = new DateInfo();
   
   
   int dayOfWeek = c.get(Calendar.DAY_OF_WEEK);
      
   String isWorkDay = (dayOfWeek==7 || dayOfWeek==1)?CurrentProjectConstant.IS_WORKDAY_NO:CurrentProjectConstant.IS_WORKDAY_YES;
   dateInfo.setIsWorkday(isWorkDay);
   dateInfo.setDate(c.getTime());
   dateInfoService.save(dateInfo);
   
     
   //日期增加一天
   c.add(Calendar.DAY_OF_MONTH, 1);
  }
 }


 

 数据库

 

© 著作权归作者所有

共有 人打赏支持
俺又不乱来
粉丝 0
博文 32
码字总数 6842
作品 0
徐汇
程序员
FullCalendar(日程管理控件)

(以下是我学习FullCalendar控件时,网络上收集的一些资料) 第一部分(官方资料) jquery.fullCalendar官方网址: http://arshaw.com/fullcalendar/ jquery.fullCalendar英文文档: http://arsh...

长平狐 ⋅ 2013/01/06 ⋅ 1

使用 Grails 与 jQuery 创建 Web Calendar

Grails 是一套用于快速 Web 应用开发的开源框架,它基于 Groovy 编程语言,并构建于 Spring、Hibernate 和其它标准 Java 框架之上,从而为大家带来一套能实现超高生产力的一站式框架。 jQue...

红薯 ⋅ 2010/06/25 ⋅ 1

sql 查询几个工作日之后的日期

之前在网络查询了一下关于使用sql 查询 “几个工作日之后的日期”的问题,大意就是,假设今天是周三(2014/08/27),三个工作日之后(包含周三)就是周五(20140929),四个工作日之后,就是...

peiquan ⋅ 2014/08/28 ⋅ 0

fullcalendar日历控件知识点集合

1、基本语法: 首先,fullcalendar和JQUERY一样,以面向对象的方式来组织代码。当然,这里的面向对象仅仅是指可以把整个fullcalendar理解为一个类,这个类里包括有很多的属性、方法、委托(函...

方开金 ⋅ 2014/08/12 ⋅ 0

吾同树/MyCalendar

#MyCalendar ##应用说明 ###场景 以前家公司,一百多号人,前台每天中午和晚上负责为不想下楼的同学统一叫外卖,快到了饭点,前台就会在群里面喊一声“点餐啦!”,然后饿狼们就会叽叽喳喳一...

吾同树 ⋅ 2014/05/11 ⋅ 0

实现Google Calendar(日历)的几个推荐方案

作者:66 Hi,大家好,我是CssRain的站长。爱好前端开发的我先后从事过Java开发,JavaScript,CSS开发等,已经工作2年+了。目前就职于亚信中国(Asiainfo),担任前端开发和创新工作。忠心希望...

晨曦之光 ⋅ 2012/03/09 ⋅ 0

FullCalendar 对应的数据库表中应该建哪些字段?

有没有人用过FullCalendar ,在数据库中,需要建哪些表,或者字段到表里。

小杨阿哥哥 ⋅ 2010/12/01 ⋅ 4

PHP+Mysql+jQuery+fullcalendar实现的微型公司内部订餐系统

需求相关: 公司20人左右, 每天中午, 下午两次订餐, 都是助理在群里说"开始订餐", 然后大家报菜名, 然后助理统计, 打电话. 今天, 助理说"开始订餐, 订什么密聊...", 突然就想做这么个东西......

老古董 ⋅ 2010/06/10 ⋅ 2

fullCalendar日历插件,怎样获得已经在界面上加载好的事件的数据

使用fullCalendar插件编写的一个排版日历,每个事件都是从前端界面拖拽进去的,数据库里没有记录,现在想要获得这些数据。假设当前端界面有从数据库获得数据生成的时间时,在拖拽新的事件时,...

buy123 ⋅ 2017/03/15 ⋅ 0

关于fullcalendar里显示json格式的events(java)

cyper的java代碼(spring mvc controller): @RequestMapping(value = "calendarEvents")@ResponseBodypublic String calendarEvents(){List<LecturerAgendaVo> agendas = lecturerAgendaServ......

cyper ⋅ 2013/10/08 ⋅ 2

没有更多内容

加载失败,请刷新页面

加载更多

下一页

HiSDP —— 高效的C++软件开发平台

目前阿里集团每天有近1000PB的数据是通过LogAgent采集的,为了让LogAgent做到资源占用节省和高效采集,背后是基于HiSDP去构建的。 缘由 当决定采用C++编程语言去开发一个软件时,紧接着所面临...

阿里云云栖社区 ⋅ 20分钟前 ⋅ 0

zookeeper-3.4.12 下载与安装教程

一、zookeeper下载地址 http://mirrors.hust.edu.cn/apache/zookeeper/ 二、启动教程 把压缩包放在指定目录下 第三: 进入 conf文件夹底下 zoo_sample.cfg 文件名改成 zoo.cfg 第四步: 进入b...

泉天下 ⋅ 21分钟前 ⋅ 0

Oracle 中文日期转换

SELECT TO_date('2011年11月11日', 'yy"年"mm"月"dd"日"') FROM DUAL; 1. Oracle无法识别中文格式,所以添加双引号。 2. 后面的格式是指字符串在转换前的格式,而不是指转换后的格式。...

江戸川 ⋅ 22分钟前 ⋅ 0

MySell:API Spring Boot

起步 类目 商品 订单

BeanHo ⋅ 25分钟前 ⋅ 0

Spring方法拦截器MethodInterceptor

参考资料 1、Spring方法拦截器MethodInterceptor 2、Sharding JDBC源码分析-JdbcMethodInvocation类的作用

哎小艾 ⋅ 28分钟前 ⋅ 0

正则表达式

元字符 元字符,又叫字符集,就是用一些特殊符号表示特定种类的字符或位置。 匹配字符 . 匹配除换行符以外的任意字符 \w 匹配字母或数字或下划线或汉字 \s 匹配任意的空白符 \d 匹配数字 匹配...

wangchen1999 ⋅ 28分钟前 ⋅ 0

数据库数据导入Elasticsearch案例分享

基于bboss持久层和bboss elasticsearch客户端实现数据库数据导入es案例分享(支持各种数据库和各种es版本) 1.案例对应的源码 https://gitee.com/bboss/bboss-elastic/blob/master/bboss-el...

bboss ⋅ 29分钟前 ⋅ 0

动手---sbt(2)

参考 https://blog.csdn.net/leishangwen/article/details/46225587 建立一个chisel_max目录,文件内容如后面所述,现在开始执行命令: joe@joe-Aspire-Z3730:/media/sdb4/download/scala$ c......

whoisliang ⋅ 35分钟前 ⋅ 0

纯js实现最简单的文件上传(后台使用MultipartFile)

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>XMLHttpRequest上传文件</title> <script type="text/javascript"> //图片上传 var xhr......

孟飞阳 ⋅ 40分钟前 ⋅ 0

iOS宇宙大战游戏、调试工具、各种动画、AR相册、相机图片编辑等源码

iOS精选源码 日期时间选择器,swift Space Battle 宇宙大战 SpriteKit游戏源码 LLDebugTool - 便捷的IOS调试工具(新增截屏功能) 相机扫描or长按识别二维码、FMDB、键盘动态高度、定位等 动画...

sunnyaigd ⋅ 41分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部