Dashboard sipadu mbip
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

calendar-base-debug.js 5.4KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
  1. /*
  2. Copyright (c) 2010, Yahoo! Inc. All rights reserved.
  3. Code licensed under the BSD License:
  4. http://developer.yahoo.com/yui/license.html
  5. version: 3.4.0
  6. build: nightly
  7. */
  8. YUI.add('calendar-base', function(Y) {
  9. /**
  10. * The Calendar component is a UI widget that allows users
  11. * to view dates in a two-dimensional month grid, as well as
  12. * to select one or more dates, or ranges of dates. Calendar
  13. * is generated dynamically.
  14. *
  15. * @module calendar
  16. * @submodule calendar-base
  17. */
  18. /** Create a calendar view to represent a single or multiple
  19. * month range of dates, rendered as a grid with date and
  20. * weekday labels.
  21. *
  22. * @class CalendarBase
  23. * @extends Widget
  24. * @param config {Object} Configuration object (see Configuration attributes)
  25. * @constructor
  26. */
  27. var getCN = Y.ClassNameManager.getClassName,
  28. CALENDAR = 'calendar',
  29. CAL_GRID = getCN(CALENDAR, 'grid'),
  30. CAL_BODY = getCN(CALENDAR, 'body'),
  31. CAL_HD = getCN(CALENDAR, 'header'),
  32. CAL_HD_WRAP = getCN(CALENDAR, 'header-wrap'),
  33. CAL_WDAYROW = getCN(CALENDAR, 'weekdayrow'),
  34. CAL_WDAY = getCN(CALENDAR, 'weekday'),
  35. CAL_ROW = getCN(CALENDAR, 'row'),
  36. CAL_DAY = getCN(CALENDAR, 'day'),
  37. CAL_ANCHOR = getCN(CALENDAR, 'anchor'),
  38. L = Y.Lang,
  39. create = Y.Node.create,
  40. substitute = Y.substitute,
  41. each = Y.each;
  42. function CalendarBase() {
  43. CalendarBase.superclass.constructor.apply ( this, arguments );
  44. }
  45. Y.CalendarBase = Y.extend( CalendarBase, Y.Widget, {
  46. initializer : function () {
  47. },
  48. renderUI : function () {
  49. var contentBox = this.get('contentBox');
  50. contentBox.appendChild(this._initCalendarHTML(new Date("5/21/1947")));
  51. Y.log("Rendered Calendar UI");
  52. },
  53. bindUI : function () {
  54. },
  55. _getCutoffColumn : function (date) {
  56. var normalizedDate = new Date(date.getFullYear(), date.getMonth(), 1);
  57. return (1-normalizedDate.getDay());
  58. },
  59. _initCalendarHTML : function (baseDate) {
  60. var startDate = baseDate || new Date(),
  61. cutoffCol = this._getCutoffColumn(startDate),
  62. headerData = {calheader: (startDate.getMonth()+1) + "/" +
  63. startDate.getFullYear()},
  64. calString = '',
  65. weekdays = {wday1: 'Su',
  66. wday2: 'Mo',
  67. wday3: 'Tu',
  68. wday4: 'We',
  69. wday5: 'Th',
  70. wday6: 'Fr',
  71. wday7: 'Sa'};
  72. var partials = {};
  73. partials["header_template"] = substitute(CalendarBase.HEADER_TEMPLATE,
  74. headerData);
  75. partials["weekday_row"] = '';
  76. each (weekdays, function (v) {
  77. partials["weekday_row"] +=
  78. substitute(CalendarBase.WEEKDAY_TEMPLATE,
  79. {weekdayname: v});
  80. }
  81. );
  82. partials["wdayrow_template"] = substitute(CalendarBase.WEEKDAY_ROW_TEMPLATE, partials);
  83. var row_array = [];
  84. for (var i = 0; i <= 5; i++) {
  85. var calday_row = '';
  86. for (var j = -5; j <=7; j++) {
  87. calday_row += substitute (CalendarBase.CALDAY_TEMPLATE, {day_content: '' + (j+7*i),
  88. day_display_status: (j >= cutoffCol && j <= (cutoffCol + 6)) ? '' : 'style="display:none;"'});
  89. }
  90. row_array.push(substitute(CalendarBase.CALDAY_ROW_TEMPLATE, {calday_row: calday_row} ));
  91. }
  92. partials["body_template"] = row_array.join('\n');
  93. var header = substitute(substitute (CalendarBase.CONTENT_TEMPLATE, partials),
  94. CalendarBase.CALENDAR_CLASSES);
  95. return header;
  96. }
  97. }, {
  98. // Y.CalendarBase static properties
  99. CALENDAR_CLASSES : {
  100. calendar_grid_class : CAL_GRID,
  101. calendar_body_class : CAL_BODY,
  102. calendar_hd_class : CAL_HD,
  103. calendar_hd_wrapper_class: CAL_HD_WRAP,
  104. calendar_weekdayrow_class: CAL_WDAYROW,
  105. calendar_weekday_class: CAL_WDAY,
  106. calendar_row_class: CAL_ROW,
  107. calendar_day_class: CAL_DAY,
  108. calendar_dayanchor_class: CAL_ANCHOR
  109. },
  110. CONTENT_TEMPLATE: '<table class="{calendar_grid_class}">' +
  111. '<thead>' +
  112. '{header_template}' +
  113. '{wdayrow_template}' +
  114. '</thead>' +
  115. '<tbody class="{calendar_body_class}">' +
  116. '{body_template}' +
  117. '</tbody>' +
  118. '</table>',
  119. HEADER_TEMPLATE: '<tr>' +
  120. '<th colspan="7" class="{calendar_hd_class}">' +
  121. '<div id="calheader" class="{calendar_hd_wrapper_class}">' +
  122. '{calheader}' +
  123. '</div>' +
  124. '</th>' +
  125. '</tr>',
  126. WEEKDAY_ROW_TEMPLATE: '<tr class="{calendar_weekdayrow_class}">' +
  127. '{weekday_row}' +
  128. '</tr>',
  129. CALDAY_ROW_TEMPLATE: '<tr class="{calendar_row_class}">' +
  130. '{calday_row}' +
  131. '</tr>',
  132. WEEKDAY_TEMPLATE: '<th class="{calendar_weekday_class}">{weekdayname}</th>',
  133. CALDAY_TEMPLATE: '<td class="{calendar_day_class}" {day_display_status}>' +
  134. '<a href="#" class="{calendar_dayanchor_class}">' +
  135. '{day_content}' +
  136. '</a>' +
  137. '</td>',
  138. NAME: 'calendarBase',
  139. ATTRS: {
  140. }
  141. });
  142. }, '3.4.0' ,{requires:['widget', 'datatype-date']});