jquery.calendar.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455
  1. /**
  2. * jQuery EasyUI 1.5.2
  3. *
  4. * Copyright (c) 2009-2017 www.jeasyui.com. All rights reserved.
  5. *
  6. * Licensed under the freeware license: http://www.jeasyui.com/license_freeware.php
  7. * To use it on other terms please contact us: info@jeasyui.com
  8. *
  9. */
  10. /**
  11. * calendar - jQuery EasyUI
  12. *
  13. */
  14. (function($){
  15. function setSize(target, param){
  16. var opts = $.data(target, 'calendar').options;
  17. var t = $(target);
  18. if (param){
  19. $.extend(opts, {
  20. width: param.width,
  21. height: param.height
  22. });
  23. }
  24. t._size(opts, t.parent());
  25. t.find('.calendar-body')._outerHeight(t.height() - t.find('.calendar-header')._outerHeight());
  26. if (t.find('.calendar-menu').is(':visible')){
  27. showSelectMenus(target);
  28. }
  29. }
  30. function init(target){
  31. $(target).addClass('calendar').html(
  32. '<div class="calendar-header">' +
  33. '<div class="calendar-nav calendar-prevmonth"></div>' +
  34. '<div class="calendar-nav calendar-nextmonth"></div>' +
  35. '<div class="calendar-nav calendar-prevyear"></div>' +
  36. '<div class="calendar-nav calendar-nextyear"></div>' +
  37. '<div class="calendar-title">' +
  38. '<span class="calendar-text"></span>' +
  39. '</div>' +
  40. '</div>' +
  41. '<div class="calendar-body">' +
  42. '<div class="calendar-menu">' +
  43. '<div class="calendar-menu-year-inner">' +
  44. '<span class="calendar-nav calendar-menu-prev"></span>' +
  45. '<span><input class="calendar-menu-year" type="text"></input></span>' +
  46. '<span class="calendar-nav calendar-menu-next"></span>' +
  47. '</div>' +
  48. '<div class="calendar-menu-month-inner">' +
  49. '</div>' +
  50. '</div>' +
  51. '</div>'
  52. );
  53. $(target).bind('_resize', function(e,force){
  54. if ($(this).hasClass('easyui-fluid') || force){
  55. setSize(target);
  56. }
  57. return false;
  58. });
  59. }
  60. function bindEvents(target){
  61. var opts = $.data(target, 'calendar').options;
  62. var menu = $(target).find('.calendar-menu');
  63. menu.find('.calendar-menu-year').unbind('.calendar').bind('keypress.calendar', function(e){
  64. if (e.keyCode == 13){
  65. setDate(true);
  66. }
  67. });
  68. $(target).unbind('.calendar').bind('mouseover.calendar', function(e){
  69. var t = toTarget(e.target);
  70. if (t.hasClass('calendar-nav') || t.hasClass('calendar-text') || (t.hasClass('calendar-day') && !t.hasClass('calendar-disabled'))){
  71. t.addClass('calendar-nav-hover');
  72. }
  73. }).bind('mouseout.calendar', function(e){
  74. var t = toTarget(e.target);
  75. if (t.hasClass('calendar-nav') || t.hasClass('calendar-text') || (t.hasClass('calendar-day') && !t.hasClass('calendar-disabled'))){
  76. t.removeClass('calendar-nav-hover');
  77. }
  78. }).bind('click.calendar', function(e){
  79. var t = toTarget(e.target);
  80. if (t.hasClass('calendar-menu-next') || t.hasClass('calendar-nextyear')){
  81. showYear(1);
  82. } else if (t.hasClass('calendar-menu-prev') || t.hasClass('calendar-prevyear')){
  83. showYear(-1);
  84. } else if (t.hasClass('calendar-menu-month')){
  85. menu.find('.calendar-selected').removeClass('calendar-selected');
  86. t.addClass('calendar-selected');
  87. setDate(true);
  88. } else if (t.hasClass('calendar-prevmonth')){
  89. showMonth(-1);
  90. } else if (t.hasClass('calendar-nextmonth')){
  91. showMonth(1);
  92. } else if (t.hasClass('calendar-text')){
  93. if (menu.is(':visible')){
  94. menu.hide();
  95. } else {
  96. showSelectMenus(target);
  97. }
  98. } else if (t.hasClass('calendar-day')){
  99. if (t.hasClass('calendar-disabled')){return}
  100. var oldValue = opts.current;
  101. t.closest('div.calendar-body').find('.calendar-selected').removeClass('calendar-selected');
  102. t.addClass('calendar-selected');
  103. var parts = t.attr('abbr').split(',');
  104. var y = parseInt(parts[0]);
  105. var m = parseInt(parts[1]);
  106. var d = parseInt(parts[2]);
  107. opts.current = new Date(y, m-1, d);
  108. opts.onSelect.call(target, opts.current);
  109. if (!oldValue || oldValue.getTime() != opts.current.getTime()){
  110. opts.onChange.call(target, opts.current, oldValue);
  111. }
  112. if (opts.year != y || opts.month != m){
  113. opts.year = y;
  114. opts.month = m;
  115. show(target);
  116. }
  117. }
  118. });
  119. function toTarget(t){
  120. var day = $(t).closest('.calendar-day');
  121. if (day.length){
  122. return day;
  123. } else {
  124. return $(t);
  125. }
  126. }
  127. function setDate(hideMenu){
  128. var menu = $(target).find('.calendar-menu');
  129. var year = menu.find('.calendar-menu-year').val();
  130. var month = menu.find('.calendar-selected').attr('abbr');
  131. if (!isNaN(year)){
  132. opts.year = parseInt(year);
  133. opts.month = parseInt(month);
  134. show(target);
  135. }
  136. if (hideMenu){menu.hide()}
  137. }
  138. function showYear(delta){
  139. opts.year += delta;
  140. show(target);
  141. menu.find('.calendar-menu-year').val(opts.year);
  142. }
  143. function showMonth(delta){
  144. opts.month += delta;
  145. if (opts.month > 12){
  146. opts.year++;
  147. opts.month = 1;
  148. } else if (opts.month < 1){
  149. opts.year--;
  150. opts.month = 12;
  151. }
  152. show(target);
  153. menu.find('td.calendar-selected').removeClass('calendar-selected');
  154. menu.find('td:eq(' + (opts.month-1) + ')').addClass('calendar-selected');
  155. }
  156. }
  157. /**
  158. * show the select menu that can change year or month, if the menu is not be created then create it.
  159. */
  160. function showSelectMenus(target){
  161. var opts = $.data(target, 'calendar').options;
  162. $(target).find('.calendar-menu').show();
  163. if ($(target).find('.calendar-menu-month-inner').is(':empty')){
  164. $(target).find('.calendar-menu-month-inner').empty();
  165. var t = $('<table class="calendar-mtable"></table>').appendTo($(target).find('.calendar-menu-month-inner'));
  166. var idx = 0;
  167. for(var i=0; i<3; i++){
  168. var tr = $('<tr></tr>').appendTo(t);
  169. for(var j=0; j<4; j++){
  170. $('<td class="calendar-nav calendar-menu-month"></td>').html(opts.months[idx++]).attr('abbr',idx).appendTo(tr);
  171. }
  172. }
  173. }
  174. var body = $(target).find('.calendar-body');
  175. var sele = $(target).find('.calendar-menu');
  176. var seleYear = sele.find('.calendar-menu-year-inner');
  177. var seleMonth = sele.find('.calendar-menu-month-inner');
  178. seleYear.find('input').val(opts.year).focus();
  179. seleMonth.find('td.calendar-selected').removeClass('calendar-selected');
  180. seleMonth.find('td:eq('+(opts.month-1)+')').addClass('calendar-selected');
  181. sele._outerWidth(body._outerWidth());
  182. sele._outerHeight(body._outerHeight());
  183. seleMonth._outerHeight(sele.height() - seleYear._outerHeight());
  184. }
  185. /**
  186. * get weeks data.
  187. */
  188. function getWeeks(target, year, month){
  189. var opts = $.data(target, 'calendar').options;
  190. var dates = [];
  191. var lastDay = new Date(year, month, 0).getDate();
  192. for(var i=1; i<=lastDay; i++) dates.push([year,month,i]);
  193. // group date by week
  194. var weeks = [], week = [];
  195. var memoDay = -1;
  196. while(dates.length > 0){
  197. var date = dates.shift();
  198. week.push(date);
  199. var day = new Date(date[0],date[1]-1,date[2]).getDay();
  200. if (memoDay == day){
  201. day = 0;
  202. } else if (day == (opts.firstDay==0 ? 7 : opts.firstDay) - 1){
  203. weeks.push(week);
  204. week = [];
  205. }
  206. memoDay = day;
  207. }
  208. if (week.length){
  209. weeks.push(week);
  210. }
  211. var firstWeek = weeks[0];
  212. if (firstWeek.length < 7){
  213. while(firstWeek.length < 7){
  214. var firstDate = firstWeek[0];
  215. var date = new Date(firstDate[0],firstDate[1]-1,firstDate[2]-1)
  216. firstWeek.unshift([date.getFullYear(), date.getMonth()+1, date.getDate()]);
  217. }
  218. } else {
  219. var firstDate = firstWeek[0];
  220. var week = [];
  221. for(var i=1; i<=7; i++){
  222. var date = new Date(firstDate[0], firstDate[1]-1, firstDate[2]-i);
  223. week.unshift([date.getFullYear(), date.getMonth()+1, date.getDate()]);
  224. }
  225. weeks.unshift(week);
  226. }
  227. var lastWeek = weeks[weeks.length-1];
  228. while(lastWeek.length < 7){
  229. var lastDate = lastWeek[lastWeek.length-1];
  230. var date = new Date(lastDate[0], lastDate[1]-1, lastDate[2]+1);
  231. lastWeek.push([date.getFullYear(), date.getMonth()+1, date.getDate()]);
  232. }
  233. if (weeks.length < 6){
  234. var lastDate = lastWeek[lastWeek.length-1];
  235. var week = [];
  236. for(var i=1; i<=7; i++){
  237. var date = new Date(lastDate[0], lastDate[1]-1, lastDate[2]+i);
  238. week.push([date.getFullYear(), date.getMonth()+1, date.getDate()]);
  239. }
  240. weeks.push(week);
  241. }
  242. return weeks;
  243. }
  244. /**
  245. * show the calendar day.
  246. */
  247. function show(target){
  248. var opts = $.data(target, 'calendar').options;
  249. if (opts.current && !opts.validator.call(target, opts.current)){
  250. opts.current = null;
  251. }
  252. var now = new Date();
  253. var todayInfo = now.getFullYear()+','+(now.getMonth()+1)+','+now.getDate();
  254. var currentInfo = opts.current ? (opts.current.getFullYear()+','+(opts.current.getMonth()+1)+','+opts.current.getDate()) : '';
  255. // calulate the saturday and sunday index
  256. var saIndex = 6 - opts.firstDay;
  257. var suIndex = saIndex + 1;
  258. if (saIndex >= 7) saIndex -= 7;
  259. if (suIndex >= 7) suIndex -= 7;
  260. $(target).find('.calendar-title span').html(opts.months[opts.month-1] + ' ' + opts.year);
  261. var body = $(target).find('div.calendar-body');
  262. body.children('table').remove();
  263. var data = ['<table class="calendar-dtable" cellspacing="0" cellpadding="0" border="0">'];
  264. data.push('<thead><tr>');
  265. if (opts.showWeek){
  266. data.push('<th class="calendar-week">'+opts.weekNumberHeader+'</th>');
  267. }
  268. for(var i=opts.firstDay; i<opts.weeks.length; i++){
  269. data.push('<th>'+opts.weeks[i]+'</th>');
  270. }
  271. for(var i=0; i<opts.firstDay; i++){
  272. data.push('<th>'+opts.weeks[i]+'</th>');
  273. }
  274. data.push('</tr></thead>');
  275. data.push('<tbody>');
  276. var weeks = getWeeks(target, opts.year, opts.month);
  277. for(var i=0; i<weeks.length; i++){
  278. var week = weeks[i];
  279. var cls = '';
  280. if (i == 0){cls = 'calendar-first';}
  281. else if (i == weeks.length - 1){cls = 'calendar-last';}
  282. data.push('<tr class="' + cls + '">');
  283. if (opts.showWeek){
  284. var weekNumber = opts.getWeekNumber(new Date(week[0][0], parseInt(week[0][1])-1, week[0][2]));
  285. data.push('<td class="calendar-week">'+weekNumber+'</td>');
  286. }
  287. for(var j=0; j<week.length; j++){
  288. var day = week[j];
  289. var s = day[0]+','+day[1]+','+day[2];
  290. var dvalue = new Date(day[0], parseInt(day[1])-1, day[2]);
  291. var d = opts.formatter.call(target, dvalue);
  292. var css = opts.styler.call(target, dvalue);
  293. var classValue = '';
  294. var styleValue = '';
  295. if (typeof css == 'string'){
  296. styleValue = css;
  297. } else if (css){
  298. classValue = css['class'] || '';
  299. styleValue = css['style'] || '';
  300. }
  301. var cls = 'calendar-day';
  302. if (!(opts.year == day[0] && opts.month == day[1])){
  303. cls += ' calendar-other-month';
  304. }
  305. if (s == todayInfo){cls += ' calendar-today';}
  306. if (s == currentInfo){cls += ' calendar-selected';}
  307. if (j == saIndex){cls += ' calendar-saturday';}
  308. else if (j == suIndex){cls += ' calendar-sunday';}
  309. if (j == 0){cls += ' calendar-first';}
  310. else if (j == week.length-1){cls += ' calendar-last';}
  311. cls += ' ' + classValue;
  312. if (!opts.validator.call(target, dvalue)){
  313. cls += ' calendar-disabled';
  314. }
  315. data.push('<td class="' + cls + '" abbr="' + s + '" style="' + styleValue + '">' + d + '</td>');
  316. }
  317. data.push('</tr>');
  318. }
  319. data.push('</tbody>');
  320. data.push('</table>');
  321. body.append(data.join(''));
  322. body.children('table.calendar-dtable').prependTo(body);
  323. opts.onNavigate.call(target, opts.year, opts.month);
  324. }
  325. $.fn.calendar = function(options, param){
  326. if (typeof options == 'string'){
  327. return $.fn.calendar.methods[options](this, param);
  328. }
  329. options = options || {};
  330. return this.each(function(){
  331. var state = $.data(this, 'calendar');
  332. if (state){
  333. $.extend(state.options, options);
  334. } else {
  335. state = $.data(this, 'calendar', {
  336. options:$.extend({}, $.fn.calendar.defaults, $.fn.calendar.parseOptions(this), options)
  337. });
  338. init(this);
  339. }
  340. if (state.options.border == false){
  341. $(this).addClass('calendar-noborder');
  342. }
  343. setSize(this);
  344. bindEvents(this);
  345. show(this);
  346. $(this).find('div.calendar-menu').hide(); // hide the calendar menu
  347. });
  348. };
  349. $.fn.calendar.methods = {
  350. options: function(jq){
  351. return $.data(jq[0], 'calendar').options;
  352. },
  353. resize: function(jq, param){
  354. return jq.each(function(){
  355. setSize(this, param);
  356. });
  357. },
  358. moveTo: function(jq, date){
  359. return jq.each(function(){
  360. if (!date){
  361. var now = new Date();
  362. $(this).calendar({
  363. year: now.getFullYear(),
  364. month: now.getMonth()+1,
  365. current: date
  366. });
  367. return;
  368. }
  369. var opts = $(this).calendar('options');
  370. if (opts.validator.call(this, date)){
  371. var oldValue = opts.current;
  372. $(this).calendar({
  373. year: date.getFullYear(),
  374. month: date.getMonth()+1,
  375. current: date
  376. });
  377. if (!oldValue || oldValue.getTime() != date.getTime()){
  378. opts.onChange.call(this, opts.current, oldValue);
  379. }
  380. }
  381. });
  382. }
  383. };
  384. $.fn.calendar.parseOptions = function(target){
  385. var t = $(target);
  386. return $.extend({}, $.parser.parseOptions(target, [
  387. 'weekNumberHeader',{firstDay:'number',fit:'boolean',border:'boolean',showWeek:'boolean'}
  388. ]));
  389. };
  390. $.fn.calendar.defaults = {
  391. width:180,
  392. height:180,
  393. fit:false,
  394. border:true,
  395. showWeek:false,
  396. firstDay:0,
  397. weeks:['S','M','T','W','T','F','S'],
  398. months:['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
  399. year:new Date().getFullYear(),
  400. month:new Date().getMonth()+1,
  401. current:(function(){
  402. var d = new Date();
  403. return new Date(d.getFullYear(), d.getMonth(), d.getDate());
  404. })(),
  405. weekNumberHeader:'',
  406. getWeekNumber: function(date){
  407. var checkDate = new Date(date.getTime());
  408. checkDate.setDate(checkDate.getDate() + 4 - (checkDate.getDay() || 7));
  409. var time = checkDate.getTime();
  410. checkDate.setMonth(0);
  411. checkDate.setDate(1);
  412. return Math.floor(Math.round((time - checkDate) / 86400000) / 7) + 1;
  413. },
  414. formatter:function(date){return date.getDate()},
  415. styler:function(date){return ''},
  416. validator:function(date){return true},
  417. onSelect: function(date){},
  418. onChange: function(newDate, oldDate){},
  419. onNavigate: function(year, month){}
  420. };
  421. })(jQuery);