您的位置：首页 > 其它

fullcalendar 日历改造

2017-03-31 16:59 274 查看

参考：

1：http://feifei.im/archives/168

2：blog.csdn.net/u010222318/article/details/30083841

jsp页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@page import="java.util.*"%>
<!DOCTYPE html>
<html>
<head>
<%@ include file="/common/subpage.jsp"%>
<link rel="stylesheet" type="text/css"
href="${ctx }/plugins/easyui/themes/gray/easyui.css">
<link rel='stylesheet' type="text/css"
href='${ctx }/plugins/fullcalendar/fullcalendar.css' />
<link rel='stylesheet' type="text/css"
href='${ctx }/plugins/fullcalendar/fullcalendar.print.css'
media='print' />
<script src='${ctx }/plugins/fullcalendar/fullcalendar.js'></script>
<meta charset="UTF-8">
<title>节假日管理</title>
</head>
<body>

<div id="tabs" class="easyui-tabs overh"
data-options="fit:true,border:false">
<div title="节假日设置">
<div class="calendarWrapper"
style="width: 100%; display: flex; flex-direction: row-reverse">
<div class="rightSidePanel mb50 fr" style="width: 230px">
<div id="div_day_detail" class="h_calendar_alm"
style="width: 230px; margin-bottom: 20px;">
<div class="alm_date"></div>
<div class="alm_content nofestival">
<div class="today_icon"></div>
<div class="today_date"></div>
<p id="alm_cnD"></p>
<p id="alm_cnY"></p>
<p id="alm_cnA"></p>
<div class="alm_lunar_date"></div>
</div>
</div>

<div id="holidayInstall" class="easyui-panel" title="节假日设置"
style="width: 230px; padding: 10px 20px;">
<div style="margin-bottom: 10px">
<div>标题:</div>
<input id="title" class="easyui-validatebox textbox"
data-options="prompt:'标题项必填',required:true,validType:'length[3,10]'"
style="width: 100%; height: 25px">
</div>
<div style="margin-bottom: 10px">
<div>选择日期类型:</div>
<input id="dayType" class="easyui-combobox"
style="width: 100%; height: 25px"
data-options="
valueField:'workType',
textField:'name',
data:workTypes,
required:true,
panelHeight:'auto',
editable: false
">
</div>
<div style="margin-bottom: 10px">
<div>起始日期:</div>
<input id="holidayBegtime" class="easyui-datebox"
data-options="formatter:myformatter,parser:myparser,required:true,editable:false"
style="width: 100%; height: 25px">
</div>
<div style="margin-bottom: 10px">
<div>结束日期:</div>
<input id="holidayEndtime" class="easyui-datebox"
data-options="formatter:myformatter,parser:myparser,required:true,editable:false"
style="width: 100%; height: 25px">
</div>
<div align="center">
<a id="save" class="easyui-linkbutton" iconCls="icon-ok"
onclick="saveHoliday()" style="height: 20px;">保存</a>
<a id="deleteHoliday" class="easyui-linkbutton" iconCls="icon-cancel"
onclick="deleteHoliday()" style="height: 20px;">删除</a>

</div>
</div>
</div>
<div id="calendar" class="dib"></div>
</div>
</div>

<div title="上班时间设置">
<table id="dg2" striped="true" class="easyui-datagrid"
style="width: 100%; height: auto; display: none;"
data-options="
onBeforeEdit:test,
pagination:false,
fitColumns:true,
remoteSort:false,
singleSelect:true,
border:false
">
<thead>
<tr>
<th field="weekName" width="10%" align="center">星期</th>
<th field="workAMStart" width="20%" align="center"
formatter="cgHour"
editor="{type : 'timespinner',
options : {
valueField:'workAMStart',
showSeconds:false,
required : true
}
}">上午上班时间</th>
<th field="workAMEnd" width="20%" align="center"
formatter="cgHour"
editor="{type : 'timespinner',
options : {
valueField:'workAMEnd',
showSeconds:false,
required : true
}
}">上午下班时间</th>
<th field="workPMStart" width="20%" align="center"
formatter="cgHour"
editor="{type : 'timespinner',
options : {
valueField:'workPMStart',
showSeconds:false,
required : true
}
}">下午上班时间</th>
<th field="workPMEnd" width="20%" align="center"
formatter="cgHour"
editor="{type : 'timespinner',
options : {
valueField:'workPMEnd',
showSeconds:false,
required : true
}
}">下午下班时间</th>
<th field="workType" width="10%" align="center"
formatter="isHoliday"
editor="{type:'combobox',
options:{
valueField:'workType',
textField:'name',
data:workTypes,
required:true,
panelHeight:'auto'
}
}">是否为节假日</th>
</tr>
</thead>
</table>
</div>
</div>
<div id="win" class="easyui-window" title="初始化节假日信息" closed="true"
style="width: 450px; height: 120px; display: none;" align="center"
data-options="modal:true,collapsible:false,
minimizable:false,maximizable:false,footer:'#ipt'">
<table style="padding: 10px 10px 10px 10px;">
<tr>
<td>年份：</td>
<td><input name="startYear" id="startYear"
data-options="valueField:'id', textField:'text',required:true"
class="easyui-combobox" style="width: 60px;"></td>
<td>范围：</td>
<td><input name="num" id="num"
data-options="valueField:'id', textField:'text',panelHeight:'auto',required:true"
class="easyui-combobox" style="width: 50px;"> 年</td>
</tr>
</table>
<div id="ipt" align="center" style="padding: 5px;">
<a class="easyui-linkbutton" iconCls="icon-ok" onClick="startInit()">初始化</a>
<a class="easyui-linkbutton" iconCls="icon-cancel"
onClick="closeWin()">取消</a>
</div>
</div>
</body>
<script type="text/javascript">
var isRemote = true;
//时间调节器扩展
$.extend($.fn.datagrid.defaults.editors, {
timespinner : {
init : function(container, options) {
var input = $('<input />').appendTo(container);
input.timespinner(options);
return input;
},
destroy : function(target) {
$(target).remove();
},
getValue : function(target) {
var timVal = $(target).timespinner('getValue');
var arr = timVal.split(":");
return parseInt(arr[0]) * 60 + parseInt(arr[1]);
},
setValue : function(target, value) {
var fmtVal = cgHour(value);
$(target).timespinner('setValue', fmtVal);
},
resize : function(target, width) {
$(target)._outerWidth(width);
}
}
});

var workTypes = [ {
workType : '0',
name : '工作日'
}, {
workType : '1',
name : '节假日'
} ];

var doSearch = function(value, name) {
$('#dg').datagrid('reload', {
searchTxt : value
});
}

function formatDate(value) {
if (value) {
var date = new Date(value).toLocaleString();
return date;
}
return '';
}

function isHoliday(value, rowIndex, rowData) {
if (value == 0) {
return "工作日";
} else {
return "节假日";
}
}
function cgHour(value, rowIndex, rowData) {

var hour = parseInt(value / 60);
hour = hour.toString();
if (hour.length == 1) {
hour = "0" + hour;
}

var minute = parseInt(value % 60);
minute = minute.toString();
if (minute == 1 || minute == 0) {
minute = "0" + minute;
}
var time = hour + ":" + minute;

return time;
}

function refreshByWeek() {
$("#dg2").datagrid('reload', ctx + "/system/listWorkHourByWeek");
}

function test(rowIndex, rowData) {
$("#dg2").datagrid('selectRow', rowIndex);

$("#workAMStart").timespinner('setValue', rowData.workAMStart);

$("#workAMEnd").timespinner('setValue', rowData.workAMEnd);
$("#workPMStart").timespinner('setValue', rowData.workPMStart);
$("#workPMEnd").timespinner('setValue', rowData.workPMEnd);
$("#workType").combobox('setValue', rowData.workType);
}

$(function() {
$('#dg2').edatagrid({
autoSave : true,
url : ctx + '/system/listWorkHourByWeek',
updateUrl : ctx + '/system/saveOrUpdateWorkHourByWeek',
onSuccess : function(index, row) {
sucessMsg("保存成功");
},
onError : function(index, row) {
showError("保存失败");
}
});
});

/********************************分割线***************************************/
/**日期格式化**/
function myformatter(date) {
var y = date.getFullYear();
var m = date.getMonth() + 1;
var d = date.getDate();
return y + '-' + (m < 10 ? ('0' + m) : m) + '-'
+ (d < 10 ? ('0' + d) : d);
}
function myparser(s) {
if (!s)
return new Date();
var ss = (s.split('-'));
var y = parseInt(ss[0], 10);
var m = parseInt(ss[1], 10);
var d = parseInt(ss[2], 10);
if (!isNaN(y) && !isNaN(m) && !isNaN(d)) {
return new Date(y, m - 1, d);
} else {
return new Date();
}
}

/**限制节假日结束日期大于起始日期**/
$("#holidayBegtime").datebox({
onSelect : function(beginDate){
$('#holidayEndtime').datebox().datebox('calendar').calendar({
validator: function(date){
return beginDate<=date;//<=
}
});
}
});

/**设置节假日页面按钮点击事件**/
function saveHoliday(){
var title = $('#title').val();
if(title == ""){
showError("标题不能为空");
return;
}
var dayType = $('#dayType').combobox('getValue');
if(dayType == ""){
showError("日期类型不能为空");
return;
}
var holidayBegtime = $('#holidayBegtime').datebox('getValue');
if(holidayBegtime == ""){
showError("起始时间不能为空");
return;
}
var holidayEndtime = $('#holidayEndtime').datebox('getValue');
if(holidayEndtime == ""){
showError("结束时间不能为空");
}
$.ajax({
url: ctx + '/system/saveHolidayManagement',
type: 'post',
data: {
'title':title,
'holidayBegtime':holidayBegtime,
'holidayEndtime':holidayEndtime,
'dayType':dayType
},
context : document.body,
success:function(data){
var holidays = JSON.parse(data);
for(var i=0,len = holidays.length;i<len;i++){
var cdate = holidays[i].cdate;
var state = holidays[i].state;
$(".fc-day")
.each(
function() {
//alert($(this).attr("data-date"));
if (cdate == $(this).attr("data-date")) {
//console.info($(this).children().find('.fc-day-content'));
if (state == 'ban') {
state = '<font class="redFont" style="font-weight: bold;background: #FFAB3D;color: #fff;padding: 5px;font-size: 16px;border-radius: 5px;">班</font>';
} else if(state == "xiu") {
state = '<font class="redFont" style="font-weight: bold;background: #37ABEC;color: #fff;padding: 5px;font-size: 16px;border-radius: 5px;">休</font>';
}else{
state = '';
}
//防止多次点击出现叠加问题，在叠加前进行清空
$(this).children().find('.fc-day-content')
.empty();
$(this).children().find('.fc-day-content')
.append(state);
}
});
}
$.messager.show({
title : '提示',
msg : '成功保存节假日信息',
timeout : 3000,
showType : 'slide'
});
},
error:function(e){
showError('保存失败');
}
});
}

/**删除节假日页面按钮点击事件**/
function deleteHoliday(){
var title = $('#title').val();
if(title == ""){
showError("当前时间不是节假日");
return;
}
var dayType = $('#dayType').combobox('getValue');
if(dayType == ""){
showError("日期类型不能为空");
return;
}
var holidayBegtime = $('#holidayBegtime').datebox('getValue');
if(holidayBegtime == ""){
showError("起始时间不能为空");
return;
}
var holidayEndtime = $('#holidayEndtime').datebox('getValue');
if(holidayEndtime == ""){
showError("结束时间不能为空");
return;
}
$.ajax({
url: ctx + '/system/deleteHolidayManagement',
type: 'post',
data: {
'title':title,
'holidayBegtime':holidayBegtime,
'holidayEndtime':holidayEndtime,
'dayType':dayType
},
context : document.body,
success:function(data){
var holidays = JSON.parse(data);
for(var i=0,len = holidays.length;i<len;i++){
var cdate = holidays[i].cdate;
var state = holidays[i].state;
$(".fc-day")
.each(
function() {
//alert($(this).attr("data-date"));
if (cdate == $(this).attr("data-date")) {
//console.info($(this).children().find('.fc-day-content'));
if (state == 'ban') {
state = '<font class="redFont" style="font-weight: bold;background: #FFAB3D;color: #fff;padding: 5px;font-size: 16px;border-radius: 5px;">班</font>';
} else if(state == "xiu") {
state = '<font class="redFont" style="font-weight: bold;background: #37ABEC;color: #fff;padding: 5px;font-size: 16px;border-radius: 5px;">休</font>';
}else{
state = '';
}
//防止多次点击出现叠加问题，在叠加前进行清空
$(this).children().find('.fc-day-content')
.empty();
$(this).children().find('.fc-day-content')
.append(state);
}
});
}
$.messager.show({
title : '提示',
msg : '成功刪除节假日信息',
timeout : 3000,
showType : 'slide'
});
},
error:function(e){
showError('保存失败');
}
});
}

/** 页面载入当天信息初始化 **/
$(function() {
var dayDate = new Date();
var d = $.fullCalendar.formatDate(dayDate, "dddd");
var m = $.fullCalendar.formatDate(dayDate, "yyyy年MM月dd日");
var lunarDate = lunar(dayDate);
$(".alm_date").html(m + " " + d);
$(".today_date").html(dayDate.getDate())
$("#alm_cnD").html("农历" + lunarDate.lMonth + "月" + lunarDate.lDate);
$("#alm_cnY").html(
lunarDate.gzYear + "年 " + lunarDate.gzMonth + "月 "
+ lunarDate.gzDate + "日");
$("#alm_cnA").html("【" + lunarDate.animal + "年】");
var fes = lunarDate.festival();
if (fes.length > 0) {
$(".alm_lunar_date").html($.trim(lunarDate.festival()[0].desc));
$(".alm_lunar_date").show();

$("#title").val(lunarDate.festival()[0].desc);
$('#holidayBegtime').datebox('setValue',myformatter(dayDate));
$('#holidayEndtime').datebox().datebox('calendar').calendar({
validator: function(date){
return dayDate<=date;//<=
}
});
} else {
$(".alm_lunar_date").hide();
}

});
$(document).ready(
function(){
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();

$('#calendar')
.fullCalendar(
{
header : {
left : 'prevYear, prev,next, nextYear',
center : 'title',
right : 'today'
},
editable : true,
events : [],
dayClick : function(dayDate,
allDay, jsEvent, view) { //点击单元格事件
backgroundShow();
$.ajax({
url : ctx + '/system/getDayDetail',
type : 'post',
data:{'date':myformatter(dayDate)},
context : document.body,
//解决编码问题
contentType: "application/x-www-form-urlencoded; charset=utf-8",
success : function(data) {
var curDayDetial = JSON.parse(data);
$("#title").val(curDayDetial[0].title);
$("#dayType").combobox('setValue',curDayDetial[0].type)
$('#holidayBegtime').datebox('setValue',curDayDetial[0].cdate);
$('#holidayEndtime').datebox().datebox('calendar').calendar({
validator: function(date){
return dayDate<=date;//<=
}
});
$('#holidayEndtime').datebox('setValue',curDayDetial[0].enddate);
if(curDayDetial[0].title != null){
$(".alm_lunar_date")
.html(
$.trim(curDayDetial[0].title));
$(".alm_lunar_date").show();
isRemote = false;
}else{
isRemote = true;
}
},
error : function(e) {
showError('获取日期详情失败');
}
});

//                                              $(this).css('background-color', "#E0F4D7");
$("td[data-date='" + myformatter(dayDate) + "']").not(
'.fc-other-month').css(
'backgroundColor', '#E0F4D7');
var d = $.fullCalendar
.formatDate(dayDate,
"dddd");
var m = $.fullCalendar
.formatDate(dayDate,
"yyyy年MM月dd日");
var m_install = $.fullCalendar
.formatDate(dayDate,
"MM/dd/yyyy");
var lunarDate = lunar(dayDate);
$(".alm_date").html(
m + " " + d);
$(".today_date").html(
dayDate.getDate());

$("#alm_cnD")
.html(
"农历"
+ lunarDate.lMonth
+ "月"
+ lunarDate.lDate);
$("#alm_cnY")
.html(
lunarDate.gzYear
+ "年 "
+ lunarDate.gzMonth
+ "月 "
+ lunarDate.gzDate
+ "日");
$("#alm_cnA").html(
"【" + lunarDate.animal
+ "年】");
var fes = lunarDate.festival();
if (fes.length > 0 && isRemote) {
$(".alm_lunar_date")
.html(
$.trim(lunarDate
.festival()[0].desc));
$(".alm_lunar_date").show();
} else {
$(".alm_lunar_date").hide();
}
// 当天则显示“当天”标识
var now = new Date();
if (now.getDate() == dayDate
.getDate()
&& now.getMonth() == dayDate
.getMonth()
&& now.getFullYear() == dayDate
.getFullYear()) {
$(".today_icon").show();
} else {
$(".today_icon").hide();
}
},
loading : function(bool) {
if (bool)
$("#msgTopTipWrapper")
.show();
else
$("#msgTopTipWrapper")
.fadeOut();
}

});

});
//页面载入展示休和班的日期信息
function showHolidayDetail(){
<%List<Map<String, Object>> myHolidayList = (List<Map<String, Object>>) request.getAttribute("holidayList");
for (Map<String, Object> map : myHolidayList) {%>
var cdate = "<%=map.get("cdate")%>";
var state = "<%=map.get("state").toString()%>";
$(".fc-day")
.each(
function() {
//alert($(this).attr("data-date"));
if (cdate == $(this).attr("data-date")) {
//console.info($(this).children().find('.fc-day-content'));
if (state == 'ban') {
state = '<font class="redFont" style="font-weight: bold;background: #FFAB3D;color: #fff;padding: 5px;font-size: 16px;border-radius: 5px;">班</font>';
} else {
state = '<font class="redFont" style="font-weight: bold;background: #37ABEC;color: #fff;padding: 5px;font-size: 16px;border-radius: 5px;">休</font>';
}
//防止多次点击出现叠加问题，在叠加前进行清空
$(this).children().find('.fc-day-content')
.empty();
$(this).children().find('.fc-day-content')
.append(state);
}
});
<%}%>
}
//“返回今天”按钮绑定点击事件
function todayChange() {
showHolidays();
backgroundShow();
var dayDate = new Date();
$("td[data-date='" + myformatter(dayDate) + "']")
.not('.fc-other-month').css('backgroundColor', '#E0F4D7');
//      addIcon();

}
//添加 今天 图标
//  function addIcon(){
//      var img=new Image();
//      img.src="/plugins/fullcalendar/images/today_icon.jpg";
//      var icon = document.getElementById("fc-day-number");
//      icon.appendChild(img);
//  }
//开始初始化
function startInit() {
var startYear = $('#startYear').combobox('getValue');
if (startYear == "") {
showError("年份不能为空");
return;
}
var num = $('#num').combobox('getValue');
if (num == "") {
showError("范围不能为空");
return;
}
$("#win").window('close');
flag = false;
$("#fc-button-init").text("正在初始化...");
$.ajax({
url : ctx + '/system/initializeHoliday',
type : 'post',
data : {
'startYear' : startYear,
'num' : num
},
context : document.body,
success : function(data) {
$.messager.show({
title : '提示',
msg : '成功初始化' + data + '年节假日信息',
timeout : 3000,
showType : 'slide'
});
$("#fc-button-init").text("初始化");
flag = true;
},
error : function(e) {
showError('初始化失败！');
flag = true;
}
});
}

function closeWin() {
$("#win").window('close');
}

function showHolidays() {
$.ajax({
url : ctx + '/system/getFestival',
type : 'post',
context : document.body,
success : function(data) {
var holidays = JSON.parse(data);
for (var i = 0, len = holidays.length; i < len; i++) {
var cdate = holidays[i].cdate;
var state = holidays[i].state;

$(".fc-day")
.each(
function() {
if (cdate == $(this).attr(
"data-date")) {
if (state == 'ban') {
state = '<font class="redFont" style="font-weight: bold;background: #FFAB3D;color: #fff;padding: 5px;font-size: 16px;border-radius: 5px;">班</font>';
} else if (state == "xiu") {
state = '<font class="redFont" style="font-weight: bold;background: #37ABEC;color: #fff;padding: 5px;font-size: 16px;border-radius: 5px;">休</font>';
} else {
state = '';
}
//防止多次点击出现叠加问题，在叠加前进行清空
$(this).children().find(
'.fc-day-content')
.empty();
$(this).children().find(
'.fc-day-content')
.append(state);
}
});
}
},
error : function(e) {
showError('初始化失败');
}
});

var dayDate = new Date();

var d = $.fullCalendar.formatDate(dayDate, "dddd");
var m = $.fullCalendar.formatDate(dayDate, "yyyy年MM月dd日");
var m_install = $.fullCalendar.formatDate(dayDate, "MM/dd/yyyy");
var lunarDate = lunar(dayDate);
$(".alm_date").html(m + " " + d);
$(".today_date").html(dayDate.getDate());

$("#alm_cnD").html("农历" + lunarDate.lMonth + "月" + lunarDate.lDate);
$("#alm_cnY").html(
lunarDate.gzYear + "年 " + lunarDate.gzMonth + "月 "
+ lunarDate.gzDate + "日");
$("#alm_cnA").html("【" + lunarDate.animal + "年】");
var fes = lunarDate.festival();
if (fes.length > 0 && isRemote) {
$(".alm_lunar_date").html($.trim(lunarDate.festival()[0].desc));
$(".alm_lunar_date").show();
} else {
$(".alm_lunar_date").hide();
}
// 当天则显示“当天”标识
var now = new Date();
if (now.getDate() == dayDate.getDate()
&& now.getMonth() == dayDate.getMonth()
&& now.getFullYear() == dayDate.getFullYear()) {
$(".today_icon").show();
} else {
$(".today_icon").hide();
}
}
//“初始化”按钮点击事件
var flag = true;
function init() {
if (flag) {
$("#win").window('open');
var data, type;
data = [];
type = [];
for (i = 1901; i <= 2100; i++) {
data.push({
"text" : "" + i + "",
"id" : i
});
}
for (i = 5; i <= 30; i = i + 5) {
type.push({
"text" : "" + i + "",
"id" : i
});
}
$("#startYear").combobox("loadData", data);
$("#num").combobox("loadData", type);
var nowDate = new Date();
$('#startYear').combobox('select', nowDate.getFullYear());
$("#num").combobox("select", '5');
} else {
showError("正在初始化中，请勿重复点击！");
}
}

$(function() {
/** 绑定事件到日期下拉框 **/
$("#fc-dateSelect").delegate("select", "change", function() {
var fcsYear = $("#fcs_date_year").val();
var fcsMonth = $("#fcs_date_month").val();
$("#calendar").fullCalendar('gotoDate', fcsYear, fcsMonth);
showHolidays();
backgroundShow();
});
/** 绑定上一年，下一年,返回今天按钮 **/
$('.fc-button-today').bind('click', todayChange);
$('.fc-button-prev').bind('click', todayChange);
$('.fc-button-next').bind('click', todayChange);
$('.fc-button-prevYear').bind('click', todayChange);
$('.fc-button-nextYear').bind('click', todayChange);
});

/*初始化节假日数据*/
$(function() {
showHolidayDetail();
backgroundShow();
//添加初始化按钮
$('span.fc-button-today')
.after(
'<span>  </span><span id="fc-button-init" class="fc-button fc-button-add  fc-state-default fc-corner-left fc-corner-right" onclick="init();">初始化</span>');

});

/*对数据库中不存在的数据进行背景处理*/
function backgroundShow() {
$(".fc-day").each(
function() {
var cdate = $(this).attr("data-date");
$.ajax({
url : ctx + '/system/dayIsExist',
type : 'post',
async : false,
data : {
'cdate' : cdate
},
context : document.body,
success : function(data) {
if (data == "0") {
$("td[data-date='" + cdate + "']").not(
'.fc-other-month').css(
'backgroundColor', '#C9C9C9');
} else {
$("td[data-date='" + cdate + "']").not(
'.fc-other-month').css(
'backgroundColor', '#FFFFFF');
}
},
error : function(e) {
$("td[data-date='" + cdate + "']").not(
'.fc-other-month').css('backgroundColor',
'#FFFFFF');
}
});
});
}
$(function() {
var title = $('#title').val();
var dayType = $('#dayType').combobox('getValue');
var holidayBegtime = $('#holidayBegtime').datebox('getValue');
var holidayEndtime = $('#holidayEndtime').datebox('getValue');
if (title == "" && dayType == "" && holidayBegtime == ""
&& holidayEndtime == "") {
var nowDate = new Date();
$("td[data-date='" + myformatter(nowDate) + "']").not(
'.fc-other-month').css('backgroundColor', '#E0F4D7');
$('#holidayBegtime').datebox('setValue', myformatter(nowDate));
$('#holidayEndtime').datebox('setValue', myformatter(nowDate));
if (nowDate.getDay() == 0 || nowDate.getDay() == 6) {
$('#dayType').combobox('setValue', 1);
} else {
$('#dayType').combobox('setValue', 0);
}
}
});
//  function lostPort(){
//      alert("ok");
//  }
</script>
<style>
body {
margin-top: 40px;
text-align: center;
font-size: 14px;
font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
}

.dib {
display: inline-block;
}

.fr {
float: right;
}

.calendarWrapper {
width: 1190px;
margin: 0 auto 15px;
}

#calendar {
width: 885px;
background: #fff;
padding: 15px 10px;
}

.calendarWrapper .rightSidePanel {
width: 240px;
padding: 0px 15px;
}

.button {
width: 140px;
line-height: 30px;
text-align: center;
font-weight: bold;
color: #fff;
text-shadow: 1px 1px 1px #333;
border-radius: 5px;
margin: 10px 20px 20px 10px;
position: relative;
overflow: hidden;
}

.button:nth-child(6n) {
margin-right: 0;
}

.button.gray {
color: #8c96a0;
text-shadow: 1px 1px 1px #fff;
border: 1px solid #dce1e6;
box-shadow: 0 1px 2px #fff inset, 0 -1px 0 #a8abae inset;
background: -webkit-linear-gradient(top, #f2f3f7, #e4e8ec);
background: -moz-linear-gradient(top, #f2f3f7, #e4e8ec);
background: linear-gradient(top, #f2f3f7, #e4e8ec);
}
</style>
</html>

controller层

@Controller
@RequestMapping("system/")
public class HolidayManagementController
{

@Inject
@Named(IHolidayManagementService.SERVICE_BEAN_NAME)
private IHolidayManagementService holidayManagementService;

@Inject
@Named(IHolidayService.SERVICE_NAME)
private IHolidayService holidayService;

@RequestMapping("/holidayManagement")
@ResponseBody
public ModelAndView holidayManagement()
{
List<Map<String, Object>> holidayList = holidayManagementService
.getHolidays("1901-01-01", "2100-12-31");
ModelAndView modelAndView = new ModelAndView();
modelAndView.addObject("holidayList", holidayList);
modelAndView.setViewName("system/HolidayManagement");
return modelAndView;
}

@RequestMapping("/listWorkHourByWeek")
@ResponseBody
public Object listWorkHourByWeek(PageQueryData<WorkHourByWeek> pageQueryData)
{
List<WorkHourByWeek> workHourByWeeks = holidayService.getWorkHourByWeeks();
pageQueryData.setQueryList(workHourByWeeks);
return pageQueryData.getResult();
}

@RequestMapping("/saveHolidayManagement")
@ResponseBody
public String saveHolidayManagement(String title, String dayType,
String holidayBegtime, String holidayEndtime)
{
List<Map<String, Object>> holidayList = holidayManagementService
.saveHolidayManagement(title, dayType, holidayBegtime, holidayEndtime);
return JsonUtil.toJsonString(holidayList);
}

@RequestMapping("/deleteHolidayManagement")
@ResponseBody
public String deleteHolidayManagement(String title, String dayType,
String holidayBegtime, String holidayEndtime)
{
List<Map<String, Object>> holidayList = holidayManagementService
.deleteHolidayManagement(title, dayType, holidayBegtime,
holidayEndtime);
return JsonUtil.toJsonString(holidayList);
}

@ResponseBody
@RequestMapping("/getFestival")
public String getFestival(HttpServletRequest request)
{
List<Map<String, Object>> holidayList = holidayManagementService
.getHolidays("1901-01-01", "2100-12-31");
String jsonString = JsonUtil.toJsonString(holidayList);
return jsonString;
}

@RequestMapping("/initializeHoliday")
@ResponseBody
public String initializeHoliday(int startYear, int num)
{
holidayService.initializeHoliday(startYear, num);
return num + "";
}

@RequestMapping(value = "/getDayDetail", produces = {
"application/text;charset=UTF-8"})
@ResponseBody
public String getDayDetail(String date)
{
List<Map<String, Object>> dayDetail = holidayManagementService
.getDayDetail(date);
return JsonUtil.toJsonString(dayDetail);
}

@RequestMapping("/dayIsExist")
@ResponseBody
public String dayIsExist(String cdate)
{
boolean dayIsExist = holidayManagementService.dayIsExist(cdate);
return dayIsExist == true ? "1" : "0";
}
}

service层

@Service(IHolidayManagementService.SERVICE_BEAN_NAME)
@Transactional
public class HolidayManagementService implements IHolidayManagementService
{
@Inject
@Named(IHolidayService.SERVICE_NAME)
private IHolidayService mHolidayService;

/**
* {@inheritDoc}
*/
@Override
public List<Map<String, Object>> saveHolidayManagement(String title,
String dayType, String holidayBegtime, String holidayEndtime)
{
Map<String, Object> holidayMap = null;
List<Map<String, Object>> holidayList = new ArrayList<>();

List<HolidayDefinition> holidayDefinitions = new ArrayList<HolidayDefinition>();
Calendar c = Calendar.getInstance();
Date begTime = formateToDate(holidayBegtime);
Date endTime = formateToDate(holidayEndtime);
HolidayDefinition definition = null;
if (begTime != null && endTime != null)
{
int days = (int)((endTime.getTime() - begTime.getTime())
/ (1000 * 3600 * 24)) + 1;

c.setTime(begTime);
int day = c.get(Calendar.DATE);

for(int i = 0; i < days; i++)
{
definition = new HolidayDefinition();
c.set(Calendar.DATE, day + i);

String dayAfter = formaateToString(c.getTime());
definition.setYearDay(dayAfter);

if (dayType.equals("0") && !isWeekend(dayAfter))
{
holidayMap = new HashMap<>();
definition.setDayType(0);
definition.setDayDescribe("正常上班时间");
holidayMap.put("cdate", dayAfter);
holidayMap.put("state", "");
}
else if (dayType.equals("1") && isWeekend(dayAfter))
{
holidayMap = new HashMap<>();
definition.setDayType(1);
definition.setDayDescribe("周末");
holidayMap.put("cdate", dayAfter);
holidayMap.put("state", "");
}
else if (dayType.equals("0") && isWeekend(dayAfter))
{
holidayMap = new HashMap<>();
definition.setDayType(0);
definition.setDayDescribe(title);
holidayMap.put("cdate", dayAfter);
holidayMap.put("state", "ban");
}
else
{
holidayMap = new HashMap<>();
definition.setDayType(1);
definition.setDayDescribe(title);
holidayMap.put("cdate", dayAfter);
holidayMap.put("state", "xiu");
}
holidayList.add(holidayMap);
holidayDefinitions.add(definition);
}
mHolidayService.updateHoliday(holidayDefinitions);
}
return holidayList;
}

/**
* {@inheritDoc}
*/
@Override
public List<Map<String, Object>> deleteHolidayManagement(String title,
String dayType, String holidayBegtime, String holidayEndtime)
{
Map<String, Object> holidayMap = null;
List<Map<String, Object>> holidayList = new ArrayList<>();

List<HolidayDefinition> holidayDefinitions = new ArrayList<HolidayDefinition>();
Calendar c = Calendar.getInstance();
Date begTime = formateToDate(holidayBegtime);
Date endTime = formateToDate(holidayEndtime);
HolidayDefinition definition = null;
if (begTime != null && endTime != null)
{
int days = (int)((endTime.getTime() - begTime.getTime())
/ (1000 * 3600 * 24)) + 1;

c.setTime(begTime);
int day = c.get(Calendar.DATE);

for(int i = 0; i < days; i++)
{
definition = new HolidayDefinition();
c.set(Calendar.DATE, day + i);

String dayAfter = formaateToString(c.getTime());
definition.setYearDay(dayAfter);

if (isWeekend(dayAfter))
{
holidayMap = new HashMap<>();
definition.setDayType(1);
definition.setDayDescribe("周末");
holidayMap.put("cdate", dayAfter);
holidayMap.put("state", "");
}
else if (!isWeekend(dayAfter))
{
holidayMap = new HashMap<>();
definition.setDayType(0);
definition.setDayDescribe("正常上班时间");
holidayMap.put("cdate", dayAfter);
holidayMap.put("state", "");
}
holidayList.add(holidayMap);
holidayDefinitions.add(definition);
}
mHolidayService.updateHoliday(holidayDefinitions);
}
return holidayList;
}

/**
* {@inheritDoc}
*/
@Override
public List<Map<String, Object>> getHolidays(String stDate, String enDate)
{
Map<String, Object> holidayMap;
List<Map<String, Object>> holidayList = new ArrayList<>();
List<HolidayDefinition> holidays = mHolidayService
.getHoliday(formateToDate(stDate), formateToDate(enDate));

for(HolidayDefinition holidayDefinition : holidays)
{
if (holidayDefinition.getDayType() == 1
&& !holidayDefinition.getDayDescribe().equals("周末"))
{
holidayMap = new HashMap<>();
holidayMap.put("cdate", holidayDefinition.getYearDay());
holidayMap.put("state", "xiu");
holidayMap.put("title", holidayDefinition.getDayDescribe());
holidayList.add(holidayMap);
}
else if (holidayDefinition.getDayType() == 0
&& !holidayDefinition.getDayDescribe().equals("正常上班时间"))
{
holidayMap = new HashMap<>();
holidayMap.put("cdate", holidayDefinition.getYearDay());
holidayMap.put("state", "ban");
holidayMap.put("title", holidayDefinition.getDayDescribe());
holidayList.add(holidayMap);
}
}
return holidayList;
}

/**
* {@inheritDoc}
*/
@Override
public void initializeHoliday(int year, int howYear)
{
mHolidayService.initializeHoliday(year, howYear);
}

private Date returnDay = null;

/**
* {@inheritDoc}
*/
@Override
public List<Map<String, Object>> getDayDetail(String date)
{
List<HolidayDefinition> holidays = mHolidayService
.getHoliday(formateToDate(date), formateToDate(date));
HolidayDefinition curDayDetail = holidays.get(0);
Map<String, Object> holidayMap = null;
List<Map<String, Object>> holidayList = new ArrayList<>();
if (curDayDetail.getDayType() == 1
&& !curDayDetail.getDayDescribe().equals("周末"))
{
holidayMap = new HashMap<>();
getHolidayArea(formateToDate(curDayDetail.getYearDay()),
curDayDetail.getDayDescribe(), true);
holidayMap.put("cdate", formaateToString(returnDay));
getHolidayArea(formateToDate(curDayDetail.getYearDay()),
curDayDetail.getDayDescribe(), false);
holidayMap.put("enddate", formaateToString(returnDay));
holidayMap.put("state", "xiu");
holidayMap.put("type", curDayDetail.getDayType());
holidayMap.put("title", curDayDetail.getDayDescribe());
holidayList.add(holidayMap);
}
else if (curDayDetail.getDayType() == 0
&& !curDayDetail.getDayDescribe().equals("正常上班时间"))
{
holidayMap = new HashMap<>();
getHolidayArea(formateToDate(curDayDetail.getYearDay()),
curDayDetail.getDayDescribe(), true);
holidayMap.put("cdate", formaateToString(returnDay));
getHolidayArea(formateToDate(curDayDetail.getYearDay()),
curDayDetail.getDayDescribe(), false);
holidayMap.put("enddate", formaateToString(returnDay));
holidayMap.put("state", "ban");
holidayMap.put("type", curDayDetail.getDayType());
holidayMap.put("title", curDayDetail.getDayDescribe());
holidayList.add(holidayMap);
}
else
{
holidayMap = new HashMap<>();
holidayMap.put("cdate", curDayDetail.getYearDay());
holidayMap.put("enddate", curDayDetail.getYearDay());
holidayMap.put("type", curDayDetail.getDayType());
holidayList.add(holidayMap);
}
return holidayList;
}

/**
* {@inheritDoc}
*/
@Override
public boolean dayIsExist(String cdate)
{
List<HolidayDefinition> holiday = mHolidayService
.getHoliday(formateToDate(cdate), formateToDate(cdate));
if (holiday.isEmpty())
{
return false;
}
return true;
}

/**
* 将String类型的日期转换成Date类型的日期
*
* @param dateString
*          String类型日期（2017-01-01）
* @return Date类型的日期
*/
private Date formateToDate(String dateString)
{
Date date = null;
try
{
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
date = sdf.parse(dateString);
}
catch(ParseException e)
{
e.printStackTrace();
}
return date;
}

/**
* 将Date类型的日期转换成String类型的日期
*
* @param date
*          Date类型的日期
* @return String类型日期（2017-01-01）
*
*/
private String formaateToString(Date date)
{
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
return sdf.format(date);
}

/**
* 判断日期是否是周末
*
* @param dateStr
*          字符串日期
* @return
*/
private boolean isWeekend(String dateStr)
{
Date date = formateToDate(dateStr);
Calendar cal = Calendar.getInstance();
cal.setTime(date);
if (cal.get(Calendar.DAY_OF_WEEK) == Calendar.SATURDAY
|| cal.get(Calendar.DAY_OF_WEEK) == Calendar.SUNDAY)
{
return true;
}
return false;
}

/**
* 递归查询节假日范围
*
* @param curDay
*          当前日期
* @param curDayDescribe
*          日期描述
* @param type
*          true:向前查找；false:向后查找。
*
* @return
*/
private void getHolidayArea(Date curDay, String curDayDescribe, boolean type)
{
Calendar calendar = Calendar.getInstance();
List<HolidayDefinition> holidays = null;
// 把当前时间赋给日历
calendar.setTime(curDay);
if (type)
{
holidays = mHolidayService.getHoliday(curDay, curDay);
String dayDescribe = holidays.get(0).getDayDescribe();
if (dayDescribe.equals(curDayDescribe))
{
calendar.setTime(curDay);
calendar.add(Calendar.DATE, -1);
curDay = calendar.getTime();
getHolidayArea(curDay, curDayDescribe, true);
}
else
{
calendar.setTime(curDay);
calendar.add(Calendar.DATE, 1);
returnDay = calendar.getTime();
}
}
else
{
holidays = mHolidayService.getHoliday(curDay, curDay);
String dayDescribe = holidays.get(0).getDayDescribe();
if (dayDescribe.equals(curDayDescribe))
{
calendar.setTime(curDay);
calendar.add(Calendar.DATE, 1);
curDay = calendar.getTime();
getHolidayArea(curDay, curDayDescribe, false);
}
else
{
calendar.setTime(curDay);
calendar.add(Calendar.DATE, -1);
returnDay = calendar.getTime();
}
}
}
}

其他相关文件下载地址：http://download.csdn.net/detail/u014656173/9800388

修改日期单元格背景的颜色

修改当前显示页面日期单元格的颜色

//修改当前月（不包括其他月）所有星期六的背景

$('.fc-day.fc-sat').not('.fc-other-month').css('backgroundColor','#bce8f1');

//修改当前月（不包括其他月）所有星期日的背景$('.fc-day.fc-sun').not('.fc-other-month').css('backgroundColor','#bce8f1');

//修改当前月所有日期的背景

$('.fc-day').css('backgroundColor','#CCCCCC');

//修改指定日期的单元格背景 cdate日期（例如2017-02-03）

$("td[data-date='"+cdate+"']").css('backgroundColor','#c4e1ff');

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 日历改造

相关文章推荐

新的分享

章节导航