插件描述：多功能日历插件SimpleCalendar，带农历、节假日。
更新时间：2019-07-30 16:36:32
更新说明：修复显示undefined
Simple-Calendar作用方法
引入资源
使用日历插件前首先要引用资源：JS CSS
1 2 | <link rel="stylesheet" type="text/css" href="css/simple-calendar.css"><script type="text/jacascrip" src="js/simple-calendar.js"></script> |
初始化一个日历
首先为calendar准备一个容器，可以设置大小，也可以在options中设置，不设置的话自动设为默认
1 2 3 4 | <div id='container'></div><script> var myCalendar = new SimpleCalendar('#container');</script> |
这样一个日历就诞生了 ^-^
配置项说明
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | var options = { width: '500px', height: '500px', language: 'CH', //语言 showLunarCalendar: true, //阴历 showHoliday: true, //休假 showFestival: true, //节日 showLunarFestival: true, //农历节日 showSolarTerm: true, //节气 showMark: true, //标记 timeRange: { startYear: 1900, endYear: 2049 }, mark: { '2016-5-5': '上学' }, theme: { changeAble: false, weeks: { backgroundColor: '#FBEC9C', fontColor: '#4A4A4A', fontSize: '20px', }, days: { backgroundColor: '#ffffff', fontColor: '#565555', fontSize: '24px' }, todaycolor: 'orange', activeSelectColor: 'orange', } } |
国际化
1 | language： 语言的话目前只支持中文和英文，分别对应'CH','EN' |
如果想要加更多的语言或者更改现在的显示，可以直接更改languageData内容
节日显示配置
1 2 3 4 5 6 | showLunarCalendar: true, //是否显示阴历日期showHoliday: true, //是否显示休假休假showFestival: true, //是否显示国际节日showLunarFestival: true, //是否显示农历节日showSolarTerm: true, //是否显示节气showMark: true, //是否显示标记日期 |
时间范围
这个时间范围设置的是下拉框中的年数范围
1 2 3 4 | timeRange: { startYear: 1900, endYear: 2049} |
标记日期
标记日期配置只有在 showMark 为 true 时才会生效
1 2 3 | mark: { '2016-5-5': '上学' } |
这样就会在日历的对应日期上面添加标记，当鼠标停留时显示输入的信息
主题配置
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | theme: { changeAble: false, weeks: { backgroundColor: '#FBEC9C', fontColor: '#4A4A4A', fontSize: '20px', }, days: { backgroundColor: '#ffffff', fontColor: '#565555', fontSize: '24px' }, todaycolor: 'orange', activeSelectColor: 'orange', } |
主题配置只有在changeAble 为 true 时才会生效 weeks 设置的是星期一栏的主题，分别对应背景颜色，字体颜色，字体大小 days 设置的是日期的主题，参数同上 todaycolor 设置的是当天的日期背景颜色 activeSelectColor 设置的是鼠标滑过事件对应日期的边框颜色
事件接口说明
1 2 3 4 5 6 7 8 9 10 | myCalendar.updateSize('500px', '500px');myCalendar.addMark('2016-3-7', 'test');myCalendar.setLanguage('EN')myCalendar.showFestival(false);myCalendar.showLunarCalendar(false);myCalendar.showHoliday(false);myCalendar.showSolarTerm(false);myCalendar.showLunarFestival(false);myCalendar.showMark(false);updateSize(width,height) |
调整日历大小，会自动根据大小调整对应的样式
1 | addMark(day, info) |
day 是一个可以确定一个日期的字符串 info 是要显示的信息
1 | setLenguage(languageStr) |
设置语言，目前支持的语言有'CH','EN' 如果想要增加语言，请在languageData中修改
其他
1 2 3 4 5 6 7 8 9 10 11 12 | //关闭或者显示国际节日showFestival(false); //关闭或者显示阴历日期showLunarCalendar(false);//关闭或者显示假期showHoliday(false);//关闭或者显示二十四节气showSolarTerm(false);//关闭或者显示阴历节日showLunarFestival(false);//关闭或者显示标记showMark(false) |
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： jQuery瀑布流_加载更多_随窗口改变
- 下一个特效： SVG路径动画效果插件Vivus