jquery日曆外掛SimpleCalendar

weixin_34116110發表於2017-01-24

外掛描述:多功能日曆外掛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)

相關文章