文档章节

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

俺又不乱来
 俺又不乱来
发布于 2016/04/06 15:14
字数 743
阅读 209
收藏 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(日程管理控件)

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

长平狐
2013/01/06
20.6K
1
使用 Grails 与 jQuery 创建 Web Calendar

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

红薯
2010/06/25
1K
1
fullcalendar

https://github.com/fullcalendar/fullcalendar/releases

K68
2016/01/06
1
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

没有更多内容

加载失败,请刷新页面

加载更多

正则表达式匹配不包含

^((?!xxx).)*$

安小乐
9分钟前
1
0
python Windows tkinter应用开发3 列出目录的所有文件

在本章中,我们将编写程序来执行此操作。 1)选择文件夹。 2)在UI的标签部分打印该文件夹中的所有文件名(带文件扩展名)。 首先,修改selectFile函数以打开文件夹。主文件如下: from tki...

python测试开发人工智能安全
10分钟前
1
0
使用Laya引擎开发微信小游戏(上)

  使用一个简单的游戏开发示例,由浅入深,介绍了如何用Laya引擎开发微信小游戏。      img      作者:马晓东,腾讯前端高级工程师。      微信小游戏的推出也快一年时间了,...

SEOwhywhy
15分钟前
1
0
react程序开发问题记录

1、webpack.config.dev.js文件的publicpath配置

teamlog
28分钟前
2
0
javascript 值转换为布尔值

任意javascript 的值都可以转换为布尔值。 特别是在 if() 等判断中使用的时候: 下面这些值会被转换为 false undefined , null , 0 , -0 , NaN , "" 空字符串 来自 JavaScript 权威指南 书籍...

之渊
31分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部