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

来源：互联网发布：淘宝联盟登不了怎么办编辑：程序博客网时间：2024/05/16 13:48

最近因为项目需求，模仿别人的界面做了一个日历插件。代码有些地方可能写的不好，但功能都实现了。显示对应的农历、节气、天干地支年月日。并支持自定义加班和休假日期。可在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

0 0

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

修改说明

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