插件描述:多功能日历插件SimpleCalendar,带农历、节假日。
配置项说明
varoptions={
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)