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

最新推荐文章于 2024-03-31 21:03:12 发布

weixin_33851429

最新推荐文章于 2024-03-31 21:03:12 发布

阅读量689

点赞数

文章标签：数据库 php java

原文链接：https://my.oschina.net/hycky/blog/653630

版权

为什么80%的码农都做不了架构师？>>>

在此之前你应该引入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);
  }
 }

数据库