JS 日历插件实现农历、节气可自定义加班和休假

最新推荐文章于 2024-05-13 16:45:04 发布

左手121

最新推荐文章于 2024-05-13 16:45:04 发布

阅读量8.1k

点赞数 7

分类专栏： js-Jquery 文章标签： js 日历

本文链接：https://blog.csdn.net/qq_20282263/article/details/52790727

版权

js-Jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近因为项目需求，模仿别人的界面做了一个日历插件。代码有些地方可能写的不好，但功能都实现了。显示对应的农历、节气、天干地支年月日。并支持自定义加班和休假日期。可在IE8(包括)以上浏览器使用(低于IE8的没有测试过)。
以下是展示：

html：引入calendar.css和calendar.js，需要JQuery的支持

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="calendar.css" rel="stylesheet" />
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div id="calendar">
        </div>
    </form>
    <script src="jquery-1.8.3.min.js" type="text/javascript"></script>
    <script src="calendar.js" type="text/javascript"></script>
    <script src="index.js" type="text/javascript"></script>
</body>
</html>

js：里边的参数都有默认值。可选则传入

$(function() {
    $("#calendar").calendar({
        /*
         * 传入今天的时间
         * 默认：客户端时间
         * 可传入一个服务器的时间
         */
        date: new Date(),
        width: 800,
        height: 400,
        /* 左右框显示的比例 */
        rate: 0.7,
        /*
         * 休假和加班设置
         * JSON格式：Y加年-M加月-D加日
         * 0表示休假 1表示加吧
         */
        configDay: {
            "Y2016": {
                "M10": {
                    "D1": 0,
                    "D2": 0,
                    "D3": 0,
                    "D4": 1,
                    "D5": 1
                }
            }
        }
    });
});

这里写图片描述

修改说明

如何获取到本月最新的配置,代码中有注释：

    // 保存和重置按钮
    function getPushClick(Y, M) {
        $(".resetData").click(function () {
            $(".xbgj").remove();
            // 本月的设置清空
            configDayM = {};
        });
        $(".saveChange").click(function () {
            var html = "";
            // 将本月的设置configDayM添加到总的日期设置中configDay
            if (configDay["Y" + Y]) {
                configDay["Y" + Y]["M" + M] = $.extend(true, {}, configDayM);
            }
            else {
                configDay["Y" + Y] = {};
                configDay["Y" + Y]["M" + M] = $.extend(true, {}, configDayM);
            }
            /*
            * 在这里添加代码，用于保存本月的设置 configDayM
            */
        });
    }

CSS修改：可通过传入参数改变日历的大小。但是字体大小可能就不太适应了，通过调整CSS中的字体大小修改。其他一些的修改自己看代码都有注释。

程序地址：https://github.com/ZangYuSong/calendar

左手121

关注

7
点赞
踩
19

收藏

觉得还不错? 一键收藏
2
评论
JS 日历插件实现农历、节气可自定义加班和休假

最近因为项目需求，模仿别人的界面做了一个日历插件。代码有些地方可能写的不好，但功能都实现了。显示对应的农历、节气、天干地支年月日。并支持自定义加班和休假日期。可在IE8(包括)以上浏览器使用(低于IE8的没有测试过)。以下是展示：html：引入calendar.css和calendar.js，需要JQuery的支持html xmlns="http://www.w3.org/199
复制链接

扫一扫