fullcalendar 日历改造

最新推荐文章于 2025-03-13 13:27:38 发布
泡泡菜叶
最新推荐文章于 2025-03-13 13:27:38 发布
阅读量2.1k
点赞数
分类专栏： java开发文章标签：日历改造
本文链接：https://blog.youkuaiyun.com/u014656173/article/details/68927122
版权
本文档详细介绍了如何改造fullcalendar日历，包括jsp页面、controller层、service层的改造，并提供了相关资源下载链接。重点讨论了如何修改当前显示日期单元格的背景颜色。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
参考：
1：http://feifei.im/archives/168
2：blog.youkuaiyun.com/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;">&nbsp;年</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) {
最低0.47元/天解锁文章