实例介绍
【实例截图】
【核心代码】
Simple-Calendar开发文档
引入资源
使用日历插件前首先要引用资源：JS CSS
<link rel="stylesheet" type="text/css" href="css/simple-calendar.css"> <script type="text/javascript" src="js/simple-calendar.js"></script>
初始化一个日历
首先为calendar准备一个容器，可以设置大小，也可以在options中设置，不设置的话自动设为默认
<div id='container'></div>
<script> var myCalendar = new SimpleCalendar('#container'); </script>
这样一个日历就诞生了 ^-^
配置项说明
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',
}
}
国际化
language： 语言的话目前只支持中文和英文，分别对应'CH','EN'
如果想要加更多的语言或者更改现在的显示，可以直接更改languageData内容
节日显示配置
showLunarCalendar: true, //是否显示阴历日期 showHoliday: true, //是否显示休假休假 showFestival: true, //是否显示国际节日 showLunarFestival: true, //是否显示农历节日 showSolarTerm: true, //是否显示节气 showMark: true, //是否显示标记日期
时间范围
这个时间范围设置的是下拉框中的年数范围
timeRange: {
startYear: 1900,
endYear: 2049 }
标记日期
标记日期配置只有在 showMark 为 true 时才会生效
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',
}
主题配置只有在changeAble 为 true 时才会生效 weeks 设置的是星期一栏的主题，分别对应背景颜色，字体颜色，字体大小 days 设置的是日期的主题，参数同上 todaycolor 设置的是当天的日期背景颜色 activeSelectColor 设置的是鼠标滑过事件对应日期的边框颜色
事件接口说明
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)
调整日历大小，会自动根据大小调整对应的样式
addMark(day, info)
day 是一个可以确定一个日期的字符串 info 是要显示的信息
setLenguage(languageStr)
设置语言，目前支持的语言有'CH','EN' 如果想要增加语言，请在languageData中修改
其他
//关闭或者显示国际节日 showFestival(false); //关闭或者显示阴历日期 showLunarCalendar(false); //关闭或者显示假期 showHoliday(false); //关闭或者显示二十四节气 showSolarTerm(false); //关闭或者显示阴历节日 showLunarFestival(false); //关闭或者显示标记 showMark(false)
标签： js
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论