├── README.md
├── images
    ├── body-bg.jpg
    ├── download-button.png
    ├── github-button.png
    ├── header-bg.jpg
    ├── highlight-bg.jpg
    └── sidebar-bg.jpg
├── index.html
├── javascripts
    ├── main.js
    ├── simple-calendar-es6.js
    └── simple-calendar.js
├── params.json
└── stylesheets
    ├── print.css
    ├── simple-calendar.css
    └── stylesheet.css


/README.md:
--------------------------------------------------------------------------------
  1 | 
  2 | # Simple-Calendar开发文档 [示例](https://lixucheng.github.io/Simple-Calendar)
  3 | 
  4 | 
  5 | ---
  6 | ##获取Simple-Calendar
  7 | 从GitHub上下载 [链接](https://github.com/Lixucheng/Simple-Calendar)
  8 | 
  9 | ##引入资源
 10 | 
 11 | 使用日历插件前首先要引用资源：JS CSS
 12 | ```javascript
 13 | <link rel="stylesheet" type="text/css" href="css/simple-calendar.css">
 14 | 
 15 | <script type="text/jacascrip" src="js/simple-calendar.js"></script>
 16 | ```
 17 | 
 18 | ##初始化一个日历
 19 | 
 20 | 首先为calendar准备一个容器，可以设置大小，也可以在options中设置，不设置的话自动设为默认
 21 | ```html
 22 |   <div id='container'></div>
 23 | ```
 24 | ```html
 25 |   <script>
 26 |     var myCalendar = new SimpleCalendar('#container');
 27 |   </script>
 28 | ```
 29 | 这样一个日历就诞生了 ^-^
 30 | 
 31 | ##配置项说明
 32 | ```javascript
 33 | var options = {
 34 |       width: '500px',
 35 |       height: '500px',
 36 |       language: 'CH', //语言
 37 |       showLunarCalendar: true, //阴历
 38 |       showHoliday: true, //休假
 39 |       showFestival: true, //节日
 40 |       showLunarFestival: true, //农历节日
 41 |       showSolarTerm: true, //节气
 42 |       showMark: true, //标记
 43 |       //获取点击的日期
 44 |       onSelect: (day) => {
 45 |         console.log(day);
 46 |       },
 47 |       timeRange: {
 48 |         startYear: 1900,
 49 |         endYear: 2049
 50 |       },
 51 |       mark: {
 52 |         '2016-5-5': '上学'
 53 |       },
 54 |       theme: {
 55 |         changeAble: false,
 56 |         weeks: {
 57 |           backgroundColor: '#FBEC9C',
 58 |           fontColor: '#4A4A4A',
 59 |           fontSize: '20px',
 60 |         },
 61 |         days: {
 62 |           backgroundColor: '#ffffff',
 63 |           fontColor: '#565555',
 64 |           fontSize: '24px'
 65 |         },
 66 |         todaycolor: 'orange',
 67 |         activeSelectColor: 'orange',
 68 |       }
 69 |     }
 70 | ```
 71 | ### 国际化
 72 | > language：
 73 | 语言的话目前只支持中文和英文，分别对应'CH','EN'
 74 | 
 75 | 如果想要加更多的语言或者更改现在的显示，可以直接更改languageData内容
 76 | 
 77 | ### 节日显示配置
 78 | ```javascript
 79 | showLunarCalendar: true, //是否显示阴历日期
 80 | showHoliday: true,       //是否显示休假休假
 81 | showFestival: true,      //是否显示国际节日
 82 | showLunarFestival: true, //是否显示农历节日
 83 | showSolarTerm: true,     //是否显示节气
 84 | showMark: true,          //是否显示标记日期
 85 | 
 86 | ```
 87 | 
 88 | ### 时间范围
 89 | 这个时间范围设置的是下拉框中的年数范围
 90 | ```javascript
 91 | timeRange: {
 92 |     startYear: 1900,
 93 |     endYear: 2049
 94 | }
 95 | ```
 96 | ### 标记日期
 97 | 标记日期配置只有在 showMark 为 true 时才会生效
 98 | 
 99 | ```javascript
100 | mark: {
101 |         '2016-5-5': '上学'
102 |       }
103 | ```
104 | 这样就会在日历的对应日期上面添加标记，当鼠标停留时显示输入的信息
105 | 
106 | ### 主题配置
107 | 
108 | 
109 | ```javascript
110 |  theme: {
111 |         changeAble: false,
112 |         weeks: {
113 |           backgroundColor: '#FBEC9C',
114 |           fontColor: '#4A4A4A',
115 |           fontSize: '20px',
116 |         },
117 |         days: {
118 |           backgroundColor: '#ffffff',
119 |           fontColor: '#565555',
120 |           fontSize: '24px'
121 |         },
122 |         todaycolor: 'orange',
123 |         activeSelectColor: 'orange',
124 |       }
125 | ```
126 | 主题配置只有在changeAble 为 true 时才会生效
127 | weeks 设置的是星期一栏的主题，分别对应背景颜色，字体颜色，字体大小
128 | days  设置的是日期的主题，参数同上
129 | todaycolor 设置的是当天的日期背景颜色
130 | activeSelectColor 设置的是鼠标滑过事件对应日期的边框颜色
131 | 
132 | ## 事件接口说明
133 | 
134 | ```javascript
135 | myCalendar.updateSize('500px', '500px');
136 | myCalendar.addMark('2016-3-7', 'test');
137 | myCalendar.setLanguage('EN')
138 | myCalendar.showFestival(false);
139 | myCalendar.showLunarCalendar(false);
140 | myCalendar.showHoliday(false);
141 | myCalendar.showSolarTerm(false);
142 | myCalendar.showLunarFestival(false);
143 | myCalendar.showMark(false);
144 | ```
145 | 
146 | ### updateSize(width,height)
147 | >调整日历大小，会自动根据大小调整对应的样式
148 | 
149 | ### addMark(day, info)
150 | >day   是一个可以确定一个日期的字符串
151 | info  是要显示的信息
152 | 
153 | ### setLenguage(languageStr)
154 | >设置语言，目前支持的语言有'CH','EN'
155 | 如果想要增加语言，请在languageData中修改
156 | 
157 | ### 其他
158 | 
159 | ```javascript
160 | //关闭或者显示国际节日
161 | showFestival(false); 
162 | //关闭或者显示阴历日期
163 | showLunarCalendar(false);
164 | //关闭或者显示假期
165 | showHoliday(false);
166 | //关闭或者显示二十四节气
167 | showSolarTerm(false);
168 | //关闭或者显示阴历节日
169 | showLunarFestival(false);
170 | //关闭或者显示标记
171 | showMark(false)
172 | ```
173 | 
174 | 
175 | 
176 | 
177 | 
178 | 
179 | 
180 | 
181 | 
182 | 
183 | 
184 | 
185 | 
186 | 
187 | 
188 | 


--------------------------------------------------------------------------------
/images/body-bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Lixucheng/Simple-Calendar/9050ac6f247ce09b5ba0dded202fffd5ed2e023e/images/body-bg.jpg


--------------------------------------------------------------------------------
/images/download-button.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Lixucheng/Simple-Calendar/9050ac6f247ce09b5ba0dded202fffd5ed2e023e/images/download-button.png


--------------------------------------------------------------------------------
/images/github-button.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Lixucheng/Simple-Calendar/9050ac6f247ce09b5ba0dded202fffd5ed2e023e/images/github-button.png


--------------------------------------------------------------------------------
/images/header-bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Lixucheng/Simple-Calendar/9050ac6f247ce09b5ba0dded202fffd5ed2e023e/images/header-bg.jpg


--------------------------------------------------------------------------------
/images/highlight-bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Lixucheng/Simple-Calendar/9050ac6f247ce09b5ba0dded202fffd5ed2e023e/images/highlight-bg.jpg


--------------------------------------------------------------------------------
/images/sidebar-bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Lixucheng/Simple-Calendar/9050ac6f247ce09b5ba0dded202fffd5ed2e023e/images/sidebar-bg.jpg


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <meta charset='utf-8'>
  5 |     <meta http-equiv="X-UA-Compatible" content="chrome=1">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  7 |     <link href='https://fonts.googleapis.com/css?family=Architects+Daughter' rel='stylesheet' type='text/css'>
  8 |     <link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" media="screen">
  9 |     <!-- <link rel="stylesheet" type="text/css" href="stylesheets/github-light.css" media="screen"> -->
 10 |     <link rel="stylesheet" type="text/css" href="stylesheets/print.css" media="print">
 11 |     <link rel="stylesheet" type="text/css" href="stylesheets/simple-calendar.css">
 12 | 
 13 |     <!--[if lt IE 9]>
 14 |     <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 15 |     <![endif]-->
 16 | 
 17 |     <title>Simple-calendar by Lixucheng</title>
 18 |     <style>
 19 |       #calendar{
 20 |         width: 100%
 21 |       }
 22 |       .clearfix{
 23 |         margin-bottom: 50px !important;
 24 |       }
 25 |     </style>
 26 |   </head>
 27 | 
 28 |   <body>
 29 |     <header>
 30 |       <div class="inner">
 31 |         <h1>Simple-calendar</h1>
 32 |         <h2>一个简单的日历插件</h2>
 33 |         <a href="https://github.com/Lixucheng/Simple-Calendar" class="button"><small>View project on</small> GitHub</a>
 34 |       </div>
 35 |     </header>
 36 | 
 37 |     <div id="content-wrapper">
 38 |   <div class="inner clearfix">
 39 |       <div id = 'calendar'>
 40 | 
 41 |       </div>
 42 |     </div>
 43 | 
 44 |       <div class="inner clearfix">
 45 |         <section id="main-content">
 46 |           <h1>
 47 | <a id="simple-calendar开发文档" class="anchor" href="#simple-calendar%E5%BC%80%E5%8F%91%E6%96%87%E6%A1%A3" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Simple-Calendar开发文档</h1>
 48 | 
 49 | <hr>
 50 | 
 51 | <h2>
 52 | <a id="获取simple-calendar" class="anchor" href="#%E8%8E%B7%E5%8F%96simple-calendar" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>获取Simple-Calendar</h2>
 53 | 
 54 | <p>从GitHub上下载 <a href="https://github.com/Lixucheng/Simple-Calendar">链接</a></p>
 55 | 
 56 | <h2>
 57 | <a id="引入资源" class="anchor" href="#%E5%BC%95%E5%85%A5%E8%B5%84%E6%BA%90" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>引入资源</h2>
 58 | 
 59 | <p>使用日历插件前首先要引用资源：JS CSS</p>
 60 | 
 61 | <div class="highlight highlight-source-js"><pre><span class="pl-k">&lt;</span>link rel<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>stylesheet<span class="pl-pds">"</span></span> type<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>text/css<span class="pl-pds">"</span></span> href<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>css/simple-calendar.css<span class="pl-pds">"</span></span><span class="pl-k">&gt;</span>
 62 | 
 63 | <span class="pl-k">&lt;</span>script type<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>text/javascript<span class="pl-pds">"</span></span> src<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>js/simple-calendar.js<span class="pl-pds">"</span></span><span class="pl-k">&gt;&lt;</span><span class="pl-k">/</span>script<span class="pl-k">&gt;</span></pre></div>
 64 | 
 65 | <h2>
 66 | <a id="初始化一个日历" class="anchor" href="#%E5%88%9D%E5%A7%8B%E5%8C%96%E4%B8%80%E4%B8%AA%E6%97%A5%E5%8E%86" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>初始化一个日历</h2>
 67 | 
 68 | <p>首先为calendar准备一个容器，可以设置大小，也可以在options中设置，不设置的话自动设为默认</p>
 69 | 
 70 | <div class="highlight highlight-text-html-basic"><pre>  &lt;<span class="pl-ent">div</span> <span class="pl-e">id</span>=<span class="pl-s"><span class="pl-pds">'</span>container<span class="pl-pds">'</span></span>&gt;&lt;/<span class="pl-ent">div</span>&gt;</pre></div>
 71 | 
 72 | <div class="highlight highlight-text-html-basic"><pre><span class="pl-s1">  &lt;<span class="pl-ent">script</span>&gt;</span>
 73 | <span class="pl-s1">    <span class="pl-k">var</span> myCalendar <span class="pl-k">=</span> <span class="pl-k">new</span> <span class="pl-en">SimpleCalendar</span>(<span class="pl-s"><span class="pl-pds">'</span>#container<span class="pl-pds">'</span></span>);</span>
 74 | <span class="pl-s1">  &lt;/<span class="pl-ent">script</span>&gt;</span></pre></div>
 75 | 
 76 | <p>这样一个日历就诞生了 ^-^</p>
 77 | 
 78 | <h2>
 79 | <a id="配置项说明" class="anchor" href="#%E9%85%8D%E7%BD%AE%E9%A1%B9%E8%AF%B4%E6%98%8E" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>配置项说明</h2>
 80 | 
 81 | <div class="highlight highlight-source-js"><pre><span class="pl-k">var</span> options <span class="pl-k">=</span> {
 82 |       width<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>500px<span class="pl-pds">'</span></span>,
 83 |       height<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>500px<span class="pl-pds">'</span></span>,
 84 |       language<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>CH<span class="pl-pds">'</span></span>, <span class="pl-c">//语言</span>
 85 |       showLunarCalendar<span class="pl-k">:</span> <span class="pl-c1">true</span>, <span class="pl-c">//阴历</span>
 86 |       showHoliday<span class="pl-k">:</span> <span class="pl-c1">true</span>, <span class="pl-c">//休假</span>
 87 |       showFestival<span class="pl-k">:</span> <span class="pl-c1">true</span>, <span class="pl-c">//节日</span>
 88 |       showLunarFestival<span class="pl-k">:</span> <span class="pl-c1">true</span>, <span class="pl-c">//农历节日</span>
 89 |       showSolarTerm<span class="pl-k">:</span> <span class="pl-c1">true</span>, <span class="pl-c">//节气</span>
 90 |       showMark<span class="pl-k">:</span> <span class="pl-c1">true</span>, <span class="pl-c">//标记</span>
 91 |       <span class="pl-c">//获取点击的日期</span>
 92 |       onSelect<span class="pl-k">: <span class="pl-c1">(day) => </span> {
 93 |         <span class="pl-c1">console.log(day);</span>
 94 |       },
 95 |       timeRange<span class="pl-k">:</span> {
 96 |         startYear<span class="pl-k">:</span> <span class="pl-c1">1900</span>,
 97 |         endYear<span class="pl-k">:</span> <span class="pl-c1">2049</span>
 98 |       },
 99 |       mark<span class="pl-k">:</span> {
100 |         <span class="pl-s"><span class="pl-pds">'</span>2016-5-5<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>上学<span class="pl-pds">'</span></span>
101 |       },
102 |       theme<span class="pl-k">:</span> {
103 |         changeAble<span class="pl-k">:</span> <span class="pl-c1">false</span>,
104 |         weeks<span class="pl-k">:</span> {
105 |           backgroundColor<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>#FBEC9C<span class="pl-pds">'</span></span>,
106 |           fontColor<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>#4A4A4A<span class="pl-pds">'</span></span>,
107 |           fontSize<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>20px<span class="pl-pds">'</span></span>,
108 |         },
109 |         days<span class="pl-k">:</span> {
110 |           backgroundColor<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>#ffffff<span class="pl-pds">'</span></span>,
111 |           fontColor<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>#565555<span class="pl-pds">'</span></span>,
112 |           fontSize<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>24px<span class="pl-pds">'</span></span>
113 |         },
114 |         todaycolor<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>orange<span class="pl-pds">'</span></span>,
115 |         activeSelectColor<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>orange<span class="pl-pds">'</span></span>,
116 |       }
117 |     }</pre></div>
118 | 
119 | <h3>
120 | <a id="国际化" class="anchor" href="#%E5%9B%BD%E9%99%85%E5%8C%96" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>国际化</h3>
121 | 
122 | <blockquote>
123 | <p>language：
124 | 语言的话目前只支持中文和英文，分别对应'CH','EN'</p>
125 | </blockquote>
126 | 
127 | <p>如果想要加更多的语言或者更改现在的显示，可以直接更改languageData内容</p>
128 | 
129 | <h3>
130 | <a id="节日显示配置" class="anchor" href="#%E8%8A%82%E6%97%A5%E6%98%BE%E7%A4%BA%E9%85%8D%E7%BD%AE" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>节日显示配置</h3>
131 | 
132 | <div class="highlight highlight-source-js"><pre>showLunarCalendar<span class="pl-k">:</span> <span class="pl-c1">true</span>, <span class="pl-c">//是否显示阴历日期</span>
133 | showHoliday<span class="pl-k">:</span> <span class="pl-c1">true</span>,       <span class="pl-c">//是否显示休假休假</span>
134 | showFestival<span class="pl-k">:</span> <span class="pl-c1">true</span>,      <span class="pl-c">//是否显示国际节日</span>
135 | showLunarFestival<span class="pl-k">:</span> <span class="pl-c1">true</span>, <span class="pl-c">//是否显示农历节日</span>
136 | showSolarTerm<span class="pl-k">:</span> <span class="pl-c1">true</span>,     <span class="pl-c">//是否显示节气</span>
137 | showMark<span class="pl-k">:</span> <span class="pl-c1">true</span>,          <span class="pl-c">//是否显示标记日期</span>
138 | </pre></div>
139 | 
140 | <h3>
141 | <a id="时间范围" class="anchor" href="#%E6%97%B6%E9%97%B4%E8%8C%83%E5%9B%B4" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>时间范围</h3>
142 | 
143 | <p>这个时间范围设置的是下拉框中的年数范围</p>
144 | 
145 | <div class="highlight highlight-source-js"><pre>timeRange<span class="pl-k">:</span> {
146 |     startYear<span class="pl-k">:</span> <span class="pl-c1">1900</span>,
147 |     endYear<span class="pl-k">:</span> <span class="pl-c1">2049</span>
148 | }</pre></div>
149 | 
150 | <h3>
151 | <a id="标记日期" class="anchor" href="#%E6%A0%87%E8%AE%B0%E6%97%A5%E6%9C%9F" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>标记日期</h3>
152 | 
153 | <p>标记日期配置只有在 showMark 为 true 时才会生效</p>
154 | 
155 | <div class="highlight highlight-source-js"><pre>mark<span class="pl-k">:</span> {
156 |         <span class="pl-s"><span class="pl-pds">'</span>2016-5-5<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>上学<span class="pl-pds">'</span></span>
157 |       }</pre></div>
158 | 
159 | <p>这样就会在日历的对应日期上面添加标记，当鼠标停留时显示输入的信息</p>
160 | 
161 | <h3>
162 | <a id="主题配置" class="anchor" href="#%E4%B8%BB%E9%A2%98%E9%85%8D%E7%BD%AE" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>主题配置</h3>
163 | 
164 | <div class="highlight highlight-source-js"><pre> theme<span class="pl-k">:</span> {
165 |         changeAble<span class="pl-k">:</span> <span class="pl-c1">false</span>,
166 |         weeks<span class="pl-k">:</span> {
167 |           backgroundColor<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>#FBEC9C<span class="pl-pds">'</span></span>,
168 |           fontColor<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>#4A4A4A<span class="pl-pds">'</span></span>,
169 |           fontSize<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>20px<span class="pl-pds">'</span></span>,
170 |         },
171 |         days<span class="pl-k">:</span> {
172 |           backgroundColor<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>#ffffff<span class="pl-pds">'</span></span>,
173 |           fontColor<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>#565555<span class="pl-pds">'</span></span>,
174 |           fontSize<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>24px<span class="pl-pds">'</span></span>
175 |         },
176 |         todaycolor<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>orange<span class="pl-pds">'</span></span>,
177 |         activeSelectColor<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>orange<span class="pl-pds">'</span></span>,
178 |       }</pre></div>
179 | 
180 | <p>主题配置只有在changeAble 为 true 时才会生效
181 | weeks 设置的是星期一栏的主题，分别对应背景颜色，字体颜色，字体大小
182 | days  设置的是日期的主题，参数同上
183 | todaycolor 设置的是当天的日期背景颜色
184 | activeSelectColor 设置的是鼠标滑过事件对应日期的边框颜色</p>
185 | 
186 | <h2>
187 | <a id="事件接口说明" class="anchor" href="#%E4%BA%8B%E4%BB%B6%E6%8E%A5%E5%8F%A3%E8%AF%B4%E6%98%8E" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>事件接口说明</h2>
188 | 
189 | <div class="highlight highlight-source-js"><pre><span class="pl-smi">myCalendar</span>.<span class="pl-en">updateSize</span>(<span class="pl-s"><span class="pl-pds">'</span>500px<span class="pl-pds">'</span></span>, <span class="pl-s"><span class="pl-pds">'</span>500px<span class="pl-pds">'</span></span>);
190 | <span class="pl-smi">myCalendar</span>.<span class="pl-en">addMark</span>(<span class="pl-s"><span class="pl-pds">'</span>2016-3-7<span class="pl-pds">'</span></span>, <span class="pl-s"><span class="pl-pds">'</span>test<span class="pl-pds">'</span></span>);
191 | <span class="pl-smi">myCalendar</span>.<span class="pl-en">setLanguage</span>(<span class="pl-s"><span class="pl-pds">'</span>EN<span class="pl-pds">'</span></span>)
192 | <span class="pl-smi">myCalendar</span>.<span class="pl-en">showFestival</span>(<span class="pl-c1">false</span>);
193 | <span class="pl-smi">myCalendar</span>.<span class="pl-en">showLunarCalendar</span>(<span class="pl-c1">false</span>);
194 | <span class="pl-smi">myCalendar</span>.<span class="pl-en">showHoliday</span>(<span class="pl-c1">false</span>);
195 | <span class="pl-smi">myCalendar</span>.<span class="pl-en">showSolarTerm</span>(<span class="pl-c1">false</span>);
196 | <span class="pl-smi">myCalendar</span>.<span class="pl-en">showLunarFestival</span>(<span class="pl-c1">false</span>);
197 | <span class="pl-smi">myCalendar</span>.<span class="pl-en">showMark</span>(<span class="pl-c1">false</span>);</pre></div>
198 | 
199 | <h3>
200 | <a id="updatesizewidthheight" class="anchor" href="#updatesizewidthheight" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>updateSize(width,height)</h3>
201 | 
202 | <blockquote>
203 | <p>调整日历大小，会自动根据大小调整对应的样式</p>
204 | </blockquote>
205 | 
206 | <h3>
207 | <a id="addmarkday-info" class="anchor" href="#addmarkday-info" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>addMark(day, info)</h3>
208 | 
209 | <blockquote>
210 | <p>day   是一个可以确定一个日期的字符串
211 | info  是要显示的信息</p>
212 | </blockquote>
213 | 
214 | <h3>
215 | <a id="setlenguagelanguagestr" class="anchor" href="#setlenguagelanguagestr" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>setLenguage(languageStr)</h3>
216 | 
217 | <blockquote>
218 | <p>设置语言，目前支持的语言有'CH','EN'
219 | 如果想要增加语言，请在languageData中修改</p>
220 | </blockquote>
221 | 
222 | <h3>
223 | <a id="其他" class="anchor" href="#%E5%85%B6%E4%BB%96" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>其他</h3>
224 | 
225 | <div class="highlight highlight-source-js"><pre><span class="pl-c">//关闭或者显示国际节日</span>
226 | <span class="pl-en">showFestival</span>(<span class="pl-c1">false</span>);
227 | <span class="pl-c">//关闭或者显示阴历日期</span>
228 | <span class="pl-en">showLunarCalendar</span>(<span class="pl-c1">false</span>);
229 | <span class="pl-c">//关闭或者显示假期</span>
230 | <span class="pl-en">showHoliday</span>(<span class="pl-c1">false</span>);
231 | <span class="pl-c">//关闭或者显示二十四节气</span>
232 | <span class="pl-en">showSolarTerm</span>(<span class="pl-c1">false</span>);
233 | <span class="pl-c">//关闭或者显示阴历节日</span>
234 | <span class="pl-en">showLunarFestival</span>(<span class="pl-c1">false</span>);
235 | <span class="pl-c">//关闭或者显示标记</span>
236 | <span class="pl-en">showMark</span>(<span class="pl-c1">false</span>)</pre></div>
237 |         </section>
238 | 
239 |         <aside id="sidebar">
240 |           <a href="https://github.com/Lixucheng/Simple-Calendar/zipball/master" class="button">
241 |             <small>Download</small>
242 |             .zip file
243 |           </a>
244 |           <a href="https://github.com/Lixucheng/Simple-Calendar/tarball/master" class="button">
245 |             <small>Download</small>
246 |             .tar.gz file
247 |           </a>
248 | 
249 |           <p class="repo-owner"><a href="https://github.com/Lixucheng/Simple-Calendar"></a> is maintained by <a href="https://github.com/Lixucheng">Lixucheng</a>.</p>
250 | 
251 |           <p>This page was generated by <a href="https://pages.github.com">GitHub Pages</a> using the Architect theme by <a href="https://twitter.com/jasonlong">Jason Long</a>.</p>
252 |         </aside>
253 |       </div>
254 |     </div>
255 | 
256 |     <script type="text/javascript" src="javascripts/simple-calendar.js"></script>
257 |     <script>
258 |      var myCalendar = new SimpleCalendar('#calendar');
259 |     </script>
260 | 
261 | 
262 |   </body>
263 | </html>
264 | 


--------------------------------------------------------------------------------
/javascripts/main.js:
--------------------------------------------------------------------------------
1 | console.log('');
2 | 


--------------------------------------------------------------------------------
/javascripts/simple-calendar-es6.js:
--------------------------------------------------------------------------------
  1 | class LunarHelp {
  2 |   constructor(year,month,day) {
  3 |     this.lunarInfo = new Array(
  4 |         0x04bd8, 0x04ae0, 0x0a570, 0x054d5, 0x0d260, 0x0d950, 0x16554, 0x056a0, 0x09ad0, 0x055d2,
  5 |         0x04ae0, 0x0a5b6, 0x0a4d0, 0x0d250, 0x1d255, 0x0b540, 0x0d6a0, 0x0ada2, 0x095b0, 0x14977,
  6 |         0x04970, 0x0a4b0, 0x0b4b5, 0x06a50, 0x06d40, 0x1ab54, 0x02b60, 0x09570, 0x052f2, 0x04970,
  7 |         0x06566, 0x0d4a0, 0x0ea50, 0x06e95, 0x05ad0, 0x02b60, 0x186e3, 0x092e0, 0x1c8d7, 0x0c950,
  8 |         0x0d4a0, 0x1d8a6, 0x0b550, 0x056a0, 0x1a5b4, 0x025d0, 0x092d0, 0x0d2b2, 0x0a950, 0x0b557,
  9 |         0x06ca0, 0x0b550, 0x15355, 0x04da0, 0x0a5d0, 0x14573, 0x052d0, 0x0a9a8, 0x0e950, 0x06aa0,
 10 |         0x0aea6, 0x0ab50, 0x04b60, 0x0aae4, 0x0a570, 0x05260, 0x0f263, 0x0d950, 0x05b57, 0x056a0,
 11 |         0x096d0, 0x04dd5, 0x04ad0, 0x0a4d0, 0x0d4d4, 0x0d250, 0x0d558, 0x0b540, 0x0b5a0, 0x195a6,
 12 |         0x095b0, 0x049b0, 0x0a974, 0x0a4b0, 0x0b27a, 0x06a50, 0x06d40, 0x0af46, 0x0ab60, 0x09570,
 13 |         0x04af5, 0x04970, 0x064b0, 0x074a3, 0x0ea50, 0x06b58, 0x055c0, 0x0ab60, 0x096d5, 0x092e0,
 14 |         0x0c960, 0x0d954, 0x0d4a0, 0x0da50, 0x07552, 0x056a0, 0x0abb7, 0x025d0, 0x092d0, 0x0cab5,
 15 |         0x0a950, 0x0b4a0, 0x0baa4, 0x0ad50, 0x055d9, 0x04ba0, 0x0a5b0, 0x15176, 0x052b0, 0x0a930,
 16 |         0x07954, 0x06aa0, 0x0ad50, 0x05b52, 0x04b60, 0x0a6e6, 0x0a4e0, 0x0d260, 0x0ea65, 0x0d530,
 17 |         0x05aa0, 0x076a3, 0x096d0, 0x04bd7, 0x04ad0, 0x0a4d0, 0x1d0b6, 0x0d250, 0x0d520, 0x0dd45,
 18 |         0x0b5a0, 0x056d0, 0x055b2, 0x049b0, 0x0a577, 0x0a4b0, 0x0aa50, 0x1b255, 0x06d20, 0x0ada0)
 19 | 
 20 |     this.nStr1 = new Array('日', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十');
 21 |     this.nStr2 = new Array('初', '十', '廿', '三');
 22 | 
 23 |     var date = new Date(parseInt(year), parseInt(month) - 1, parseInt(day))
 24 | 
 25 |     var i, leap = 0,
 26 |         temp = 0;//天数
 27 |     var baseDate = new Date(1900, 0, 31);
 28 |     var offset = (date - baseDate) / 86400000;
 29 | 
 30 | 
 31 |     //计算年数
 32 |     for (i = 1900; i < 2050 && (offset-this.lYearDays(i)) > 0; i++) {
 33 |       offset -= this.lYearDays(i)
 34 |     }
 35 | 
 36 |     this.year = i
 37 |     leap = this.leapMonth(i) //闰哪个月
 38 |     this.isLeap = 0 //0 不是 1是 2是并且计算完成
 39 | 
 40 | 
 41 |     //计算月数
 42 |     for (i = 1; i < 13 && offset > 0; i++) {
 43 |       //闰月
 44 |       if (leap > 0 && i == (leap + 1) && this.isLeap == 0) {
 45 |         --i;
 46 |         this.isLeap = 1;
 47 |         temp = this.leapDays(this.year);
 48 |       } else {
 49 |         temp = this.monthDays(this.year, i);
 50 |       }
 51 | 
 52 |       //解除闰月
 53 |       if (this.isLeap == 1 && i == (leap + 1)) this.isLeap = 2
 54 | 
 55 |       offset -= temp
 56 |     }
 57 | 
 58 |     //如果恰好减完了，不是闰月的话月数减1
 59 |     if (offset == 0 && leap > 0 && i == leap + 1)
 60 |       if (this.isLeap) {
 61 |         this.isLeap = 0;
 62 |       } else {
 63 |         this.isLeap = 1;
 64 |         --i;
 65 |       }
 66 | 
 67 |     if (offset < 0) {
 68 |       offset += temp;
 69 |       --i;
 70 |     }
 71 | 
 72 |     this.month = i
 73 |     //最后剩余的就是日期
 74 |     this.day = offset + 1
 75 |   }
 76 | 
 77 |   // 获取y年的总天数
 78 |   lYearDays(year) {
 79 |     var i, sum = 0 ;
 80 |     for (i = 0x8000; i > 0x8; i >>= 1)
 81 |       sum += (this.lunarInfo[year - 1900] & i) ? 30 : 29
 82 |     return (sum + this.leapDays(year)) //最后在加上可能有的闰年的闰月
 83 |   }
 84 | 
 85 |   //获取闰年闰月的天数 闰大月还是小月
 86 |   leapDays(year) {
 87 |     if (this.leapMonth(year))
 88 |       return ((this.lunarInfo[year - 1900] & 0x10000) ? 30 : 29)
 89 |     else
 90 |       return 0;
 91 |   }
 92 | 
 93 |   //获取闰年闰哪个月1-12 ,没闰传回 0
 94 |   leapMonth(year) {
 95 |     return (this.lunarInfo[year - 1900] & 0xf)
 96 |   }
 97 | 
 98 |   //获取y年m月的总天数 正常月
 99 |   monthDays(year, month) {
100 |     return ((this.lunarInfo[year - 1900] & (0x10000 >> month)) ? 30 : 29)
101 |   }
102 | 
103 |   //中文日期
104 |   cDay(d) {
105 |     var s;
106 | 
107 |     switch (d) {
108 |       case 10:
109 |         s = '初十';
110 |         break;
111 |       case 20:
112 |         s = '二十';
113 |         break;
114 |         break;
115 |       case 30:
116 |         s = '三十';
117 |         break;
118 |         break;
119 |       default:
120 |         s = this.nStr2[Math.floor(d / 10)];
121 |         s += this.nStr1[Math.floor(d) % 10];
122 |     }
123 |     return (s);
124 |   }
125 |   //中文月份
126 |   cMonth(m) {
127 |     var s;
128 | 
129 |     switch (m) {
130 |       case 1:
131 |         s = '正月';
132 |         break;
133 |       case 2:
134 |         s = '二月';
135 |         break;
136 |       case 3:
137 |         s = '三月';
138 |         break;
139 |       case 4:
140 |         s = '四月';
141 |         break;
142 |       case 5:
143 |         s = '五月';
144 |         break;
145 |       case 6:
146 |         s = '六月';
147 |         break;
148 |       case 7:
149 |         s = '七月';
150 |         break;
151 |       case 8:
152 |         s = '八月';
153 |         break;
154 |       case 9:
155 |         s = '九月';
156 |         break;
157 |       case 10:
158 |         s = '十月';
159 |         break;
160 |       case 11:
161 |         s = '十一月';
162 |         break;
163 |       case 12:
164 |         s = '十二月';
165 |         break;
166 |       default:
167 |         break;
168 |     }
169 |     return (s);
170 |   }
171 | 
172 |   //获得阴历日期 字符串
173 |   getLunarDay() {
174 |     return cMonth(this.month) + cDay(this.day);
175 |   }
176 |   //获得阴历日期某一天的中文
177 |   getLunarDayName() {
178 | 
179 |     if (this.day == 1)
180 |       return this.cMonth(this.month);
181 |     return this.cDay(this.day);
182 |   }
183 |   //获取阴历日期的数字
184 |   getLunarDayNum() {
185 |     return {
186 |       day: this.day,
187 |       month: this.month
188 |     };
189 |   }
190 | 
191 | 
192 | }
193 | 
194 | 
195 | class SimpleCalendar {
196 |   //构造函数
197 |   constructor(query, options) {
198 |     //默认配置
199 |     this._defaultOptions = {
200 |       width: '500px',
201 |       height: '500px',
202 |       language: 'CH', //语言
203 |       showLunarCalendar: true, //阴历
204 |       showHoliday: true, //休假
205 |       showFestival: true, //节日
206 |       showLunarFestival: true, //农历节日
207 |       showSolarTerm: true, //节气
208 |       showMark: true, //标记
209 |       onSelect: () => {},
210 |       timeRange: {
211 |         startYear: 1900,
212 |         endYear: 2049
213 |       },
214 |       timeZone: "", //时区
215 |       mark: {
216 |         '2016-5-5': '上学'
217 |       },
218 |       theme: {
219 |         changeAble: false,
220 |         weeks: {
221 |           backgroundColor: '#FBEC9C',
222 |           fontColor: '#4A4A4A',
223 |           fontSize: '20px',
224 |         },
225 |         days: {
226 |           backgroundColor: '#ffffff',
227 |           fontColor: '#565555',
228 |           fontSize: '24px'
229 |         },
230 |         todaycolor: 'orange',
231 |         activeSelectColor: 'orange',
232 |         invalidDays: '#C1C0C0',
233 |       }
234 |     }
235 | 
236 |     //容器
237 |     this.container = document.querySelector(query);
238 | 
239 |     this._defaultOptions.width = this.container.style.offsetWidth;
240 |     this._defaultOptions.height = this.container.style.offsetHeight;
241 | 
242 |     //this._options = Object.assign({}, this._defaultOptions, options);
243 | 
244 |     //得到最终配置
245 |     this._options = this.optionAssign(this._defaultOptions, options);
246 | 
247 |     this.create();
248 |   }
249 | 
250 |   //用B更新A的属性 并返回结果
251 |   optionAssign(optionsA, optionsB) {
252 |     for (var key in optionsB) {
253 |       if (typeof(optionsA[key]) === 'function') {
254 |         if (typeof(optionsB[key]) === 'function') {
255 |           optionsA[key] = optionsB[key];
256 |         } else {
257 |           console.warn(`${key} must be a function`);
258 |         }
259 |       }
260 |       else if (typeof(optionsA[key]) !== 'object')
261 |         optionsA[key] = optionsB[key];
262 |       else {
263 |         optionsA[key] = this.optionAssign(optionsA[key], optionsB[key])
264 |       }
265 |     }
266 |     return optionsA;
267 |   }
268 | 
269 |   //生成日历样式
270 |   create() {
271 |     var root = this.container;
272 |     root.innerHTML = '<div class="sc-header"> </div> <div class="sc-body"> </div>';
273 |     root.style.width = this._options.width;
274 |     root.style.height = this._options.height;
275 |     root.className = 'sc-calendar';
276 |     var header = root.querySelector('.sc-header');
277 |     var scbody = root.querySelector('.sc-body');
278 |     //actions
279 |     header.innerHTML = header.innerHTML + '<div class="sc-actions">' +
280 |         '      <div class="sc-yleft">' +
281 |         '        &lsaquo;</div>' +
282 |         '      <select class="sc-select-year" name="">' +
283 |         '      </select>' +
284 |         '      <div class="sc-yright">&rsaquo;</div>' +
285 |         '  </div>';
286 |     header.innerHTML = header.innerHTML + '<div class="sc-actions">' +
287 |         '    <div class="sc-mleft">' +
288 |         '      &lsaquo;</div>' +
289 |         '    <select class="sc-select-month" name="">' +
290 |         '    </select>' +
291 |         '    <div class="sc-mright">&rsaquo;</div>' +
292 |         '</div>';
293 |     header.innerHTML = header.innerHTML + '<div class="sc-actions"><span class="sc-return-today ">返回今天</span></div>';
294 |     header.innerHTML = header.innerHTML + '<div class="sc-actions"><span class="sc-time"></span></div>';
295 |     scbody.innerHTML = ' <div class="sc-week"> </div> <div class="sc-days"> </div>';
296 |     var week = scbody.querySelector('.sc-week');
297 |     var days = scbody.querySelector('.sc-days');
298 |     for (var i = 0; i < 7; i++) {
299 |       week.innerHTML = week.innerHTML + ' <div class="sc-week-item"></div>';
300 |     }
301 |     for (var i = 0; i < 35; i++) {
302 |       days.innerHTML = days.innerHTML + '<div class="sc-item"><div class="day"></div><div class="lunar-day"></div></div>';
303 |     }
304 |     //添加下拉框数据
305 |     this.updateSelect(this.tyear, this.tmonth);
306 |     //刷新日历
307 |     this.update();
308 |     //时间刷新
309 |     self.setInterval('SimpleCalendar.timeupdate()', 200);
310 |   }
311 | 
312 |   //刷新日历
313 |   update(month = this.tmonth, year = this.tyear) {
314 |     this.updateSize()
315 |     this.updateWeek();
316 |     this.addData(year, month);
317 |     this.updateHoliday(year, month);
318 |     this.updateMark(year, month);
319 |     this.updateFestival(year, month);
320 |     this.updateEvent();
321 |     this.updateTheme(this._options.theme);
322 |   }
323 | 
324 |   //调整大小
325 |   updateSize(width = this._options.width, height = this._options.height) {
326 |     //将大小赋值给option
327 |     this._options.width = width;
328 |     this._options.height = height;
329 | 
330 |     this.container.style.width = width;
331 |     this.container.style.height = height;
332 | 
333 |     //根据长度和宽度大小调整适合的样式
334 |     if (parseInt(width) < 500) {
335 |       var actions = this.arrayfrom(this.container.querySelectorAll('.sc-actions'));
336 |       actions.forEach(function(v, i) {
337 |         v.classList.add('sc-actions-big');
338 |       })
339 |     } else {
340 |       var actions = this.arrayfrom(this.container.querySelectorAll('.sc-actions'));
341 |       actions.forEach(function(v, i) {
342 |         v.classList.remove('sc-actions-big');
343 |       })
344 |     }
345 |     if (parseInt(height) < 400) {
346 |       var items = this.arrayfrom(this.container.querySelectorAll('.sc-item'));
347 |       var weeks = this.arrayfrom(this.container.querySelectorAll('.sc-week-item'));
348 |       items.forEach(function(v, i) {
349 |         v.querySelector('.day').classList.add('sc-item-small');
350 |       })
351 |       weeks.forEach(function(v, i) {
352 |         v.classList.add('sc-item-small');
353 |       })
354 |     } else {
355 |       var items = this.arrayfrom(this.container.querySelectorAll('.sc-item'));
356 |       var weeks = this.arrayfrom(this.container.querySelectorAll('.sc-week-item'));
357 |       items.forEach(function(v, i) {
358 |         v.querySelector('.day').classList.remove('sc-item-small');
359 |       })
360 |       weeks.forEach(function(v, i) {
361 |         v.classList.remove('sc-item-small');
362 |       })
363 |     }
364 |   }
365 | 
366 |   //刷新下拉框 只有在初始化和设置语言后才会更新
367 |   updateSelect(year, month) {
368 |     //下拉框
369 |     var selectYear = this.container.querySelector('.sc-select-year');
370 |     var selectMonth = this.container.querySelector('.sc-select-month');
371 |     selectYear.innerHTML = '';
372 |     for (var i = this._options.timeRange.startYear; i < this._options.timeRange.endYear+1; i++) {
373 |       selectYear.innerHTML += '<option value="' + i + '">' + i + '</option>';
374 |     }
375 |     selectMonth.innerHTML = '';
376 |     for (var i = 0; i < 12; i++) {
377 |       var data = this.languageData['months_' + this._options.language];
378 |       selectMonth.innerHTML += '<option value="' + (i + 1) + '">' + data[i] + '</option>';
379 |     }
380 | 
381 |     selectYear.value = year;
382 |     selectMonth.value = month;
383 | 
384 |   }
385 | 
386 |   //刷新星期
387 |   updateWeek() {
388 |     var weeks = this.arrayfrom(this.container.querySelectorAll('.sc-week-item'));
389 |     var data = this.languageData['days_' + this._options.language];
390 |     if (!data) {
391 |       console.error('language error!');
392 |     }
393 |     weeks.forEach(function(v, i) {
394 |       v.innerHTML = data[i];
395 |     })
396 |   }
397 | 
398 |   //添加阳历阴历数据
399 |   addData(year, month) {
400 |     var daysElement = this.arrayfrom(this.container.querySelectorAll('.sc-item'));
401 |     var day = new Date(year, month - 1, 1);
402 |     var week = day.getDay();
403 |     if (week == 0) week = 7;
404 | 
405 |     //计算得到第一个格子的日期
406 |     var thispageStart = new Date(Date.parse(day) - (week - 1) * 24 * 3600 * 1000);
407 | 
408 |     //对每一个格子遍历
409 |     for (var i = 0; i < 35; i++) {
410 |       daysElement[i].className = 'sc-item';
411 |       var theday = new Date(Date.parse(thispageStart) + i * 24 * 3600 * 1000);
412 |       var writeyear = theday.getFullYear();
413 |       var writeday = theday.getDate();
414 |       var writemonth = theday.getMonth() + 1;
415 |       if (writemonth != month) {
416 |         daysElement[i].classList.add('sc-othermenth');
417 |       }
418 |       daysElement[i].querySelector('.day').innerHTML = writeday;
419 |       //判断是否添加阴历
420 |       if (this._options.showLunarCalendar) {
421 |         daysElement[i].querySelector('.lunar-day').innerHTML = (new LunarHelp(writeyear, writemonth, writeday)).getLunarDayName();
422 |       } else {
423 |         daysElement[i].querySelector('.lunar-day').innerHTML = '';
424 |         daysElement[i].classList.add('item-nolunar');
425 |       }
426 | 
427 |       //添加today样式
428 |       if (this.tyear == writeyear && this.tday == writeday && this.tmonth == writemonth) {
429 |         this.selectDay = daysElement[i];
430 |         daysElement[i].classList.add("sc-today");
431 |       }
432 | 
433 |     }
434 |   }
435 | 
436 |   //刷新标记日期
437 |   updateMark(year, month) {
438 |     var options = this._options;
439 |     if (options.showMark) {
440 |       var daysElement = this.arrayfrom(this.container.querySelectorAll('.sc-item'));
441 |       var currentmonth = month - 1;
442 |       //取得节日数据
443 |       var data = options.mark;
444 |       if (data) {
445 |         daysElement.forEach(function(v, i) {
446 | 
447 |           var day = +(v.querySelector('.day').innerHTML);
448 |           if (day == 1) currentmonth++;
449 | 
450 | 
451 |           if (data[year + '-' + currentmonth + '-' + day]) {
452 |             v.classList.add('sc-mark');
453 | 
454 |             // 增强标签效果
455 |             var reminder = v.querySelector('.lunar-day');
456 |             reminder.innerText = data[year + '-' + currentmonth + '-' + day];
457 | 
458 |             v.title = data[year + '-' + currentmonth + '-' + day];
459 |           } else {
460 |             v.classList.remove('sc-mark');
461 |             v.title = '';
462 |           }
463 | 
464 |         });
465 |       }
466 | 
467 | 
468 |     }
469 | 
470 |   }
471 | 
472 |   //刷新节日数据
473 |   updateFestival(year, month) {
474 |     var options = this._options;
475 |     var daysElement = this.arrayfrom(this.container.querySelectorAll('.sc-item'));
476 |     var currentmonth = month - 1;
477 |     //取得节日数据
478 |     var data =this.languageData['feativals_' + this._options.language];
479 |     var lunardata = this.languageData['lunarFeatival_' + this._options.language];
480 |     var solarTermdata = this.languageData['solarTerm'];
481 |     if (!data) {
482 |       console.error('language error!');
483 |     }
484 |     daysElement.forEach(function(v, i) {
485 |       var day = +(v.querySelector('.day').innerHTML);
486 |       if (day == 1) currentmonth++;
487 | 
488 |       //24节气
489 |       if (options.showSolarTerm) {
490 |         if (solarTermdata[currentmonth + '-' + day]) {
491 |           v.querySelector('.lunar-day').innerHTML = solarTermdata[currentmonth + '-' + day];
492 |           v.classList.add('sc-festival');
493 |         }
494 |       }
495 | 
496 |       //国际节日
497 |       if (options.showFestival) {
498 |         if (data[currentmonth + '-' + day]) {
499 |           v.querySelector('.lunar-day').innerHTML = data[currentmonth + '-' + day];
500 |           v.classList.add('sc-festival');
501 |         }
502 | 
503 |       }
504 | 
505 | 
506 |       //阴历节日
507 |       if (lunardata && options.showLunarFestival) {
508 |         var lunar =(new LunarHelp(year, currentmonth, day)).getLunarDayNum();
509 |         if (lunardata[lunar.month + '-' + lunar.day]) {
510 |           v.querySelector('.lunar-day').innerHTML = lunardata[lunar.month + '-' + lunar.day];
511 |           v.classList.add('sc-festival');
512 |         }
513 |       }
514 | 
515 |     });
516 | 
517 | 
518 |   }
519 | 
520 |   //刷新假期 休假
521 |   updateHoliday(year, month) {
522 | 
523 |     var options = this._options;
524 |     if (options.showHoliday) {
525 |       var daysElement = this.arrayfrom(this.container.querySelectorAll('.sc-item'));
526 |       var currentmonth = month - 1;
527 |       //取得节日数据
528 |       var data = this.languageData.vocation['data_' + year];
529 |       if (data) {
530 |         daysElement.forEach(function(v, i) {
531 |           var day = +(v.querySelector('.day').innerHTML);
532 |           if (day == 1) currentmonth++;
533 |           //国际节日
534 |           if (data.indexOf(currentmonth + '-' + day) > 0) {
535 |             v.classList.add('sc-vocation');
536 |           }
537 |         });
538 |       }
539 | 
540 | 
541 |     }
542 | 
543 |   }
544 | 
545 |   //刷新主题
546 |   updateTheme(theme) {
547 |     if (this._options.theme.changeAble) {
548 |       var daytheme = theme.days;
549 |       var weektheme = theme.weeks;
550 |       var weeks = this.arrayfrom(this.container.querySelectorAll('.sc-week-item'));
551 |       var days = this.arrayfrom(this.container.querySelectorAll('.sc-item'));
552 |       weeks.forEach(function(v, i) {
553 |         v.style.backgroundColor = weektheme.backgroundColor;
554 |         v.style.fontSize = weektheme.fontSize;
555 |         v.style.color = weektheme.fontColor;
556 |       })
557 |       days.forEach(function(v, i) {
558 |         if (!v.classList.contains('sc-today')) {
559 |           v.style.backgroundColor = daytheme.backgroundColor;
560 |           v.querySelector('.day').style.color = daytheme.fontColor;
561 |         } else {
562 |           v.style.backgroundColor = theme.todaycolor;
563 |         }
564 |         v.querySelector('.day').style.fontSize = daytheme.fontSize;
565 |       })
566 |       var Calendar = this;
567 |       //active border
568 |       days.forEach(function(v, i) {
569 |         v.onmouseover = function(e) {
570 |           this.style.borderColor = theme.activeSelectColor;
571 |           this.style.borderWidth = '1px';
572 |         }
573 |         v.onmouseout = function(e) {
574 |           this.style.borderColor = '#F1EBE4';
575 |           this.style.borderWidth = '0 0 1px 1px';
576 |         }
577 | 
578 |       })
579 |     }
580 |   }
581 | 
582 |   //刷新事件
583 |   updateEvent() {
584 |     var daysElement = this.arrayfrom(this.container.querySelectorAll('.sc-item'));
585 |     var container = this.container;
586 |     var calendar = this;
587 |     daysElement.forEach(function(v, i) {
588 |       v.onmouseover = function(e) {
589 |         this.classList.add('sc-active-day');
590 |       }
591 |       v.onmouseout = function(e) {
592 |         this.classList.remove('sc-active-day');
593 |       }
594 |       v.onclick = function() {
595 |         calendar.selectDay = v;
596 |         var pre = container.querySelector('.sc-selected');
597 |         if (pre) pre.classList.remove('sc-selected');
598 |         this.classList.add('sc-selected');
599 |         if (typeof(calendar._options.onSelect) === 'function') {
600 |           calendar._options.onSelect(calendar.getSelectedDay());
601 |         }
602 |       }
603 |     })
604 | 
605 |     var selectYear = container.querySelector('.sc-select-year');
606 |     var selectMonth = container.querySelector('.sc-select-month');
607 |     selectYear.onchange = function() {
608 |       var m = selectMonth.value;
609 |       var y = this.value;
610 |       calendar.update(m, y)
611 |     }
612 | 
613 |     selectMonth.onchange = function() {
614 |       var y = selectYear.value;
615 |       var m = this.value;
616 |       calendar.update(m, y)
617 |     }
618 | 
619 |     var yearadd = container.querySelector('.sc-yright');
620 |     var yearsub = container.querySelector('.sc-yleft');
621 |     var monthadd = container.querySelector('.sc-mright');
622 |     var monthsub = container.querySelector('.sc-mleft');
623 | 
624 |     yearadd.onclick = function() {
625 |       var currentyear = selectYear.value;
626 |       if (currentyear < 2099) currentyear++;
627 |       selectYear.value = currentyear;
628 |       calendar.update(this.tmonth, currentyear);
629 |     }
630 |     yearsub.onclick = function() {
631 |       var currentyear = selectYear.value;
632 |       if (currentyear > 1900) currentyear--;
633 |       selectYear.value = currentyear;
634 |       calendar.update(this.tmonth, currentyear);
635 |     }
636 |     monthadd.onclick = function() {
637 |       var currentmonth = selectMonth.value;
638 |       var currentyear = selectYear.value;
639 |       if (currentmonth < 12) currentmonth++;
640 |       else {
641 |         currentmonth = 1;
642 |         selectYear.value = ++currentyear;
643 |       };
644 |       selectMonth.value = currentmonth;
645 |       calendar.update(currentmonth, currentyear);
646 |     }
647 |     monthsub.onclick = function() {
648 |       var currentmonth = selectMonth.value;
649 |       var currentyear = selectYear.value;
650 |       if (currentmonth > 1) currentmonth--;
651 |       else {
652 |         currentmonth = 12;
653 |         selectYear.value = --currentyear;
654 |       }
655 |       selectMonth.value = currentmonth;
656 |       calendar.update(currentmonth, currentyear);
657 |     }
658 | 
659 |     var returntoday = container.querySelector('.sc-return-today');
660 |     returntoday.onclick = function() {
661 |       selectYear.value = calendar.tyear;
662 |       selectMonth.value = calendar.tmonth;
663 |       calendar.update();
664 |     }
665 |   }
666 | 
667 |   //添加标记
668 |   addMark(day, info) {
669 |     this._options.mark[day] = info;
670 |     this.update();
671 |   }
672 | 
673 |   //获取用户点击的日期
674 |   getSelectedDay() {
675 |     var selectYear = this.container.querySelector('.sc-select-year').value;
676 |     var selectMonth = this.container.querySelector('.sc-select-month').value;
677 |     var selectDay = this.selectDay.querySelector('.day').innerHTML;
678 | 
679 |     // 计算当前界面中的其他月份差
680 |     let count = 0;
681 |     if (this.selectDay.classList.contains('sc-othermenth')) {
682 |       if (+selectDay < 15) count++;
683 |       else count--;
684 |     }
685 |     return new Date(selectYear, selectMonth - 1 + count, selectDay);
686 |   }
687 | 
688 |   //设置语言
689 |   setLenguage(language) {
690 |     this._options.language = language;
691 |     var selectYear = this.container.querySelector('.sc-select-year');
692 |     var selectMonth = this.container.querySelector('.sc-select-month');
693 |     this.updateSelect(selectYear.value, selectMonth.value);
694 |     this.update();
695 |   }
696 | 
697 |   //设置是否显示节日
698 |   showFestival(s) {
699 |     this._options.showFestival = s;
700 |     this.update();
701 |   }
702 | 
703 |   //设置是否显示假期
704 |   showHoliday(s) {
705 |     this._options.showHoliday = s;
706 |     this.update();
707 |   }
708 | 
709 |   //设置是否显示节气
710 |   showSolarTerm(s) {
711 |     this._options.showSolarTerm = s;
712 |     this.update();
713 |   }
714 | 
715 |   //设置是否显示阴历节日
716 |   showLunarFestival(s) {
717 |     this._options.showLunarFestival = s;
718 |     this.update();
719 |   }
720 | 
721 |   //设置是否显示阴历日期
722 |   showLunarCalendar(s) {
723 |     this._options.showLunarCalendar = s;
724 |     this.update();
725 |   }
726 | 
727 |   //设置是否显示标记日期
728 |   showMark(s) {
729 |     this._options.showMark = s;
730 |     this.update();
731 |   }
732 |   //将nodelist转为数组
733 | 
734 |   //nodelist转数组
735 |   arrayfrom(nidelist) {
736 |     var array = [];
737 |     [].forEach.call(nidelist, function(v) {
738 |       array.push(v);
739 |     });
740 |     return array;
741 |   }
742 | 
743 |   // get options() {
744 |   //   console.log(this._options);
745 |   // }
746 | }
747 | //时间刷新函数
748 | SimpleCalendar.timeupdate = function() {
749 |   var timespan = document.querySelectorAll('.sc-time');
750 |   var now = new Date();
751 |   var nh = now.getHours();
752 |   var nm = now.getMinutes();
753 |   var ns = now.getSeconds();
754 |   if (nh < 10) nh = '0' + nh;
755 |   if (nm < 10) nm = '0' + nm;
756 |   if (ns < 10) ns = '0' + ns;
757 |   [].forEach.call(timespan, function(v) {
758 |     v.innerHTML = '时间：' + nh + ":" + nm + ':' + ns;
759 |   })
760 | }
761 | //国际化，和一些节日数据，标记数据
762 | SimpleCalendar.prototype.languageData = {
763 |   feativals_CH: {
764 |     '1-1': '元旦',
765 |     '2-14': '情人节',
766 |     '3-8': '妇女节',
767 |     '3-12': '植树节',
768 |     '4-1': '愚人节',
769 |     '4-22': '地球日',
770 |     '5-1': '劳动节',
771 |     '5-4': '青年节',
772 |     '6-1': '儿童节',
773 |     '7-1': '建党节',
774 |     '8-1': '建军节',
775 |     '9-10': '教师节',
776 |     '10-1': '国庆节',
777 |     '12-25': '圣诞节',
778 |   },
779 |   feativals_EN: {
780 |     '1-1': "new year’s day",
781 |     '2-14': "Saint Valentine's Day",
782 |     '3-8': 'international women’s day',
783 |     '3-12': "Arbor Day",
784 |     '4-1': "April Fool's Day",
785 |     '4-22': "Earth Day",
786 |     '5-1': "international labour day",
787 |     '5-4': "Chinese Youth Day",
788 |     '6-1': "Children's Day",
789 |     '7-1': "The party's Day",
790 |     '8-1': "the Army's Day",
791 |     '9-10': "Teachers' Day",
792 |     '10-1': 'National Day',
793 |     '12-25': 'Christmas Day',
794 |   },
795 |   lunarFeatival_CH: {
796 |     '1-1': '春节',
797 |     '2-2': '龙抬头',
798 |     '1-15': '元宵节',
799 |     '5-5': '端午节',
800 |     '8-15': '中秋节',
801 |     '9-9': '重阳节',
802 |     '12-30': '除夕',
803 |   },
804 |   //节气
805 |   solarTerm: {
806 |     '2-3': '立春',
807 |     '5-5': '立夏',
808 |     '8-7': '立秋',
809 |     '11-7': '立冬',
810 |     '2-18': '雨水',
811 |     '5-20': '小满',
812 |     '8-22': '处暑',
813 |     '11-22': '小雪',
814 |     '3-5': '惊蛰',
815 |     '6-5': '芒种',
816 |     '9-7': '白露',
817 |     '12-6': '大雪',
818 |     '3-20': '春分',
819 |     '6-21': '夏至',
820 |     '9-22': '秋分',
821 |     '12-21': '冬至',
822 |     '4-4': '清明',
823 |     '7-6': '小暑',
824 |     '10-8': '寒露',
825 |     '1-5': '小寒',
826 |     '4-19': '谷雨',
827 |     '7-22': '大暑',
828 |     '10-23': '霜降',
829 |     '1-20': '大寒',
830 | 
831 |   },
832 |   days_EN: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
833 |   days_CH: ["一", "二", "三", "四", "五", "六", "日"],
834 |   months_EN: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
835 |   months_CH: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
836 |   vocation: {
837 |     data_2016: ['1-1', '1-2', '1-3', '2-7', '2-8', '2-9', '2-10', '2-11', '2-12', '2-13', '4-2', '4-3', '4-4', '4-30', '5-1', '5-2', '6-9', '6-10', '6-11', '9-15', '9-16', '9-17', , '10-1', '10-2', '10-3', '10-4', '10-5', '10-6', '10-7']
838 |   },
839 | }
840 | 
841 | SimpleCalendar.prototype.tyear = (new Date()).getFullYear();
842 | SimpleCalendar.prototype.tmonth = (new Date()).getMonth() + 1;
843 | SimpleCalendar.prototype.tday = (new Date()).getDate();
844 | 


--------------------------------------------------------------------------------
/javascripts/simple-calendar.js:
--------------------------------------------------------------------------------
  1 | class LunarHelp {
  2 |   constructor(year, month, day) {
  3 |     this.lunarInfo = new Array(0x04bd8, 0x04ae0, 0x0a570, 0x054d5, 0x0d260, 0x0d950, 0x16554, 0x056a0, 0x09ad0, 0x055d2, 0x04ae0, 0x0a5b6, 0x0a4d0, 0x0d250, 0x1d255, 0x0b540, 0x0d6a0, 0x0ada2, 0x095b0, 0x14977, 0x04970, 0x0a4b0, 0x0b4b5, 0x06a50, 0x06d40, 0x1ab54, 0x02b60, 0x09570, 0x052f2, 0x04970, 0x06566, 0x0d4a0, 0x0ea50, 0x06e95, 0x05ad0, 0x02b60, 0x186e3, 0x092e0, 0x1c8d7, 0x0c950, 0x0d4a0, 0x1d8a6, 0x0b550, 0x056a0, 0x1a5b4, 0x025d0, 0x092d0, 0x0d2b2, 0x0a950, 0x0b557, 0x06ca0, 0x0b550, 0x15355, 0x04da0, 0x0a5d0, 0x14573, 0x052d0, 0x0a9a8, 0x0e950, 0x06aa0, 0x0aea6, 0x0ab50, 0x04b60, 0x0aae4, 0x0a570, 0x05260, 0x0f263, 0x0d950, 0x05b57, 0x056a0, 0x096d0, 0x04dd5, 0x04ad0, 0x0a4d0, 0x0d4d4, 0x0d250, 0x0d558, 0x0b540, 0x0b5a0, 0x195a6, 0x095b0, 0x049b0, 0x0a974, 0x0a4b0, 0x0b27a, 0x06a50, 0x06d40, 0x0af46, 0x0ab60, 0x09570, 0x04af5, 0x04970, 0x064b0, 0x074a3, 0x0ea50, 0x06b58, 0x055c0, 0x0ab60, 0x096d5, 0x092e0, 0x0c960, 0x0d954, 0x0d4a0, 0x0da50, 0x07552, 0x056a0, 0x0abb7, 0x025d0, 0x092d0, 0x0cab5, 0x0a950, 0x0b4a0, 0x0baa4, 0x0ad50, 0x055d9, 0x04ba0, 0x0a5b0, 0x15176, 0x052b0, 0x0a930, 0x07954, 0x06aa0, 0x0ad50, 0x05b52, 0x04b60, 0x0a6e6, 0x0a4e0, 0x0d260, 0x0ea65, 0x0d530, 0x05aa0, 0x076a3, 0x096d0, 0x04bd7, 0x04ad0, 0x0a4d0, 0x1d0b6, 0x0d250, 0x0d520, 0x0dd45, 0x0b5a0, 0x056d0, 0x055b2, 0x049b0, 0x0a577, 0x0a4b0, 0x0aa50, 0x1b255, 0x06d20, 0x0ada0);
  4 | 
  5 |     this.nStr1 = new Array('日', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十');
  6 |     this.nStr2 = new Array('初', '十', '廿', '三');
  7 | 
  8 |     var date = new Date(parseInt(year), parseInt(month) - 1, parseInt(day));
  9 | 
 10 |     var i,
 11 |         leap = 0,
 12 |         temp = 0; //天数
 13 |     var baseDate = new Date(1900, 0, 31);
 14 |     var offset = (date - baseDate) / 86400000;
 15 | 
 16 |     //计算年数
 17 |     for (i = 1900; i < 2050 && offset - this.lYearDays(i) > 0; i++) {
 18 |       offset -= this.lYearDays(i);
 19 |     }
 20 | 
 21 |     this.year = i;
 22 |     leap = this.leapMonth(i); //闰哪个月
 23 |     this.isLeap = 0; //0 不是 1是 2是并且计算完成
 24 | 
 25 | 
 26 |     //计算月数
 27 |     for (i = 1; i < 13 && offset > 0; i++) {
 28 |       //闰月
 29 |       if (leap > 0 && i == leap + 1 && this.isLeap == 0) {
 30 |         --i;
 31 |         this.isLeap = 1;
 32 |         temp = this.leapDays(this.year);
 33 |       } else {
 34 |         temp = this.monthDays(this.year, i);
 35 |       }
 36 | 
 37 |       //解除闰月
 38 |       if (this.isLeap == 1 && i == leap + 1) this.isLeap = 2;
 39 | 
 40 |       offset -= temp;
 41 |     }
 42 | 
 43 |     //如果恰好减完了，不是闰月的话月数减1
 44 |     if (offset == 0 && leap > 0 && i == leap + 1) if (this.isLeap) {
 45 |       this.isLeap = 0;
 46 |     } else {
 47 |       this.isLeap = 1;
 48 |       --i;
 49 |     }
 50 | 
 51 |     if (offset < 0) {
 52 |       offset += temp;
 53 |       --i;
 54 |     }
 55 | 
 56 |     this.month = i;
 57 |     //最后剩余的就是日期
 58 |     this.day = offset + 1;
 59 |   }
 60 | 
 61 |   // 获取y年的总天数
 62 |   lYearDays(year) {
 63 |     var i,
 64 |         sum = 0;
 65 |     for (i = 0x8000; i > 0x8; i >>= 1) sum += this.lunarInfo[year - 1900] & i ? 30 : 29;
 66 |     return sum + this.leapDays(year); //最后在加上可能有的闰年的闰月
 67 |   }
 68 | 
 69 |   //获取闰年闰月的天数 闰大月还是小月
 70 |   leapDays(year) {
 71 |     if (this.leapMonth(year)) return this.lunarInfo[year - 1900] & 0x10000 ? 30 : 29;else return 0;
 72 |   }
 73 | 
 74 |   //获取闰年闰哪个月1-12 ,没闰传回 0
 75 |   leapMonth(year) {
 76 |     return this.lunarInfo[year - 1900] & 0xf;
 77 |   }
 78 | 
 79 |   //获取y年m月的总天数 正常月
 80 |   monthDays(year, month) {
 81 |     return this.lunarInfo[year - 1900] & 0x10000 >> month ? 30 : 29;
 82 |   }
 83 | 
 84 |   //中文日期
 85 |   cDay(d) {
 86 |     var s;
 87 | 
 88 |     switch (d) {
 89 |       case 10:
 90 |         s = '初十';
 91 |         break;
 92 |       case 20:
 93 |         s = '二十';
 94 |         break;
 95 |         break;
 96 |       case 30:
 97 |         s = '三十';
 98 |         break;
 99 |         break;
100 |       default:
101 |         s = this.nStr2[Math.floor(d / 10)];
102 |         s += this.nStr1[Math.floor(d) % 10];
103 |     }
104 |     return s;
105 |   }
106 |   //中文月份
107 |   cMonth(m) {
108 |     var s;
109 | 
110 |     switch (m) {
111 |       case 1:
112 |         s = '正月';
113 |         break;
114 |       case 2:
115 |         s = '二月';
116 |         break;
117 |       case 3:
118 |         s = '三月';
119 |         break;
120 |       case 4:
121 |         s = '四月';
122 |         break;
123 |       case 5:
124 |         s = '五月';
125 |         break;
126 |       case 6:
127 |         s = '六月';
128 |         break;
129 |       case 7:
130 |         s = '七月';
131 |         break;
132 |       case 8:
133 |         s = '八月';
134 |         break;
135 |       case 9:
136 |         s = '九月';
137 |         break;
138 |       case 10:
139 |         s = '十月';
140 |         break;
141 |       case 11:
142 |         s = '十一月';
143 |         break;
144 |       case 12:
145 |         s = '十二月';
146 |         break;
147 |       default:
148 |         break;
149 |     }
150 |     return s;
151 |   }
152 | 
153 |   //获得阴历日期 字符串
154 |   getLunarDay() {
155 |     return cMonth(this.month) + cDay(this.day);
156 |   }
157 |   //获得阴历日期某一天的中文
158 |   getLunarDayName() {
159 | 
160 |     if (this.day == 1) return this.cMonth(this.month);
161 |     return this.cDay(this.day);
162 |   }
163 |   //获取阴历日期的数字
164 |   getLunarDayNum() {
165 |     return {
166 |       day: this.day,
167 |       month: this.month
168 |     };
169 |   }
170 | 
171 | }
172 | 
173 | class SimpleCalendar {
174 |   //构造函数
175 |   constructor(query, options) {
176 |     //默认配置
177 |     this._defaultOptions = {
178 |       width: '500px',
179 |       height: '500px',
180 |       language: 'CH', //语言
181 |       showLunarCalendar: true, //阴历
182 |       showHoliday: true, //休假
183 |       showFestival: true, //节日
184 |       showLunarFestival: true, //农历节日
185 |       showSolarTerm: true, //节气
186 |       showMark: true, //标记
187 |       onSelect: () => {},
188 |       timeRange: {
189 |         startYear: 1900,
190 |         endYear: 2049
191 |       },
192 |       timeZone: "", //时区
193 |       mark: {
194 |         '2016-5-5': '上学'
195 |       },
196 |       theme: {
197 |         changeAble: false,
198 |         weeks: {
199 |           backgroundColor: '#FBEC9C',
200 |           fontColor: '#4A4A4A',
201 |           fontSize: '20px'
202 |         },
203 |         days: {
204 |           backgroundColor: '#ffffff',
205 |           fontColor: '#565555',
206 |           fontSize: '24px'
207 |         },
208 |         todaycolor: 'orange',
209 |         activeSelectColor: 'orange',
210 |         invalidDays: '#C1C0C0'
211 |       }
212 | 
213 |       //容器
214 |     };this.container = document.querySelector(query);
215 | 
216 |     this._defaultOptions.width = this.container.style.offsetWidth;
217 |     this._defaultOptions.height = this.container.style.offsetHeight;
218 | 
219 |     //this._options = Object.assign({}, this._defaultOptions, options);
220 | 
221 |     //得到最终配置
222 |     this._options = this.optionAssign(this._defaultOptions, options);
223 | 
224 |     this.create();
225 |   }
226 | 
227 |   //用B更新A的属性 并返回结果
228 |   optionAssign(optionsA, optionsB) {
229 |     for (var key in optionsB) {
230 |       if (typeof optionsA[key] === 'function') {
231 |         if (typeof optionsB[key] === 'function') {
232 |           optionsA[key] = optionsB[key];
233 |         } else {
234 |           console.warn(`${key} must be a function`);
235 |         }
236 |       } else if (typeof optionsA[key] !== 'object') optionsA[key] = optionsB[key];else {
237 |         optionsA[key] = this.optionAssign(optionsA[key], optionsB[key]);
238 |       }
239 |     }
240 |     return optionsA;
241 |   }
242 | 
243 |   //生成日历样式
244 |   create() {
245 |     var root = this.container;
246 |     root.innerHTML = '<div class="sc-header"> </div> <div class="sc-body"> </div>';
247 |     root.style.width = this._options.width;
248 |     root.style.height = this._options.height;
249 |     root.className = 'sc-calendar';
250 |     var header = root.querySelector('.sc-header');
251 |     var scbody = root.querySelector('.sc-body');
252 |     //actions
253 |     header.innerHTML = header.innerHTML + '<div class="sc-actions">' + '      <div class="sc-yleft">' + '        &lsaquo;</div>' + '      <select class="sc-select-year" name="">' + '      </select>' + '      <div class="sc-yright">&rsaquo;</div>' + '  </div>';
254 |     header.innerHTML = header.innerHTML + '<div class="sc-actions">' + '    <div class="sc-mleft">' + '      &lsaquo;</div>' + '    <select class="sc-select-month" name="">' + '    </select>' + '    <div class="sc-mright">&rsaquo;</div>' + '</div>';
255 |     header.innerHTML = header.innerHTML + '<div class="sc-actions"><span class="sc-return-today ">返回今天</span></div>';
256 |     header.innerHTML = header.innerHTML + '<div class="sc-actions"><span class="sc-time"></span></div>';
257 |     scbody.innerHTML = ' <div class="sc-week"> </div> <div class="sc-days"> </div>';
258 |     var week = scbody.querySelector('.sc-week');
259 |     var days = scbody.querySelector('.sc-days');
260 |     for (var i = 0; i < 7; i++) {
261 |       week.innerHTML = week.innerHTML + ' <div class="sc-week-item"></div>';
262 |     }
263 |     for (var i = 0; i < 35; i++) {
264 |       days.innerHTML = days.innerHTML + '<div class="sc-item"><div class="day"></div><div class="lunar-day"></div></div>';
265 |     }
266 |     //添加下拉框数据
267 |     this.updateSelect(this.tyear, this.tmonth);
268 |     //刷新日历
269 |     this.update();
270 |     //时间刷新
271 |     self.setInterval('SimpleCalendar.timeupdate()', 200);
272 |   }
273 | 
274 |   //刷新日历
275 |   update(month = this.tmonth, year = this.tyear) {
276 |     this.updateSize();
277 |     this.updateWeek();
278 |     this.addData(year, month);
279 |     this.updateHoliday(year, month);
280 |     this.updateMark(year, month);
281 |     this.updateFestival(year, month);
282 |     this.updateEvent();
283 |     this.updateTheme(this._options.theme);
284 |   }
285 | 
286 |   //调整大小
287 |   updateSize(width = this._options.width, height = this._options.height) {
288 |     //将大小赋值给option
289 |     this._options.width = width;
290 |     this._options.height = height;
291 | 
292 |     this.container.style.width = width;
293 |     this.container.style.height = height;
294 | 
295 |     //根据长度和宽度大小调整适合的样式
296 |     if (parseInt(width) < 500) {
297 |       var actions = this.arrayfrom(this.container.querySelectorAll('.sc-actions'));
298 |       actions.forEach(function (v, i) {
299 |         v.classList.add('sc-actions-big');
300 |       });
301 |     } else {
302 |       var actions = this.arrayfrom(this.container.querySelectorAll('.sc-actions'));
303 |       actions.forEach(function (v, i) {
304 |         v.classList.remove('sc-actions-big');
305 |       });
306 |     }
307 |     if (parseInt(height) < 400) {
308 |       var items = this.arrayfrom(this.container.querySelectorAll('.sc-item'));
309 |       var weeks = this.arrayfrom(this.container.querySelectorAll('.sc-week-item'));
310 |       items.forEach(function (v, i) {
311 |         v.querySelector('.day').classList.add('sc-item-small');
312 |       });
313 |       weeks.forEach(function (v, i) {
314 |         v.classList.add('sc-item-small');
315 |       });
316 |     } else {
317 |       var items = this.arrayfrom(this.container.querySelectorAll('.sc-item'));
318 |       var weeks = this.arrayfrom(this.container.querySelectorAll('.sc-week-item'));
319 |       items.forEach(function (v, i) {
320 |         v.querySelector('.day').classList.remove('sc-item-small');
321 |       });
322 |       weeks.forEach(function (v, i) {
323 |         v.classList.remove('sc-item-small');
324 |       });
325 |     }
326 |   }
327 | 
328 |   //刷新下拉框 只有在初始化和设置语言后才会更新
329 |   updateSelect(year, month) {
330 |     //下拉框
331 |     var selectYear = this.container.querySelector('.sc-select-year');
332 |     var selectMonth = this.container.querySelector('.sc-select-month');
333 |     selectYear.innerHTML = '';
334 |     for (var i = this._options.timeRange.startYear; i < this._options.timeRange.endYear + 1; i++) {
335 |       selectYear.innerHTML += '<option value="' + i + '">' + i + '</option>';
336 |     }
337 |     selectMonth.innerHTML = '';
338 |     for (var i = 0; i < 12; i++) {
339 |       var data = this.languageData['months_' + this._options.language];
340 |       selectMonth.innerHTML += '<option value="' + (i + 1) + '">' + data[i] + '</option>';
341 |     }
342 | 
343 |     selectYear.value = year;
344 |     selectMonth.value = month;
345 |   }
346 | 
347 |   //刷新星期
348 |   updateWeek() {
349 |     var weeks = this.arrayfrom(this.container.querySelectorAll('.sc-week-item'));
350 |     var data = this.languageData['days_' + this._options.language];
351 |     if (!data) {
352 |       console.error('language error!');
353 |     }
354 |     weeks.forEach(function (v, i) {
355 |       v.innerHTML = data[i];
356 |     });
357 |   }
358 | 
359 |   //添加阳历阴历数据
360 |   addData(year, month) {
361 |     var daysElement = this.arrayfrom(this.container.querySelectorAll('.sc-item'));
362 |     var day = new Date(year, month - 1, 1);
363 |     var week = day.getDay();
364 |     if (week == 0) week = 7;
365 | 
366 |     //计算得到第一个格子的日期
367 |     var thispageStart = new Date(Date.parse(day) - (week - 1) * 24 * 3600 * 1000);
368 | 
369 |     //对每一个格子遍历
370 |     for (var i = 0; i < 35; i++) {
371 |       daysElement[i].className = 'sc-item';
372 |       var theday = new Date(Date.parse(thispageStart) + i * 24 * 3600 * 1000);
373 |       var writeyear = theday.getFullYear();
374 |       var writeday = theday.getDate();
375 |       var writemonth = theday.getMonth() + 1;
376 |       if (writemonth != month) {
377 |         daysElement[i].classList.add('sc-othermenth');
378 |       }
379 |       daysElement[i].querySelector('.day').innerHTML = writeday;
380 |       //判断是否添加阴历
381 |       if (this._options.showLunarCalendar) {
382 |         daysElement[i].querySelector('.lunar-day').innerHTML = new LunarHelp(writeyear, writemonth, writeday).getLunarDayName();
383 |       } else {
384 |         daysElement[i].querySelector('.lunar-day').innerHTML = '';
385 |         daysElement[i].classList.add('item-nolunar');
386 |       }
387 | 
388 |       //添加today样式
389 |       if (this.tyear == writeyear && this.tday == writeday && this.tmonth == writemonth) {
390 |         this.selectDay = daysElement[i];
391 |         daysElement[i].classList.add("sc-today");
392 |       }
393 |     }
394 |   }
395 | 
396 |   //刷新标记日期
397 |   updateMark(year, month) {
398 |     var options = this._options;
399 |     if (options.showMark) {
400 |       var daysElement = this.arrayfrom(this.container.querySelectorAll('.sc-item'));
401 |       var currentmonth = month - 1;
402 |       //取得节日数据
403 |       var data = options.mark;
404 |       if (data) {
405 |         daysElement.forEach(function (v, i) {
406 | 
407 |           var day = +v.querySelector('.day').innerHTML;
408 |           if (day == 1) currentmonth++;
409 | 
410 |           if (data[year + '-' + currentmonth + '-' + day]) {
411 |             v.classList.add('sc-mark');
412 | 
413 |             // 增强标签效果
414 |             var reminder = v.querySelector('.lunar-day');
415 |             reminder.innerText = data[year + '-' + currentmonth + '-' + day];
416 | 
417 |             v.title = data[year + '-' + currentmonth + '-' + day];
418 |           } else {
419 |             v.classList.remove('sc-mark');
420 |             v.title = '';
421 |           }
422 |         });
423 |       }
424 |     }
425 |   }
426 | 
427 |   //刷新节日数据
428 |   updateFestival(year, month) {
429 |     var options = this._options;
430 |     var daysElement = this.arrayfrom(this.container.querySelectorAll('.sc-item'));
431 |     var currentmonth = month - 1;
432 |     //取得节日数据
433 |     var data = this.languageData['feativals_' + this._options.language];
434 |     var lunardata = this.languageData['lunarFeatival_' + this._options.language];
435 |     var solarTermdata = this.languageData['solarTerm'];
436 |     if (!data) {
437 |       console.error('language error!');
438 |     }
439 |     daysElement.forEach(function (v, i) {
440 |       var day = +v.querySelector('.day').innerHTML;
441 |       if (day == 1) currentmonth++;
442 | 
443 |       //24节气
444 |       if (options.showSolarTerm) {
445 |         if (solarTermdata[currentmonth + '-' + day]) {
446 |           v.querySelector('.lunar-day').innerHTML = solarTermdata[currentmonth + '-' + day];
447 |           v.classList.add('sc-festival');
448 |         }
449 |       }
450 | 
451 |       //国际节日
452 |       if (options.showFestival) {
453 |         if (data[currentmonth + '-' + day]) {
454 |           v.querySelector('.lunar-day').innerHTML = data[currentmonth + '-' + day];
455 |           v.classList.add('sc-festival');
456 |         }
457 |       }
458 | 
459 |       //阴历节日
460 |       if (lunardata && options.showLunarFestival) {
461 |         var lunar = new LunarHelp(year, currentmonth, day).getLunarDayNum();
462 |         if (lunardata[lunar.month + '-' + lunar.day]) {
463 |           v.querySelector('.lunar-day').innerHTML = lunardata[lunar.month + '-' + lunar.day];
464 |           v.classList.add('sc-festival');
465 |         }
466 |       }
467 |     });
468 |   }
469 | 
470 |   //刷新假期 休假
471 |   updateHoliday(year, month) {
472 | 
473 |     var options = this._options;
474 |     if (options.showHoliday) {
475 |       var daysElement = this.arrayfrom(this.container.querySelectorAll('.sc-item'));
476 |       var currentmonth = month - 1;
477 |       //取得节日数据
478 |       var data = this.languageData.vocation['data_' + year];
479 |       if (data) {
480 |         daysElement.forEach(function (v, i) {
481 |           var day = +v.querySelector('.day').innerHTML;
482 |           if (day == 1) currentmonth++;
483 |           //国际节日
484 |           if (data.indexOf(currentmonth + '-' + day) > 0) {
485 |             v.classList.add('sc-vocation');
486 |           }
487 |         });
488 |       }
489 |     }
490 |   }
491 | 
492 |   //刷新主题
493 |   updateTheme(theme) {
494 |     if (this._options.theme.changeAble) {
495 |       var daytheme = theme.days;
496 |       var weektheme = theme.weeks;
497 |       var weeks = this.arrayfrom(this.container.querySelectorAll('.sc-week-item'));
498 |       var days = this.arrayfrom(this.container.querySelectorAll('.sc-item'));
499 |       weeks.forEach(function (v, i) {
500 |         v.style.backgroundColor = weektheme.backgroundColor;
501 |         v.style.fontSize = weektheme.fontSize;
502 |         v.style.color = weektheme.fontColor;
503 |       });
504 |       days.forEach(function (v, i) {
505 |         if (!v.classList.contains('sc-today')) {
506 |           v.style.backgroundColor = daytheme.backgroundColor;
507 |           v.querySelector('.day').style.color = daytheme.fontColor;
508 |         } else {
509 |           v.style.backgroundColor = theme.todaycolor;
510 |         }
511 |         v.querySelector('.day').style.fontSize = daytheme.fontSize;
512 |       });
513 |       var Calendar = this;
514 |       //active border
515 |       days.forEach(function (v, i) {
516 |         v.onmouseover = function (e) {
517 |           this.style.borderColor = theme.activeSelectColor;
518 |           this.style.borderWidth = '1px';
519 |         };
520 |         v.onmouseout = function (e) {
521 |           this.style.borderColor = '#F1EBE4';
522 |           this.style.borderWidth = '0 0 1px 1px';
523 |         };
524 |       });
525 |     }
526 |   }
527 | 
528 |   //刷新事件
529 |   updateEvent() {
530 |     var daysElement = this.arrayfrom(this.container.querySelectorAll('.sc-item'));
531 |     var container = this.container;
532 |     var calendar = this;
533 |     daysElement.forEach(function (v, i) {
534 |       v.onmouseover = function (e) {
535 |         this.classList.add('sc-active-day');
536 |       };
537 |       v.onmouseout = function (e) {
538 |         this.classList.remove('sc-active-day');
539 |       };
540 |       v.onclick = function () {
541 |         calendar.selectDay = v;
542 |         var pre = container.querySelector('.sc-selected');
543 |         if (pre) pre.classList.remove('sc-selected');
544 |         this.classList.add('sc-selected');
545 |         if (typeof calendar._options.onSelect === 'function') {
546 |           calendar._options.onSelect(calendar.getSelectedDay());
547 |         }
548 |       };
549 |     });
550 | 
551 |     var selectYear = container.querySelector('.sc-select-year');
552 |     var selectMonth = container.querySelector('.sc-select-month');
553 |     selectYear.onchange = function () {
554 |       var m = selectMonth.value;
555 |       var y = this.value;
556 |       calendar.update(m, y);
557 |     };
558 | 
559 |     selectMonth.onchange = function () {
560 |       var y = selectYear.value;
561 |       var m = this.value;
562 |       calendar.update(m, y);
563 |     };
564 | 
565 |     var yearadd = container.querySelector('.sc-yright');
566 |     var yearsub = container.querySelector('.sc-yleft');
567 |     var monthadd = container.querySelector('.sc-mright');
568 |     var monthsub = container.querySelector('.sc-mleft');
569 | 
570 |     yearadd.onclick = function () {
571 |       var currentyear = selectYear.value;
572 |       if (currentyear < 2099) currentyear++;
573 |       selectYear.value = currentyear;
574 |       calendar.update(this.tmonth, currentyear);
575 |     };
576 |     yearsub.onclick = function () {
577 |       var currentyear = selectYear.value;
578 |       if (currentyear > 1900) currentyear--;
579 |       selectYear.value = currentyear;
580 |       calendar.update(this.tmonth, currentyear);
581 |     };
582 |     monthadd.onclick = function () {
583 |       var currentmonth = selectMonth.value;
584 |       var currentyear = selectYear.value;
585 |       if (currentmonth < 12) currentmonth++;else {
586 |         currentmonth = 1;
587 |         selectYear.value = ++currentyear;
588 |       };
589 |       selectMonth.value = currentmonth;
590 |       calendar.update(currentmonth, currentyear);
591 |     };
592 |     monthsub.onclick = function () {
593 |       var currentmonth = selectMonth.value;
594 |       var currentyear = selectYear.value;
595 |       if (currentmonth > 1) currentmonth--;else {
596 |         currentmonth = 12;
597 |         selectYear.value = --currentyear;
598 |       }
599 |       selectMonth.value = currentmonth;
600 |       calendar.update(currentmonth, currentyear);
601 |     };
602 | 
603 |     var returntoday = container.querySelector('.sc-return-today');
604 |     returntoday.onclick = function () {
605 |       selectYear.value = calendar.tyear;
606 |       selectMonth.value = calendar.tmonth;
607 |       calendar.update();
608 |     };
609 |   }
610 | 
611 |   //添加标记
612 |   addMark(day, info) {
613 |     this._options.mark[day] = info;
614 |     this.update();
615 |   }
616 | 
617 |   //获取用户点击的日期
618 |   getSelectedDay() {
619 |     var selectYear = this.container.querySelector('.sc-select-year').value;
620 |     var selectMonth = this.container.querySelector('.sc-select-month').value;
621 |     var selectDay = this.selectDay.querySelector('.day').innerHTML;
622 | 
623 |     // 计算当前界面中的其他月份差
624 |     let count = 0;
625 |     if (this.selectDay.classList.contains('sc-othermenth')) {
626 |       if (+selectDay < 15) count++;else count--;
627 |     }
628 |     return new Date(selectYear, selectMonth - 1 + count, selectDay);
629 |   }
630 | 
631 |   //设置语言
632 |   setLenguage(language) {
633 |     this._options.language = language;
634 |     var selectYear = this.container.querySelector('.sc-select-year');
635 |     var selectMonth = this.container.querySelector('.sc-select-month');
636 |     this.updateSelect(selectYear.value, selectMonth.value);
637 |     this.update();
638 |   }
639 | 
640 |   //设置是否显示节日
641 |   showFestival(s) {
642 |     this._options.showFestival = s;
643 |     this.update();
644 |   }
645 | 
646 |   //设置是否显示假期
647 |   showHoliday(s) {
648 |     this._options.showHoliday = s;
649 |     this.update();
650 |   }
651 | 
652 |   //设置是否显示节气
653 |   showSolarTerm(s) {
654 |     this._options.showSolarTerm = s;
655 |     this.update();
656 |   }
657 | 
658 |   //设置是否显示阴历节日
659 |   showLunarFestival(s) {
660 |     this._options.showLunarFestival = s;
661 |     this.update();
662 |   }
663 | 
664 |   //设置是否显示阴历日期
665 |   showLunarCalendar(s) {
666 |     this._options.showLunarCalendar = s;
667 |     this.update();
668 |   }
669 | 
670 |   //设置是否显示标记日期
671 |   showMark(s) {
672 |     this._options.showMark = s;
673 |     this.update();
674 |   }
675 |   //将nodelist转为数组
676 | 
677 |   //nodelist转数组
678 |   arrayfrom(nidelist) {
679 |     var array = [];
680 |     [].forEach.call(nidelist, function (v) {
681 |       array.push(v);
682 |     });
683 |     return array;
684 |   }
685 | 
686 |   // get options() {
687 |   //   console.log(this._options);
688 |   // }
689 | }
690 | //时间刷新函数
691 | SimpleCalendar.timeupdate = function () {
692 |   var timespan = document.querySelectorAll('.sc-time');
693 |   var now = new Date();
694 |   var nh = now.getHours();
695 |   var nm = now.getMinutes();
696 |   var ns = now.getSeconds();
697 |   if (nh < 10) nh = '0' + nh;
698 |   if (nm < 10) nm = '0' + nm;
699 |   if (ns < 10) ns = '0' + ns;
700 |   [].forEach.call(timespan, function (v) {
701 |     v.innerHTML = '时间：' + nh + ":" + nm + ':' + ns;
702 |   });
703 | };
704 | //国际化，和一些节日数据，标记数据
705 | SimpleCalendar.prototype.languageData = {
706 |   feativals_CH: {
707 |     '1-1': '元旦',
708 |     '2-14': '情人节',
709 |     '3-8': '妇女节',
710 |     '3-12': '植树节',
711 |     '4-1': '愚人节',
712 |     '4-22': '地球日',
713 |     '5-1': '劳动节',
714 |     '5-4': '青年节',
715 |     '6-1': '儿童节',
716 |     '7-1': '建党节',
717 |     '8-1': '建军节',
718 |     '9-10': '教师节',
719 |     '10-1': '国庆节',
720 |     '12-25': '圣诞节'
721 |   },
722 |   feativals_EN: {
723 |     '1-1': "new year’s day",
724 |     '2-14': "Saint Valentine's Day",
725 |     '3-8': 'international women’s day',
726 |     '3-12': "Arbor Day",
727 |     '4-1': "April Fool's Day",
728 |     '4-22': "Earth Day",
729 |     '5-1': "international labour day",
730 |     '5-4': "Chinese Youth Day",
731 |     '6-1': "Children's Day",
732 |     '7-1': "The party's Day",
733 |     '8-1': "the Army's Day",
734 |     '9-10': "Teachers' Day",
735 |     '10-1': 'National Day',
736 |     '12-25': 'Christmas Day'
737 |   },
738 |   lunarFeatival_CH: {
739 |     '1-1': '春节',
740 |     '2-2': '龙抬头',
741 |     '1-15': '元宵节',
742 |     '5-5': '端午节',
743 |     '8-15': '中秋节',
744 |     '9-9': '重阳节',
745 |     '12-30': '除夕'
746 |   },
747 |   //节气
748 |   solarTerm: {
749 |     '2-3': '立春',
750 |     '5-5': '立夏',
751 |     '8-7': '立秋',
752 |     '11-7': '立冬',
753 |     '2-18': '雨水',
754 |     '5-20': '小满',
755 |     '8-22': '处暑',
756 |     '11-22': '小雪',
757 |     '3-5': '惊蛰',
758 |     '6-5': '芒种',
759 |     '9-7': '白露',
760 |     '12-6': '大雪',
761 |     '3-20': '春分',
762 |     '6-21': '夏至',
763 |     '9-22': '秋分',
764 |     '12-21': '冬至',
765 |     '4-4': '清明',
766 |     '7-6': '小暑',
767 |     '10-8': '寒露',
768 |     '1-5': '小寒',
769 |     '4-19': '谷雨',
770 |     '7-22': '大暑',
771 |     '10-23': '霜降',
772 |     '1-20': '大寒'
773 | 
774 |   },
775 |   days_EN: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
776 |   days_CH: ["一", "二", "三", "四", "五", "六", "日"],
777 |   months_EN: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
778 |   months_CH: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
779 |   vocation: {
780 |     data_2016: ['1-1', '1-2', '1-3', '2-7', '2-8', '2-9', '2-10', '2-11', '2-12', '2-13', '4-2', '4-3', '4-4', '4-30', '5-1', '5-2', '6-9', '6-10', '6-11', '9-15', '9-16', '9-17',, '10-1', '10-2', '10-3', '10-4', '10-5', '10-6', '10-7']
781 |   }
782 | };
783 | 
784 | SimpleCalendar.prototype.tyear = new Date().getFullYear();
785 | SimpleCalendar.prototype.tmonth = new Date().getMonth() + 1;
786 | SimpleCalendar.prototype.tday = new Date().getDate();
787 | 


--------------------------------------------------------------------------------
/params.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "Simple-calendar",
3 |   "tagline": "一个简单的日历插件",
4 |   "body": "# Simple-Calendar开发文档\r\n\r\n\r\n\r\n---\r\n##获取Simple-Calendar\r\n从GitHub上下载 [链接](https://github.com/Lixucheng/Simple-Calendar)\r\n\r\n##引入资源\r\n\r\n使用日历插件前首先要引用资源：JS CSS\r\n```javascript\r\n<link rel=\"stylesheet\" type=\"text/css\" href=\"css/simple-calendar.css\">\r\n\r\n<script type=\"text/jacascrip\" src=\"js/simple-calendar.js\"></script>\r\n```\r\n\r\n##初始化一个日历\r\n\r\n首先为calendar准备一个容器，可以设置大小，也可以在options中设置，不设置的话自动设为默认\r\n```html\r\n  <div id='container'></div>\r\n```\r\n```html\r\n  <script>\r\n    var myCalendar = new SimpleCalendar('#container');\r\n  </script>\r\n```\r\n这样一个日历就诞生了 ^-^\r\n\r\n##配置项说明\r\n```javascript\r\nvar options = {\r\n      width: '500px',\r\n      height: '500px',\r\n      language: 'CH', //语言\r\n      showLunarCalendar: true, //阴历\r\n      showHoliday: true, //休假\r\n      showFestival: true, //节日\r\n      showLunarFestival: true, //农历节日\r\n      showSolarTerm: true, //节气\r\n      showMark: true, //标记\r\n      timeRange: {\r\n        startYear: 1900,\r\n        endYear: 2049\r\n      },\r\n      mark: {\r\n        '2016-5-5': '上学'\r\n      },\r\n      theme: {\r\n        changeAble: false,\r\n        weeks: {\r\n          backgroundColor: '#FBEC9C',\r\n          fontColor: '#4A4A4A',\r\n          fontSize: '20px',\r\n        },\r\n        days: {\r\n          backgroundColor: '#ffffff',\r\n          fontColor: '#565555',\r\n          fontSize: '24px'\r\n        },\r\n        todaycolor: 'orange',\r\n        activeSelectColor: 'orange',\r\n      }\r\n    }\r\n```\r\n### 国际化\r\n> language：\r\n语言的话目前只支持中文和英文，分别对应'CH','EN'\r\n\r\n如果想要加更多的语言或者更改现在的显示，可以直接更改languageData内容\r\n\r\n### 节日显示配置\r\n```javascript\r\nshowLunarCalendar: true, //是否显示阴历日期\r\nshowHoliday: true,       //是否显示休假休假\r\nshowFestival: true,      //是否显示国际节日\r\nshowLunarFestival: true, //是否显示农历节日\r\nshowSolarTerm: true,     //是否显示节气\r\nshowMark: true,          //是否显示标记日期\r\n\r\n```\r\n\r\n### 时间范围\r\n这个时间范围设置的是下拉框中的年数范围\r\n```javascript\r\ntimeRange: {\r\n    startYear: 1900,\r\n    endYear: 2049\r\n}\r\n```\r\n### 标记日期\r\n标记日期配置只有在 showMark 为 true 时才会生效\r\n\r\n```javascript\r\nmark: {\r\n        '2016-5-5': '上学'\r\n      }\r\n```\r\n这样就会在日历的对应日期上面添加标记，当鼠标停留时显示输入的信息\r\n\r\n### 主题配置\r\n\r\n\r\n```javascript\r\n theme: {\r\n        changeAble: false,\r\n        weeks: {\r\n          backgroundColor: '#FBEC9C',\r\n          fontColor: '#4A4A4A',\r\n          fontSize: '20px',\r\n        },\r\n        days: {\r\n          backgroundColor: '#ffffff',\r\n          fontColor: '#565555',\r\n          fontSize: '24px'\r\n        },\r\n        todaycolor: 'orange',\r\n        activeSelectColor: 'orange',\r\n      }\r\n```\r\n主题配置只有在changeAble 为 true 时才会生效\r\nweeks 设置的是星期一栏的主题，分别对应背景颜色，字体颜色，字体大小\r\ndays  设置的是日期的主题，参数同上\r\ntodaycolor 设置的是当天的日期背景颜色\r\nactiveSelectColor 设置的是鼠标滑过事件对应日期的边框颜色\r\n\r\n## 事件接口说明\r\n\r\n```javascript\r\nmyCalendar.updateSize('500px', '500px');\r\nmyCalendar.addMark('2016-3-7', 'test');\r\nmyCalendar.setLanguage('EN')\r\nmyCalendar.showFestival(false);\r\nmyCalendar.showLunarCalendar(false);\r\nmyCalendar.showHoliday(false);\r\nmyCalendar.showSolarTerm(false);\r\nmyCalendar.showLunarFestival(false);\r\nmyCalendar.showMark(false);\r\n```\r\n\r\n### updateSize(width,height)\r\n>调整日历大小，会自动根据大小调整对应的样式\r\n\r\n### addMark(day, info)\r\n>day   是一个可以确定一个日期的字符串\r\ninfo  是要显示的信息\r\n\r\n### setLenguage(languageStr)\r\n>设置语言，目前支持的语言有'CH','EN'\r\n如果想要增加语言，请在languageData中修改\r\n\r\n### 其他\r\n\r\n```javascript\r\n//关闭或者显示国际节日\r\nshowFestival(false); \r\n//关闭或者显示阴历日期\r\nshowLunarCalendar(false);\r\n//关闭或者显示假期\r\nshowHoliday(false);\r\n//关闭或者显示二十四节气\r\nshowSolarTerm(false);\r\n//关闭或者显示阴历节日\r\nshowLunarFestival(false);\r\n//关闭或者显示标记\r\nshowMark(false)\r\n```\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n",
5 |   "note": "Don't delete this file! It's used internally to help with page regeneration."
6 | }


--------------------------------------------------------------------------------
/stylesheets/print.css:
--------------------------------------------------------------------------------
  1 | html, body, div, span, applet, object, iframe,
  2 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  3 | a, abbr, acronym, address, big, cite, code,
  4 | del, dfn, em, img, ins, kbd, q, s, samp,
  5 | small, strike, strong, sub, sup, tt, var,
  6 | b, u, i, center,
  7 | dl, dt, dd, ol, ul, li,
  8 | fieldset, form, label, legend,
  9 | table, caption, tbody, tfoot, thead, tr, th, td,
 10 | article, aside, canvas, details, embed,
 11 | figure, figcaption, footer, header, hgroup,
 12 | menu, nav, output, ruby, section, summary,
 13 | time, mark, audio, video {
 14 |   padding: 0;
 15 |   margin: 0;
 16 |   font: inherit;
 17 |   font-size: 100%;
 18 |   vertical-align: baseline;
 19 |   border: 0;
 20 | }
 21 | /* HTML5 display-role reset for older browsers */
 22 | article, aside, details, figcaption, figure,
 23 | footer, header, hgroup, menu, nav, section {
 24 |   display: block;
 25 | }
 26 | body {
 27 |   line-height: 1;
 28 | }
 29 | ol, ul {
 30 |   list-style: none;
 31 | }
 32 | blockquote, q {
 33 |   quotes: none;
 34 | }
 35 | blockquote:before, blockquote:after,
 36 | q:before, q:after {
 37 |   content: '';
 38 |   content: none;
 39 | }
 40 | table {
 41 |   border-spacing: 0;
 42 |   border-collapse: collapse;
 43 | }
 44 | body {
 45 |   font-family: 'Helvetica Neue', Helvetica, Arial, serif;
 46 |   font-size: 13px;
 47 |   line-height: 1.5;
 48 |   color: #000;
 49 | }
 50 | 
 51 | a {
 52 |   font-weight: bold;
 53 |   color: #d5000d;
 54 | }
 55 | 
 56 | header {
 57 |   padding-top: 35px;
 58 |   padding-bottom: 10px;
 59 | }
 60 | 
 61 | header h1 {
 62 |   font-size: 48px;
 63 |   font-weight: bold;
 64 |   line-height: 1.2;
 65 |   color: #303030;
 66 |   letter-spacing: -1px;
 67 | }
 68 | 
 69 | header h2 {
 70 |   font-size: 24px;
 71 |   font-weight: normal;
 72 |   line-height: 1.3;
 73 |   color: #aaa;
 74 |   letter-spacing: -1px;
 75 | }
 76 | #downloads {
 77 |   display: none;
 78 | }
 79 | #main_content {
 80 |   padding-top: 20px;
 81 | }
 82 | 
 83 | code, pre {
 84 |   margin-bottom: 30px;
 85 |   font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal;
 86 |   font-size: 12px;
 87 |   color: #222;
 88 | }
 89 | 
 90 | code {
 91 |   padding: 0 3px;
 92 | }
 93 | 
 94 | pre {
 95 |   padding: 20px;
 96 |   overflow: auto;
 97 |   border: solid 1px #ddd;
 98 | }
 99 | pre code {
100 |   padding: 0;
101 | }
102 | 
103 | ul, ol, dl {
104 |   margin-bottom: 20px;
105 | }
106 | 
107 | 
108 | /* COMMON STYLES */
109 | 
110 | table {
111 |   width: 100%;
112 |   border: 1px solid #ebebeb;
113 | }
114 | 
115 | th {
116 |   font-weight: 500;
117 | }
118 | 
119 | td {
120 |   font-weight: 300;
121 |   text-align: center;
122 |   border: 1px solid #ebebeb;
123 | }
124 | 
125 | form {
126 |   padding: 20px;
127 |   background: #f2f2f2;
128 | 
129 | }
130 | 
131 | 
132 | /* GENERAL ELEMENT TYPE STYLES */
133 | 
134 | h1 {
135 |   font-size: 2.8em;
136 | }
137 | 
138 | h2 {
139 |   margin-bottom: 8px;
140 |   font-size: 22px;
141 |   font-weight: bold;
142 |   color: #303030;
143 | }
144 | 
145 | h3 {
146 |   margin-bottom: 8px;
147 |   font-size: 18px;
148 |   font-weight: bold;
149 |   color: #d5000d;
150 | }
151 | 
152 | h4 {
153 |   font-size: 16px;
154 |   font-weight: bold;
155 |   color: #303030;
156 | }
157 | 
158 | h5 {
159 |   font-size: 1em;
160 |   color: #303030;
161 | }
162 | 
163 | h6 {
164 |   font-size: .8em;
165 |   color: #303030;
166 | }
167 | 
168 | p {
169 |   margin-bottom: 20px;
170 |   font-weight: 300;
171 | }
172 | 
173 | a {
174 |   text-decoration: none;
175 | }
176 | 
177 | p a {
178 |   font-weight: 400;
179 | }
180 | 
181 | blockquote {
182 |   padding: 0 0 0 30px;
183 |   margin-bottom: 20px;
184 |   font-size: 1.6em;
185 |   border-left: 10px solid #e9e9e9;
186 | }
187 | 
188 | ul li {
189 |   padding-left: 20px;
190 |   list-style-position: inside;
191 |   list-style: disc;
192 | }
193 | 
194 | ol li {
195 |   padding-left: 3px;
196 |   list-style-position: inside;
197 |   list-style: decimal;
198 | }
199 | 
200 | dl dd {
201 |   font-style: italic;
202 |   font-weight: 100;
203 | }
204 | 
205 | footer {
206 |   padding-top: 20px;
207 |   padding-bottom: 30px;
208 |   margin-top: 40px;
209 |   font-size: 13px;
210 |   color: #aaa;
211 | }
212 | 
213 | footer a {
214 |   color: #666;
215 | }
216 | 
217 | /* MISC */
218 | .clearfix:after {
219 |   display: block;
220 |   height: 0;
221 |   clear: both;
222 |   visibility: hidden;
223 |   content: '.';
224 | }
225 | 
226 | .clearfix {display: inline-block;}
227 | * html .clearfix {height: 1%;}
228 | .clearfix {display: block;}
229 | 


--------------------------------------------------------------------------------
/stylesheets/simple-calendar.css:
--------------------------------------------------------------------------------
  1 | .sc-calendar {
  2 |   width: 500px;
  3 |   height: 500px;
  4 |   text-align: center;
  5 |   font-family: "Microsoft Yahei";
  6 |   color: #4A4A4A;
  7 |   box-shadow: 2px 4px 5px #bdbdbd;
  8 |   border-width: 1px 0 0 1px;
  9 |   border-color: #E6E4E0;
 10 |   border-style: solid;
 11 |   float: left;
 12 |   margin-right: 20px;
 13 |   -moz-user-select: none;
 14 |   /*火狐*/
 15 |   -webkit-user-select: none;
 16 |   /*webkit浏览器*/
 17 |   -ms-user-select: none;
 18 |   /*IE10*/
 19 |   user-select: none;
 20 |   -webkit-text-size-adjust: none;
 21 |   font-size: 16px;
 22 | }
 23 | 
 24 | .sc-header {
 25 |   height: 35px;
 26 |   border-bottom: 0;
 27 | }
 28 | .sc-body {
 29 |   height: 93%;
 30 |   height: calc(100% - 35px);
 31 |   clear: both;
 32 |   box-shadow: 2px 4px 5px #bdbdbd;
 33 | }
 34 | .sc-week {
 35 |   height: 12%;
 36 |   font-weight: 400;
 37 |   font-size: 20px;
 38 |   color: #4A4A4A;
 39 |   margin-right: -8px;
 40 | }
 41 | .sc-days {
 42 |   height: 88%;
 43 |   margin-right: -8px;
 44 | }
 45 | .sc-item {
 46 |   position: relative;
 47 |   height: 20%;
 48 |   height: calc(20% + 1px);
 49 |   float: left;
 50 |   font-weight: 600;
 51 |   color: #565555;
 52 |   width: 14.285%;
 53 |   padding-top: 10px;
 54 |   background-color: #ffffff;
 55 |   border-width: 1px;
 56 |   border-color: #F1EBE4;
 57 |   border-style: solid;
 58 |   box-sizing: border-box;
 59 |   margin-top: -1px;
 60 |   margin-left: -1px;
 61 | }
 62 | .item-nolunar {
 63 |   padding-top: 20px;
 64 | }
 65 | .sc-item:nth-child(7n) .day, .sc-item:nth-child(7n+6) .day {
 66 |   color: rgba(224, 8, 8, 0.74);
 67 | }
 68 | .sc-vocation {
 69 |   background-color: #FFEBEC;
 70 | }
 71 | .sc-mark{
 72 |   background-color: #FF005B;
 73 |   color: #FFFFFF;
 74 | }
 75 | .sc-vocation:before {
 76 |   content: '休';
 77 |   display: block;
 78 |   position: absolute;
 79 |   font-size: 0.7em;
 80 |   width: 1.2em;
 81 |   font-weight: 100;
 82 |   color: white;
 83 |   background-color: #E00808;
 84 |   margin-top: -10px;
 85 | }
 86 | .sc-othermenth {
 87 |   color: #C1C0C0 !important;
 88 | }
 89 | .sc-othermenth .day, .sc-othermenth .lunar-day {
 90 |   color: #C1C0C0 !important;
 91 | }
 92 | .sc-active-day, .sc-selected {
 93 |   border-color:  orange;
 94 |   z-index: 1;
 95 | }
 96 | .sc-today {
 97 |   background-color: orange;
 98 |   color: white;
 99 |   border: 1px solid orange;
100 | }
101 | .sc-item .day {
102 |   font-size: 1.5em;
103 | }
104 | .sc-today .day {
105 |   color: white !important;
106 | }
107 | .sc-item .lunar-day {
108 |   font-size: 10px;
109 |   font-weight: normal;
110 |   overflow: hidden;
111 |   text-overflow: ellipsis;
112 | }
113 | .sc-festival .lunar-day {
114 |   color: #E00808;
115 | }
116 | 
117 | /*.sc-item:last-child, .sc-item:nth-child(7n) {
118 |   border-width: 0 1px 1px 1px;
119 | }*/
120 | 
121 | .sc-week-item {
122 |   height: 100%;
123 |   padding-top: 2%;
124 |   float: left;
125 |   width: 14.285%;
126 |   background-color: #FBEC9C;
127 |   border-width: 1px;
128 |   border-color: #ECE3B1;
129 |   margin-left: -1px;
130 |   border-style: solid;
131 |   box-sizing: border-box;
132 |   overflow: hidden;
133 |   text-overflow: ellipsis;
134 | }
135 | .sc-item-small{
136 |   font-size: 10px !important;
137 | }
138 | .sc-week-item:last-child {
139 |   border-width: 1px 1px 1px 1px;
140 | }
141 | .sc-week-item:nth-child(7n), .sc-week-item:nth-child(7n+6) {
142 |   color: rgba(224, 8, 8, 0.74)!important;
143 | }
144 | .sc-actions {
145 |   float: left;
146 |   width: 25%;
147 |   padding: 5px;
148 |   height: 100%;
149 |   box-sizing: border-box;
150 | }
151 | .sc-actions:last-child {
152 |   float: right;
153 | }
154 | .sc-actions-big{
155 |   width: 50%;
156 | }
157 | @media screen and (max-width : 500px){
158 | .sc-actions{
159 |   width: 50%;
160 | }
161 | }
162 | .sc-header select {
163 |   border-color: rgba(0, 0, 0, 0);
164 |   padding: 0.2em;
165 |   -webkit-appearance: none;
166 |   -moz-appearance: none;
167 |   appearance: none;
168 |   font-family: "Microsoft Yahei";
169 |   color: #606060;
170 |   font-size: 13px ;
171 | }
172 | .sc-header input {
173 |   border-color: rgba(0, 0, 0, 0);
174 |   padding: 0.2em;
175 |   -webkit-appearance: none;
176 |   -moz-appearance: none;
177 |   appearance: none;
178 |   font-family: "Microsoft Yahei";
179 |   color: #606060;
180 | }
181 | .sc-actions div {
182 |   display: inline-block;
183 |   /*border: 1px solid #ccc;*/
184 |   vertical-align: bottom;
185 |   width: 20px;
186 |   padding-bottom: 5px;
187 |   font-size: 1.5em;
188 |   line-height: 0.9em;
189 | }
190 | .sc-return-today {
191 |   display: block;
192 |   background-color: #F5F5F9;
193 |   border-radius: 2px;
194 |   /* border: 1px solid #ccc; */
195 |   width: 60px;
196 |   font-size: 0.8em;
197 |   padding: 0.3em;
198 |   margin: auto;
199 | }
200 | 
201 | .sc-time {
202 |   display: block;
203 |   margin-top: 3px;
204 |   font-size: 0.8em;
205 | }
206 | 


--------------------------------------------------------------------------------
/stylesheets/stylesheet.css:
--------------------------------------------------------------------------------
  1 | /*! normalize.css v3.0.2 | MIT License | git.io/normalize */
  2 | 
  3 | /**
  4 |  * 1. Set default font family to sans-serif.
  5 |  * 2. Prevent iOS text size adjust after orientation change, without disabling
  6 |  *    user zoom.
  7 |  */
  8 | 
  9 | html {
 10 |   font-family: sans-serif; /* 1 */
 11 |   -webkit-text-size-adjust: 100%; /* 2 */
 12 |   -ms-text-size-adjust: 100%; /* 2 */
 13 | }
 14 | 
 15 | /**
 16 |  * Remove default margin.
 17 |  */
 18 | 
 19 | body {
 20 |   margin: 0;
 21 | }
 22 | 
 23 | /* HTML5 display definitions
 24 |    ========================================================================== */
 25 | 
 26 | /**
 27 |  * Correct `block` display not defined for any HTML5 element in IE 8/9.
 28 |  * Correct `block` display not defined for `details` or `summary` in IE 10/11
 29 |  * and Firefox.
 30 |  * Correct `block` display not defined for `main` in IE 11.
 31 |  */
 32 | 
 33 | article,
 34 | aside,
 35 | details,
 36 | figcaption,
 37 | figure,
 38 | footer,
 39 | header,
 40 | hgroup,
 41 | main,
 42 | menu,
 43 | nav,
 44 | section,
 45 | summary {
 46 |   display: block;
 47 | }
 48 | 
 49 | /**
 50 |  * 1. Correct `inline-block` display not defined in IE 8/9.
 51 |  * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 52 |  */
 53 | 
 54 | audio,
 55 | canvas,
 56 | progress,
 57 | video {
 58 |   display: inline-block; /* 1 */
 59 |   vertical-align: baseline; /* 2 */
 60 | }
 61 | 
 62 | /**
 63 |  * Prevent modern browsers from displaying `audio` without controls.
 64 |  * Remove excess height in iOS 5 devices.
 65 |  */
 66 | 
 67 | audio:not([controls]) {
 68 |   display: none;
 69 |   height: 0;
 70 | }
 71 | 
 72 | /**
 73 |  * Address `[hidden]` styling not present in IE 8/9/10.
 74 |  * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 75 |  */
 76 | 
 77 | [hidden],
 78 | template {
 79 |   display: none;
 80 | }
 81 | 
 82 | /* Links
 83 |    ========================================================================== */
 84 | 
 85 | /**
 86 |  * Remove the gray background color from active links in IE 10.
 87 |  */
 88 | 
 89 | a {
 90 |   background-color: transparent;
 91 | }
 92 | 
 93 | /**
 94 |  * Improve readability when focused and also mouse hovered in all browsers.
 95 |  */
 96 | 
 97 | a:active,
 98 | a:hover {
 99 |   outline: 0;
100 | }
101 | 
102 | /* Text-level semantics
103 |    ========================================================================== */
104 | 
105 | /**
106 |  * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
107 |  */
108 | 
109 | abbr[title] {
110 |   border-bottom: 1px dotted;
111 | }
112 | 
113 | /**
114 |  * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
115 |  */
116 | 
117 | b,
118 | strong {
119 |   font-weight: bold;
120 | }
121 | 
122 | /**
123 |  * Address styling not present in Safari and Chrome.
124 |  */
125 | 
126 | dfn {
127 |   font-style: italic;
128 | }
129 | 
130 | /**
131 |  * Address variable `h1` font-size and margin within `section` and `article`
132 |  * contexts in Firefox 4+, Safari, and Chrome.
133 |  */
134 | 
135 | h1 {
136 |   margin: 0.67em 0;
137 |   font-size: 2em;
138 | }
139 | 
140 | /**
141 |  * Address styling not present in IE 8/9.
142 |  */
143 | 
144 | mark {
145 |   color: #000;
146 |   background: #ff0;
147 | }
148 | 
149 | /**
150 |  * Address inconsistent and variable font size in all browsers.
151 |  */
152 | 
153 | small {
154 |   font-size: 80%;
155 | }
156 | 
157 | /**
158 |  * Prevent `sub` and `sup` affecting `line-height` in all browsers.
159 |  */
160 | 
161 | sub,
162 | sup {
163 |   position: relative;
164 |   font-size: 75%;
165 |   line-height: 0;
166 |   vertical-align: baseline;
167 | }
168 | 
169 | sup {
170 |   top: -0.5em;
171 | }
172 | 
173 | sub {
174 |   bottom: -0.25em;
175 | }
176 | 
177 | /* Embedded content
178 |    ========================================================================== */
179 | 
180 | /**
181 |  * Remove border when inside `a` element in IE 8/9/10.
182 |  */
183 | 
184 | img {
185 |   border: 0;
186 | }
187 | 
188 | /**
189 |  * Correct overflow not hidden in IE 9/10/11.
190 |  */
191 | 
192 | svg:not(:root) {
193 |   overflow: hidden;
194 | }
195 | 
196 | /* Grouping content
197 |    ========================================================================== */
198 | 
199 | /**
200 |  * Address margin not present in IE 8/9 and Safari.
201 |  */
202 | 
203 | figure {
204 |   margin: 1em 40px;
205 | }
206 | 
207 | /**
208 |  * Address differences between Firefox and other browsers.
209 |  */
210 | 
211 | hr {
212 |   height: 0;
213 |   -moz-box-sizing: content-box;
214 |   box-sizing: content-box;
215 | }
216 | 
217 | /**
218 |  * Contain overflow in all browsers.
219 |  */
220 | 
221 | pre {
222 |   overflow: auto;
223 | }
224 | 
225 | /**
226 |  * Address odd `em`-unit font size rendering in all browsers.
227 |  */
228 | 
229 | code,
230 | kbd,
231 | pre,
232 | samp {
233 |   font-family: monospace, monospace;
234 |   font-size: 1em;
235 | }
236 | 
237 | /* Forms
238 |    ========================================================================== */
239 | 
240 | /**
241 |  * Known limitation: by default, Chrome and Safari on OS X allow very limited
242 |  * styling of `select`, unless a `border` property is set.
243 |  */
244 | 
245 | /**
246 |  * 1. Correct color not being inherited.
247 |  *    Known issue: affects color of disabled elements.
248 |  * 2. Correct font properties not being inherited.
249 |  * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
250 |  */
251 | 
252 | button,
253 | input,
254 | optgroup,
255 | select,
256 | textarea {
257 |   margin: 0; /* 3 */
258 |   font: inherit; /* 2 */
259 |   color: inherit; /* 1 */
260 | }
261 | 
262 | /**
263 |  * Address `overflow` set to `hidden` in IE 8/9/10/11.
264 |  */
265 | 
266 | button {
267 |   overflow: visible;
268 | }
269 | 
270 | /**
271 |  * Address inconsistent `text-transform` inheritance for `button` and `select`.
272 |  * All other form control elements do not inherit `text-transform` values.
273 |  * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
274 |  * Correct `select` style inheritance in Firefox.
275 |  */
276 | 
277 | button,
278 | select {
279 |   text-transform: none;
280 | }
281 | 
282 | /**
283 |  * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
284 |  *    and `video` controls.
285 |  * 2. Correct inability to style clickable `input` types in iOS.
286 |  * 3. Improve usability and consistency of cursor style between image-type
287 |  *    `input` and others.
288 |  */
289 | 
290 | button,
291 | html input[type="button"], /* 1 */
292 | input[type="reset"],
293 | input[type="submit"] {
294 |   -webkit-appearance: button; /* 2 */
295 |   cursor: pointer; /* 3 */
296 | }
297 | 
298 | /**
299 |  * Re-set default cursor for disabled elements.
300 |  */
301 | 
302 | button[disabled],
303 | html input[disabled] {
304 |   cursor: default;
305 | }
306 | 
307 | /**
308 |  * Remove inner padding and border in Firefox 4+.
309 |  */
310 | 
311 | button::-moz-focus-inner,
312 | input::-moz-focus-inner {
313 |   padding: 0;
314 |   border: 0;
315 | }
316 | 
317 | /**
318 |  * Address Firefox 4+ setting `line-height` on `input` using `!important` in
319 |  * the UA stylesheet.
320 |  */
321 | 
322 | input {
323 |   line-height: normal;
324 | }
325 | 
326 | /**
327 |  * It's recommended that you don't attempt to style these elements.
328 |  * Firefox's implementation doesn't respect box-sizing, padding, or width.
329 |  *
330 |  * 1. Address box sizing set to `content-box` in IE 8/9/10.
331 |  * 2. Remove excess padding in IE 8/9/10.
332 |  */
333 | 
334 | input[type="checkbox"],
335 | input[type="radio"] {
336 |   box-sizing: border-box; /* 1 */
337 |   padding: 0; /* 2 */
338 | }
339 | 
340 | /**
341 |  * Fix the cursor style for Chrome's increment/decrement buttons. For certain
342 |  * `font-size` values of the `input`, it causes the cursor style of the
343 |  * decrement button to change from `default` to `text`.
344 |  */
345 | 
346 | input[type="number"]::-webkit-inner-spin-button,
347 | input[type="number"]::-webkit-outer-spin-button {
348 |   height: auto;
349 | }
350 | 
351 | /**
352 |  * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
353 |  * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
354 |  *    (include `-moz` to future-proof).
355 |  */
356 | 
357 | input[type="search"] {
358 |   -webkit-box-sizing: content-box; /* 2 */
359 |   -moz-box-sizing: content-box;
360 |   box-sizing: content-box;
361 |   -webkit-appearance: textfield; /* 1 */
362 | }
363 | 
364 | /**
365 |  * Remove inner padding and search cancel button in Safari and Chrome on OS X.
366 |  * Safari (but not Chrome) clips the cancel button when the search input has
367 |  * padding (and `textfield` appearance).
368 |  */
369 | 
370 | input[type="search"]::-webkit-search-cancel-button,
371 | input[type="search"]::-webkit-search-decoration {
372 |   -webkit-appearance: none;
373 | }
374 | 
375 | /**
376 |  * Define consistent border, margin, and padding.
377 |  */
378 | 
379 | fieldset {
380 |   padding: 0.35em 0.625em 0.75em;
381 |   margin: 0 2px;
382 |   border: 1px solid #c0c0c0;
383 | }
384 | 
385 | /**
386 |  * 1. Correct `color` not being inherited in IE 8/9/10/11.
387 |  * 2. Remove padding so people aren't caught out if they zero out fieldsets.
388 |  */
389 | 
390 | legend {
391 |   padding: 0; /* 2 */
392 |   border: 0; /* 1 */
393 | }
394 | 
395 | /**
396 |  * Remove default vertical scrollbar in IE 8/9/10/11.
397 |  */
398 | 
399 | textarea {
400 |   overflow: auto;
401 | }
402 | 
403 | /**
404 |  * Don't inherit the `font-weight` (applied by a rule above).
405 |  * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
406 |  */
407 | 
408 | optgroup {
409 |   font-weight: bold;
410 | }
411 | 
412 | /* Tables
413 |    ========================================================================== */
414 | 
415 | /**
416 |  * Remove most spacing between table cells.
417 |  */
418 | 
419 | table {
420 |   border-spacing: 0;
421 |   border-collapse: collapse;
422 | }
423 | 
424 | td,
425 | th {
426 |   padding: 0;
427 | }
428 | 
429 | /* LAYOUT STYLES */
430 | body {
431 |   font-family: 'Helvetica Neue', Helvetica, Arial, serif;
432 |   font-size: 15px;
433 |   font-weight: 400;
434 |   line-height: 1.5;
435 |   color: #666;
436 |   background: #fafafa url(../images/body-bg.jpg) 0 0 repeat;
437 | }
438 | 
439 | p {
440 |   margin-top: 0;
441 | }
442 | 
443 | a {
444 |   color: #2879d0;
445 | }
446 | a:hover {
447 |   color: #2268b2;
448 | }
449 | 
450 | header {
451 |   padding-top: 40px;
452 |   padding-bottom: 40px;
453 |   font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif;
454 |   background: #2e7bcf url(../images/header-bg.jpg) 0 0 repeat-x;
455 |   border-bottom: solid 1px #275da1;
456 | }
457 | 
458 | header h1 {
459 |   width: 540px;
460 |   margin-top: 0;
461 |   margin-bottom: 0.2em;
462 |   font-size: 72px;
463 |   font-weight: normal;
464 |   line-height: 1;
465 |   color: #fff;
466 |   letter-spacing: -1px;
467 | }
468 | 
469 | header h2 {
470 |   width: 540px;
471 |   margin-top: 0;
472 |   margin-bottom: 0;
473 |   font-size: 26px;
474 |   font-weight: normal;
475 |   line-height: 1.3;
476 |   color: #9ddcff;
477 |   letter-spacing: 0;
478 | }
479 | 
480 | .inner {
481 |   position: relative;
482 |   width: 940px;
483 |   margin: 0 auto;
484 | }
485 | 
486 | #content-wrapper {
487 |   padding-top: 30px;
488 |   border-top: solid 1px #fff;
489 | }
490 | 
491 | #main-content {
492 |   float: left;
493 |   width: 690px;
494 | }
495 | 
496 | #main-content img {
497 |   max-width: 100%;
498 | }
499 | 
500 | aside#sidebar {
501 |   float: right;
502 |   width: 200px;
503 |   min-height: 504px;
504 |   padding-left: 20px;
505 |   font-size: 12px;
506 |   line-height: 1.3;
507 |   background: transparent url(../images/sidebar-bg.jpg) 0 0 no-repeat;
508 | }
509 | 
510 | aside#sidebar p.repo-owner,
511 | aside#sidebar p.repo-owner a {
512 |   font-weight: bold;
513 | }
514 | 
515 | #downloads {
516 |   margin-bottom: 40px;
517 | }
518 | 
519 | a.button {
520 |   width: 134px;
521 |   height: 58px;
522 |   padding-top: 22px;
523 |   padding-left: 68px;
524 |   font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif;
525 |   font-size: 23px;
526 |   line-height: 1.2;
527 |   color: #fff;
528 | }
529 | a.button small {
530 |   display: block;
531 |   font-size: 11px;
532 | }
533 | header a.button {
534 |   position: absolute;
535 |   top: 0;
536 |   right: 0;
537 |   background: transparent url(../images/github-button.png) 0 0 no-repeat;
538 | }
539 | aside a.button {
540 |   display: block;
541 |   width: 138px;
542 |   padding-left: 64px;
543 |   margin-bottom: 20px;
544 |   font-size: 21px;
545 |   background: transparent url(../images/download-button.png) 0 0 no-repeat;
546 | }
547 | 
548 | code, pre {
549 |   margin-bottom: 30px;
550 |   font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace;
551 |   font-size: 13px;
552 |   color: #222;
553 | }
554 | 
555 | code {
556 |   padding: 0 3px;
557 |   background-color: #f2f8fc;
558 |   border: solid 1px #dbe7f3;
559 | }
560 | 
561 | pre {
562 |   padding: 20px;
563 |   overflow: auto;
564 |   text-shadow: none;
565 |   background: #fff;
566 |   border: solid 1px #f2f2f2;
567 | }
568 | pre code {
569 |   padding: 0;
570 |   color: #2879d0;
571 |   background-color: #fff;
572 |   border: none;
573 | }
574 | 
575 | ul, ol, dl {
576 |   margin-bottom: 20px;
577 | }
578 | 
579 | 
580 | /* COMMON STYLES */
581 | 
582 | hr {
583 |   height: 0;
584 |   margin-top: 1em;
585 |   margin-bottom: 1em;
586 |   border: 0;
587 |   border-top: solid 1px #ddd;
588 | }
589 | 
590 | table {
591 |   width: 100%;
592 |   border: 1px solid #ebebeb;
593 | }
594 | 
595 | th {
596 |   font-weight: 500;
597 | }
598 | 
599 | td {
600 |   font-weight: 300;
601 |   text-align: center;
602 |   border: 1px solid #ebebeb;
603 | }
604 | 
605 | form {
606 |   padding: 20px;
607 |   background: #f2f2f2;
608 | 
609 | }
610 | 
611 | 
612 | /* GENERAL ELEMENT TYPE STYLES */
613 | 
614 | #main-content h1 {
615 |   margin-top: 0;
616 |   margin-bottom: 0;
617 |   font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif;
618 |   font-size: 2.8em;
619 |   font-weight: normal;
620 |   color: #474747;
621 |   text-indent: 6px;
622 |   letter-spacing: -1px;
623 | }
624 | 
625 | #main-content h1:before {
626 |   padding-right: 0.3em;
627 |   margin-left: -0.9em;
628 |   color: #9ddcff;
629 |   content: "/";
630 | }
631 | 
632 | #main-content h2 {
633 |   margin-bottom: 8px;
634 |   font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif;
635 |   font-size: 22px;
636 |   font-weight: bold;
637 |   color: #474747;
638 |   text-indent: 4px;
639 | }
640 | #main-content h2:before {
641 |   padding-right: 0.3em;
642 |   margin-left: -1.5em;
643 |   content: "//";
644 |   color: #9ddcff;
645 | }
646 | 
647 | #main-content h3 {
648 |   margin-top: 24px;
649 |   margin-bottom: 8px;
650 |   font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif;
651 |   font-size: 18px;
652 |   font-weight: bold;
653 |   color: #474747;
654 |   text-indent: 3px;
655 | }
656 | 
657 | #main-content h3:before {
658 |   padding-right: 0.3em;
659 |   margin-left: -2em;
660 |   content: "///";
661 |   color: #9ddcff;
662 | }
663 | 
664 | #main-content h4 {
665 |   margin-bottom: 8px;
666 |   font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif;
667 |   font-size: 15px;
668 |   font-weight: bold;
669 |   color: #474747;
670 |   text-indent: 3px;
671 | }
672 | 
673 | h4:before {
674 |   padding-right: 0.3em;
675 |   margin-left: -2.8em;
676 |   content: "////";
677 |   color: #9ddcff;
678 | }
679 | 
680 | #main-content h5 {
681 |   margin-bottom: 8px;
682 |   font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif;
683 |   font-size: 14px;
684 |   color: #474747;
685 |   text-indent: 3px;
686 | }
687 | h5:before {
688 |   padding-right: 0.3em;
689 |   margin-left: -3.2em;
690 |   content: "/////";
691 |   color: #9ddcff;
692 | }
693 | 
694 | #main-content h6 {
695 |   margin-bottom: 8px;
696 |   font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif;
697 |   font-size: .8em;
698 |   color: #474747;
699 |   text-indent: 3px;
700 | }
701 | h6:before {
702 |   padding-right: 0.3em;
703 |   margin-left: -3.7em;
704 |   content: "//////";
705 |   color: #9ddcff;
706 | }
707 | 
708 | p {
709 |   margin-bottom: 20px;
710 | }
711 | 
712 | a {
713 |   text-decoration: none;
714 | }
715 | 
716 | p a {
717 |   font-weight: 400;
718 | }
719 | 
720 | blockquote {
721 |   padding: 0 0 0 30px;
722 |   margin-bottom: 20px;
723 |   font-size: 1.6em;
724 |   border-left: 10px solid #e9e9e9;
725 | }
726 | 
727 | ul {
728 |   list-style-position: inside;
729 |   list-style: disc;
730 |   padding-left: 20px;
731 | }
732 | 
733 | ol {
734 |   list-style-position: inside;
735 |   list-style: decimal;
736 |   padding-left: 3px;
737 | }
738 | 
739 | dl dd {
740 |   font-style: italic;
741 |   font-weight: 100;
742 | }
743 | 
744 | footer {
745 |   padding-top: 20px;
746 |   padding-bottom: 30px;
747 |   margin-top: 40px;
748 |   font-size: 13px;
749 |   color: #aaa;
750 |   background: transparent url('../images/hr.png') 0 0 no-repeat;
751 | }
752 | 
753 | footer a {
754 |   color: #666;
755 | }
756 | footer a:hover {
757 |   color: #444;
758 | }
759 | 
760 | /* MISC */
761 | .clearfix:after {
762 |   display: block;
763 |   height: 0;
764 |   clear: both;
765 |   visibility: hidden;
766 |   content: '.';
767 | }
768 | 
769 | .clearfix {display: inline-block;}
770 | * html .clearfix {height: 1%;}
771 | .clearfix {display: block;}
772 | 
773 | /* #Media Queries
774 | ================================================== */
775 | 
776 | /* Smaller than standard 960 (devices and browsers) */
777 | @media only screen and (max-width: 959px) { }
778 | 
779 | /* Tablet Portrait size to standard 960 (devices and browsers) */
780 | @media only screen and (min-width: 768px) and (max-width: 959px) {
781 |   .inner {
782 |     width: 740px;
783 |   }
784 |   header h1, header h2 {
785 |     width: 340px;
786 |   }
787 |   header h1 {
788 |     font-size: 60px;
789 |   }
790 |   header h2 {
791 |     font-size: 30px;
792 |   }
793 |   #main-content {
794 |     width: 490px;
795 |   }
796 |   #main-content h1:before,
797 |   #main-content h2:before,
798 |   #main-content h3:before,
799 |   #main-content h4:before,
800 |   #main-content h5:before,
801 |   #main-content h6:before {
802 |     padding-right: 0;
803 |     margin-left: 0;
804 |     content: none;
805 |   }
806 | }
807 | 
808 | /* All Mobile Sizes (devices and browser) */
809 | @media only screen and (max-width: 767px) {
810 |   .inner {
811 |     width: 93%;
812 |   }
813 |   header {
814 |     padding: 20px 0;
815 |   }
816 |   header .inner {
817 |     position: relative;
818 |   }
819 |   header h1, header h2 {
820 |     width: 100%;
821 |   }
822 |   header h1 {
823 |     font-size: 48px;
824 |   }
825 |   header h2 {
826 |     font-size: 24px;
827 |   }
828 |   header a.button {
829 |     position: relative;
830 |     display: inline-block;
831 |     width: auto;
832 |     height: auto;
833 |     padding: 5px 10px;
834 |     margin-top: 15px;
835 |     font-size: 13px;
836 |     line-height: 1;
837 |     color: #2879d0;
838 |     text-align: center;
839 |     background-color: #9ddcff;
840 |     background-image: none;
841 |     border-radius: 5px;
842 |     -moz-border-radius: 5px;
843 |     -webkit-border-radius: 5px;
844 |   }
845 |   header a.button small {
846 |     display: inline;
847 |     font-size: 13px;
848 |   }
849 |   #main-content,
850 |   aside#sidebar {
851 |     float: none;
852 |     width: 100% ! important;
853 |   }
854 |   aside#sidebar {
855 |     min-height: 0;
856 |     padding: 20px 0;
857 |     margin-top: 20px;
858 |     background-image: none;
859 |     border-top: solid 1px #ddd;
860 |   }
861 |   aside#sidebar a.button {
862 |     display: none;
863 |   }
864 |   #main-content h1:before,
865 |   #main-content h2:before,
866 |   #main-content h3:before,
867 |   #main-content h4:before,
868 |   #main-content h5:before,
869 |   #main-content h6:before {
870 |     padding-right: 0;
871 |     margin-left: 0;
872 |     content: none;
873 |   }
874 | }
875 | 
876 | /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
877 | @media only screen and (min-width: 480px) and (max-width: 767px) { }
878 | 
879 | /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
880 | @media only screen and (max-width: 479px) { }
881 | 
882 | 


--------------------------------------------------------------------------------