文档章节

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

俺又不乱来
 俺又不乱来
发布于 2016/04/06 15:14
字数 743
阅读 207
收藏 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
FullCalendar日历插件说明文档

普通显示设置 属性 描述 默认值 header 设置日历头部信息。 如果设置为false,则不显示头部信息。包括left,center,right左中右三个位置,每个位置都可以对应以下不同的配置: title: 显示当...

ada_young
10/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Alibaba Java诊断利器Arthas实践--使用redefine排查应用奇怪的日志来源

背景 随着应用越来越复杂,依赖越来越多,日志系统越来越混乱,有时会出现一些奇怪的日志,比如: [] [] [] No credential found 那么怎样排查这些奇怪的日志从哪里打印出来的呢?因为搞不清...

hengyunabc
今天
1
0
home hosts

home hosts lwk@qwfys:~$ cat /etc/hosts127.0.0.1 localhost127.0.1.1 qwfys192.168.56.101vm600.qwfys.com39.108.212.91alpha1.ppy.com39.108.117.122alpha2.p......

qwfys
今天
1
0
大数据教程(6.1)hadoop生态圈介绍及就业前景

1. HADOOP背景介绍 1.1、什么是HADOOP 1.HADOOP是apache旗下的一套开源软件平台 2.HADOOP提供的功能:利用服务器集群,根据用户的自定义业务逻辑,对海量数据进行分布式处理 3.HADOOP的核心组...

em_aaron
今天
4
0
hadoop垃圾回收站

在生产生,hdfs回收站必须是开启的,一般设置为7天。 fs.trash.interval 为垃圾回收站保留时间,如果为0则禁用回收站功能。 fs.trash.checkpoint.interval 回收站检查点时间,一般设置为小于...

hnairdb
昨天
3
0
腾讯与Github的魔幻会面背后的故事…

10月22日,腾讯开源管理办公室有幸邀请到Github新晋CEO Nat Friedman,前来鹅厂参观交流。目前腾讯已经有近70个项目在Github上开源,共获得17w stars,世界排名11位。Github是腾讯开源的主阵...

腾讯开源
昨天
17
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部