Bez popisu

simpleCalendar.js 24KB

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