simple-calendar-es6.js 24 KB

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