Simple-Calendar作用方法

引入資源

使用日歷插件前首先要引用資源：JS CSS

<link rel="stylesheet" type="text/css" href="css/simple-calendar.css">
<script type="text/jacascrip" src="js/simple-calendar.js"></script>

初始化一個(gè)日歷

首先為calendar準(zhǔn)備一個(gè)容器，可以設(shè)置大小，也可以在options中設(shè)置，不設(shè)置的話自動(dòng)設(shè)為默認(rèn)

<div id='container'></div>
<script>
    var myCalendar = new SimpleCalendar('#container');
</script>

這樣一個(gè)日歷就誕生了 ^-^

配置項(xiàng)說(shuō)明

var options = {
      width: '500px',
      height: '500px',
      language: 'CH', //語(yǔ)言
      showLunarCalendar: true, //陰歷
      showHoliday: true, //休假
      showFestival: true, //節(jié)日
      showLunarFestival: true, //農(nóng)歷節(jié)日
      showSolarTerm: true, //節(jié)氣
      showMark: true, //標(biāo)記
      timeRange: {
        startYear: 1900,
        endYear: 2049
      },
      mark: {
        '2016-5-5': '上學(xué)'
      },
      theme: {
        changeAble: false,
        weeks: {
          backgroundColor: '#FBEC9C',
          fontColor: '#4A4A4A',
          fontSize: '20px',
        },
        days: {
          backgroundColor: '#ffffff',
          fontColor: '#565555',
          fontSize: '24px'
        },
        todaycolor: 'orange',
        activeSelectColor: 'orange',
      }
    }

國(guó)際化

language： 語(yǔ)言的話目前只支持中文和英文，分別對(duì)應(yīng)'CH','EN'

如果想要加更多的語(yǔ)言或者更改現(xiàn)在的顯示，可以直接更改languageData內(nèi)容

節(jié)日顯示配置

showLunarCalendar: true, //是否顯示陰歷日期
showHoliday: true,       //是否顯示休假休假
showFestival: true,      //是否顯示國(guó)際節(jié)日
showLunarFestival: true, //是否顯示農(nóng)歷節(jié)日
showSolarTerm: true,     //是否顯示節(jié)氣
showMark: true,          //是否顯示標(biāo)記日期

時(shí)間范圍

這個(gè)時(shí)間范圍設(shè)置的是下拉框中的年數(shù)范圍

timeRange: {
    startYear: 1900,
    endYear: 2049
}

標(biāo)記日期

標(biāo)記日期配置只有在 showMark 為 true 時(shí)才會(huì)生效

mark: {
        '2016-5-5': '上學(xué)'
    }

這樣就會(huì)在日歷的對(duì)應(yīng)日期上面添加標(biāo)記，當(dāng)鼠標(biāo)停留時(shí)顯示輸入的信息

主題配置

theme: {
    changeAble: false,
    weeks: {
        backgroundColor: '#FBEC9C',
        fontColor: '#4A4A4A',
        fontSize: '20px',
    },
    days: {
        backgroundColor: '#ffffff',
        fontColor: '#565555',
        fontSize: '24px'
    },
    todaycolor: 'orange',
    activeSelectColor: 'orange',
   
}

主題配置只有在changeAble 為 true 時(shí)才會(huì)生效 weeks 設(shè)置的是星期一欄的主題，分別對(duì)應(yīng)背景顏色，字體顏色，字體大小 days 設(shè)置的是日期的主題，參數(shù)同上 todaycolor 設(shè)置的是當(dāng)天的日期背景顏色 activeSelectColor 設(shè)置的是鼠標(biāo)滑過(guò)事件對(duì)應(yīng)日期的邊框顏色

事件接口說(shuō)明

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)

調(diào)整日歷大小，會(huì)自動(dòng)根據(jù)大小調(diào)整對(duì)應(yīng)的樣式

addMark(day, info)

day 是一個(gè)可以確定一個(gè)日期的字符串 info 是要顯示的信息

setLenguage(languageStr)

設(shè)置語(yǔ)言，目前支持的語(yǔ)言有'CH','EN' 如果想要增加語(yǔ)言，請(qǐng)?jiān)趌anguageData中修改

其他

//關(guān)閉或者顯示國(guó)際節(jié)日
showFestival(false); 
//關(guān)閉或者顯示陰歷日期
showLunarCalendar(false);
//關(guān)閉或者顯示假期
showHoliday(false);
//關(guān)閉或者顯示二十四節(jié)氣
showSolarTerm(false);
//關(guān)閉或者顯示陰歷節(jié)日
showLunarFestival(false);
//關(guān)閉或者顯示標(biāo)記
showMark(false)