文档章节

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

俺又不乱来
 俺又不乱来
发布于 2016/04/06 15:14
字数 743
阅读 202
收藏 1


在此之前你应该引入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
博文 33
码字总数 6842
作品 0
徐汇
程序员
fullcalendar日历控件知识点集合

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

方开金
2014/08/12
0
0
关于fullcalendar里显示json格式的events(java)

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

cyper
2013/10/08
0
2
FullCalendar应用——增删改数据操作

FullCalendar可以灵活运用到项目开发中,本站上一篇文章中,我们介绍了如何在FullCalendar新建日程事件,今天我要给大家介绍的是如何在FullCalendar中编辑和删除日程事件,这样我们就完成了F...

蜗牛奔跑
2015/09/23
0
0
实现Google Calendar(日历)的几个推荐方案

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

晨曦之光
2012/03/09
0
0
Backbone.js 样例站点与入门指南

本文的来源 前段时间,我的工作中开始接触到 Backbone.js 这个开源框架,于是我就在网上搜索了下相关资料开始学习,结果找来找去,发现这些资料都不够全面,都是只涉及到关键点的一部分,只有...

苗哥
2012/08/06
0
3

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Zookeeper总结

Zookeeper的部分概念 什么是zookeeeper? Zookeeper是一个分布式服务的协调中心 zookeeper节点的角色类型? Leader(领导者)、Follower(跟随者)、Observer(观察者) Leader 负责更新系统...

DemonsI
18分钟前
0
0
Redis学习笔记

常用命令 从Docker进入Redis的命令 sudo docker exec -it redis /bin/bash

OSC_fly
19分钟前
0
0
SqlServer查询某个日期的数据

select * from View_ZJMONITORINGCORROSION where ENTERDATE > CONVERT(datetime,DATEADD(day,1,'2017/12/28 14:53:07'))...

笑丶笑
20分钟前
0
0
常用编码规范

Standard characters https://ascii.cl/

yeahlife
22分钟前
0
0
flannel实战

docker swarm mode的出现是个里程碑,官方原生的编排调度看起来都成雏形了,但是swarm mode和容器外部系统的对接、网络性能始终不尽人意,swarm mode下各种开源周边不能使用,感觉swarm mod...

China_OS
24分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部