jquery日曆外掛SimpleCalendar
外掛描述:多功能日曆外掛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)
相關文章
- 日曆外掛
- javascript日曆外掛JavaScript
- 給開發者準備的 10 款最好的 jQuery 日曆外掛jQuery
- 8個基於jQuery和HTML5的日曆時鐘外掛jQueryHTML
- angular日曆外掛---- angular-daterangepickerAngular
- 移動端仿ios日曆外掛iOS
- 原生js日曆選擇器,學習js物件導向開發日曆外掛JS物件
- 「jQuery外掛開發日記」(二)高階外掛理念 – [翻譯]jQuery
- jQuery外掛jQuery
- 前端學習02:jQuery 日曆前端jQuery
- jquery 外掛站jQuery
- PC端時間日曆外掛 功能齊全 無依賴
- 點選日曆顯示日期jqueryjQuery
- JQuery模板外掛-jquery.tmpljQuery
- 12款優秀的JavaScript日曆和時間選擇外掛JavaScript
- jQuery的外掛列表jQuery
- JQuery蜂巢圖外掛jQuery
- jQuery外掛推薦jQuery
- jquery分頁外掛jQuery
- jquery外掛寫法jQuery
- jQuery表單外掛jQuery.formjQueryORM
- jQuery擴充套件外掛jQuery套件
- jQuery外掛擴充套件jQuery套件
- jQuery外掛開發模式jQuery模式
- jquery--uploadify 外掛jQuery
- 240個jquery外掛(轉)jQuery
- jQuery layout 外掛屬性jQuery
- 200個jquery外掛jQuery
- 常用jquery外掛資料jQuery
- jquery外掛開發方法jQuery
- jquery外掛合集之分頁外掛[表單和表格]jQuery
- 不定義 jQuery 外掛,不要說會 jQueryjQuery
- 使用jquery製作日曆(生日)選擇器jQuery
- 前端外掛一:jQuery Multi-Select多選外掛前端jQuery
- 精心挑選12款優秀的 JavaScript 日曆和時間選擇外掛JavaScript
- jQuery右鍵選單外掛jQuery ContextMenujQueryContext
- jQuery外掛--表格隔行變色jQuery
- jquery複習之路---常用外掛jQuery