lib/yui/3.5.0/build/calendar/calendar-base.js

   1 /*
   2 YUI 3.5.0 (build 5089)
   3 Copyright 2012 Yahoo! Inc. All rights reserved.
   4 Licensed under the BSD License.
   5 http://yuilibrary.com/license/
   6 */
   7 YUI.add('calendar-base', function(Y) {
   8
   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
  19 /** Create a calendar view to represent a single or multiple
  20   * month range of dates, rendered as a grid with date and
  21   * weekday labels.
  22   *
  23   * @class CalendarBase
  24   * @extends Widget
  25   * @param config {Object} Configuration object (see Configuration attributes)
  26   * @constructor
  27   */
  28
  29
  30 var getCN       = Y.ClassNameManager.getClassName,
  31     CALENDAR    = 'calendar',
  32     CAL_GRID    = getCN(CALENDAR, 'grid'),
  33     CAL_BODY    = getCN(CALENDAR, 'body'),
  34     CAL_HD      = getCN(CALENDAR, 'header'),
  35     CAL_HD_WRAP = getCN(CALENDAR, 'header-wrap'),
  36     CAL_WDAYROW = getCN(CALENDAR, 'weekdayrow'),
  37     CAL_WDAY    = getCN(CALENDAR, 'weekday'),
  38     CAL_ROW     = getCN(CALENDAR, 'row'),
  39     CAL_DAY     = getCN(CALENDAR, 'day'),
  40     CAL_ANCHOR  = getCN(CALENDAR, 'anchor'),
  41
  42     L           = Y.Lang,
  43     create      = Y.Node.create,
  44     substitute  = Y.substitute,
  45     each        = Y.each;
  46
  47
  48 function CalendarBase() {
  49         CalendarBase.superclass.constructor.apply ( this, arguments );
  50 }
  51
  52 Y.CalendarBase = Y.extend( CalendarBase, Y.Widget, {
  53
  54         initializer : function () {
  55         },
  56
  57         renderUI : function () {
  58             var contentBox = this.get('contentBox');
  59             contentBox.appendChild(this._initCalendarHTML(new Date("5/21/1947")));
  60         },
  61
  62         bindUI : function () {
  63
  64         },
  65
  66     _getCutoffColumn : function (date) {
  67
  68          var normalizedDate = new Date(date.getFullYear(), date.getMonth(), 1);
  69          return (1-normalizedDate.getDay());
  70
  71     },
  72
  73         _initCalendarHTML : function (baseDate) {
  74
  75                 var startDate = baseDate || new Date(),
  76                     cutoffCol = this._getCutoffColumn(startDate),
  77                     headerData = {calheader: (startDate.getMonth()+1) + "/" +
  78                                              startDate.getFullYear()},
  79                     calString = '',
  80                     weekdays = {wday1: 'Su',
  81                                 wday2: 'Mo',
  82                                 wday3: 'Tu',
  83                                 wday4: 'We',
  84                                 wday5: 'Th',
  85                                 wday6: 'Fr',
  86                                 wday7: 'Sa'};
  87
  88                 var partials = {};
  89                     partials["header_template"] =  substitute(CalendarBase.HEADER_TEMPLATE,
  90                                                                           headerData);
  91
  92                         partials["weekday_row"] = '';
  93
  94                         each (weekdays, function (v) {
  95                                                               partials["weekday_row"] +=
  96                                                                substitute(CalendarBase.WEEKDAY_TEMPLATE,
  97                                                                               {weekdayname: v});
  98                                                      }
  99                              );
 100
 101                         partials["wdayrow_template"] = substitute(CalendarBase.WEEKDAY_ROW_TEMPLATE, partials);
 102
 103
 104
 105                         var row_array = [];
 106
 107                         for (var i = 0; i <= 5; i++) {
 108                                 var calday_row = '';
 109                                 for (var j = -5; j <=7; j++) {
 110                                    calday_row += substitute (CalendarBase.CALDAY_TEMPLATE, {day_content: '' + (j+7*i),
 111                                                                                             day_display_status: (j >= cutoffCol && j <= (cutoffCol + 6)) ? '' : 'style="display:none;"'});
 112                                 }
 113                                 row_array.push(substitute(CalendarBase.CALDAY_ROW_TEMPLATE, {calday_row: calday_row} ));
 114                         }
 115
 116                         partials["body_template"] = row_array.join('\n');
 117
 118             var header = substitute(substitute (CalendarBase.CONTENT_TEMPLATE, partials),
 119                                             CalendarBase.CALENDAR_CLASSES);
 120
 121
 122                 return header;
 123         }
 124 }, {
 125         // Y.CalendarBase static properties
 126
 127         CALENDAR_CLASSES : {
 128                 calendar_grid_class   :  CAL_GRID,
 129                 calendar_body_class   :  CAL_BODY,
 130                 calendar_hd_class     :  CAL_HD,
 131                 calendar_hd_wrapper_class: CAL_HD_WRAP,
 132                 calendar_weekdayrow_class: CAL_WDAYROW,
 133                 calendar_weekday_class:  CAL_WDAY,
 134                 calendar_row_class:      CAL_ROW,
 135                 calendar_day_class:      CAL_DAY,
 136                 calendar_dayanchor_class: CAL_ANCHOR
 137         },
 138
 139         CONTENT_TEMPLATE: '<table class="{calendar_grid_class}">' +
 140                             '<thead>' +
 141                                '{header_template}' +
 142                                '{wdayrow_template}' +
 143                             '</thead>' +
 144                             '<tbody class="{calendar_body_class}">' +
 145                               '{body_template}' +
 146                             '</tbody>' +
 147                           '</table>',
 148
 149         HEADER_TEMPLATE: '<tr>' +
 150                              '<th colspan="7" class="{calendar_hd_class}">' +
 151                                '<div id="calheader" class="{calendar_hd_wrapper_class}">' +
 152                                  '{calheader}' +
 153                                '</div>' +
 154                              '</th>' +
 155                           '</tr>',
 156
 157         WEEKDAY_ROW_TEMPLATE: '<tr class="{calendar_weekdayrow_class}">' +
 158                                  '{weekday_row}' +
 159                                                   '</tr>',
 160
 161         CALDAY_ROW_TEMPLATE: '<tr class="{calendar_row_class}">' +
 162                                                      '{calday_row}' +
 163                                                   '</tr>',
 164
 165         WEEKDAY_TEMPLATE: '<th class="{calendar_weekday_class}">{weekdayname}</th>',
 166
 167         CALDAY_TEMPLATE: '<td class="{calendar_day_class}" {day_display_status}>' +
 168                              '<a href="#" class="{calendar_dayanchor_class}">' +
 169                                  '{day_content}' +
 170                              '</a>' +
 171                          '</td>',
 172
 173         NAME: 'calendarBase',
 174
 175         ATTRS: {
 176
 177         }
 178
 179 });
 180
 181
 182 }, '3.5.0' ,{requires:['widget', 'datatype-date']});