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

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

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

fullcalendar v5.3.2 日历插件+LayerUi弹窗，实现自定义HTML表格
fullcalendar官网:https://fullcalendar.io/ 插件下载地址(v5.3.2版本):https://github.com/fullcalendar/fullcalenda ...
php日期控件calendar.js,轻量级的原生js日历插件calendar.js使用指南
使用说明: 需要引入插件calendar.js/calendar.min.js 须要引入calendar.css 样式表,可以自定义自己想要的皮肤本日历插件支持cmd模块化如下调用:xvDate( ...
js日历（包含农历节假日）
原始地址vue封装了个日历组件(包含农历,节日)_m0_49159526的博客-CSDN博客_vue日历插件显示节日的实现样式层级 index.vue <!--* @Description: ...
超好用的js 日历插件日期插件日期日历选择控件
前情提要: 主要是目前项目较小,仅需要一个日历插件,就没有选择引用UI框架,单纯找了一个日历插件,外观相对简单大方,还不错,而且只需要2步就可以完成引入: 第一步(有2种方式引入,支持单独引入文件及n ...
js日历插件中文、英文日历
日历插件来源网站:http://www.cnblogs.com/yank/archive/2008/08/14/1267746.html 六款英文日历 http://www.bobd.cn/desi ...
android 24节气及节日,Android Tasker应用之农历节气和自定义节日小插件 | 树叶的BLOG...
Android平台上虽然支持农历的插件不少,但找来找去都没找到满意的,最终还是决定用Tasker和Minimalistic Text自己做一个,效果似乎不错,如图: lunar widget 主要功能 ...
JS日历插件 - My97 DatePicker
文章整理之My97 DatePicker官网,使用版本为4.8 Beta4. My97DatePicker基本用法 1. My97DatePicker是一款非常灵活好用的日期控件.使用非常简单. 1. ...
两款超好用js日历插件（fullcalendar和zabuto_calendar）
这两款插件特别类似,其实用其中一款即可. 先展示一下我用这两款插件制作的排班系统这个是fullcalendar插件制作的排班页面,左边新建一系列组和组员,可以将人员直接拖拽至右边的日历上,不同组以颜 ...
zx-calendar JS日历插件（带Vue2/Vue3/React版本）
zx-calendar, zx-vue-calendar (Vue2.x.x and Vue3.x.x), zx-react-calendar 源码文档地址:https://github.com/ca ...

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

修改说明

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

最新文章

热门文章

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

修改说明

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

最新文章

热门文章

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

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