3
Copyright 2011 Yahoo! Inc. All rights reserved.
4
Licensed under the BSD License.
5
http://yuilibrary.com/license/
7
YUI.add('calendar', function(Y) {
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 and relies on the developer to
14
* provide for a progressive enhancement alternative.
20
var getCN = Y.ClassNameManager.getClassName,
21
CALENDAR = 'calendar',
22
CAL_HD = getCN(CALENDAR, 'header'),
23
CAL_DAY_SELECTED = getCN(CALENDAR, 'day-selected'),
24
CAL_DAY = getCN(CALENDAR, 'day'),
25
CAL_PREVMONTH_DAY = getCN(CALENDAR, 'prevmonth-day'),
26
CAL_NEXTMONTH_DAY = getCN(CALENDAR, 'nextmonth-day'),
27
ydate = Y.DataType.Date,
28
delegate = Y.delegate,
29
CAL_PANE = getCN(CALENDAR, 'pane'),
32
/** Create a calendar view to represent a single or multiple
33
* month range of dates, rendered as a grid with date and
37
* @extends CalendarBase
38
* @param config {Object} Configuration object (see Configuration attributes)
41
function Calendar(config) {
42
Calendar.superclass.constructor.apply ( this, arguments );
45
Y.Calendar = Y.extend(Calendar, Y.CalendarBase, {
48
* A property tracking the last selected date on the calendar, for the
49
* purposes of multiple selection.
51
* @property _lastSelectedDate
56
_lastSelectedDate: null,
59
* Designated initializer. Activates the navigation plugin for the calendar.
63
initializer : function () {
64
this.plug(Y.Plugin.CalendarNavigator);
68
* syncUI implementation
70
* Update the scroll position, based on the current value of scrollY
73
syncUI : function () {
78
* Overrides the _bindCalendarEvents placeholder in CalendarBase
79
* and binds calendar events during bindUI stage.
80
* @method _bindCalendarEvents
83
_bindCalendarEvents : function () {
84
var contentBox = this.get('contentBox'),
85
pane = contentBox.one("." + CAL_PANE);
86
pane.on("selectstart", function (ev) { ev.preventDefault();});
87
pane.delegate("click", this._clickCalendar, "." + CAL_DAY, this);
91
* Handles the calendar clicks based on selection mode.
92
* @method _clickCalendar
93
* @param {Event} ev A click event
96
_clickCalendar : function (ev) {
97
var clickedCell = ev.target,
98
clickedCellIsDay = clickedCell.hasClass(CAL_DAY) &&
99
!clickedCell.hasClass(CAL_PREVMONTH_DAY) &&
100
!clickedCell.hasClass(CAL_NEXTMONTH_DAY),
101
clickedCellIsSelected = clickedCell.hasClass(CAL_DAY_SELECTED);
102
switch (this.get("selectionMode")) {
104
if (clickedCellIsDay) {
105
if (!clickedCellIsSelected) {
106
this._clearSelection(true);
107
this._addDateToSelection(this._nodeToDate(clickedCell));
111
case("multiple-sticky"):
112
if (clickedCellIsDay) {
113
if (clickedCellIsSelected) {
114
this._removeDateFromSelection(this._nodeToDate(clickedCell));
117
this._addDateToSelection(this._nodeToDate(clickedCell));
122
if (!ev.metaKey && !ev.ctrlKey && !ev.shiftKey) {
123
this._clearSelection(true);
124
this._lastSelectedDate = this._nodeToDate(clickedCell);
125
this._addDateToSelection(this._lastSelectedDate);
127
else if (((os == 'macintosh' && ev.metaKey) || (os != 'macintosh' && ev.ctrlKey)) && !ev.shiftKey) {
128
if (clickedCellIsSelected) {
129
this._removeDateFromSelection(this._nodeToDate(clickedCell));
130
this._lastSelectedDate = null;
133
this._lastSelectedDate = this._nodeToDate(clickedCell);
134
this._addDateToSelection(this._lastSelectedDate);
137
else if (((os == 'macintosh' && ev.metaKey) || (os != 'macintosh' && ev.ctrlKey)) && ev.shiftKey) {
138
if (this._lastSelectedDate != null) {
139
var selectedDate = this._nodeToDate(clickedCell);
140
this._addDateRangeToSelection(selectedDate, this._lastSelectedDate);
141
this._lastSelectedDate = selectedDate;
144
this._lastSelectedDate = this._nodeToDate(clickedCell);
145
this._addDateToSelection(this._lastSelectedDate);
149
else if (ev.shiftKey) {
150
if (this._lastSelectedDate != null) {
151
var selectedDate = this._nodeToDate(clickedCell);
152
this._clearSelection(true);
153
this._addDateRangeToSelection(selectedDate, this._lastSelectedDate);
154
this._lastSelectedDate = selectedDate;
157
this._clearSelection(true);
158
this._lastSelectedDate = this._nodeToDate(clickedCell);
159
this._addDateToSelection(this._lastSelectedDate);
165
if (clickedCellIsDay) {
167
* Fired when a specific date cell in the calendar is clicked. The event carries a
168
* payload which includes a `cell` property corresponding to the node of the actual
169
* date cell, and a `date` property, with the `Date` that was clicked.
173
this.fire("dateClick", {cell: clickedCell, date: this._nodeToDate(clickedCell)});
175
else if (clickedCell.hasClass(CAL_PREVMONTH_DAY)) {
177
* Fired when any of the previous month's days displayed before the calendar grid
180
* @event prevMonthClick
182
this.fire("prevMonthClick");
184
else if (clickedCell.hasClass(CAL_NEXTMONTH_DAY)) {
186
* Fired when any of the next month's days displayed after the calendar grid
189
* @event nextMonthClick
191
this.fire("nextMonthClick");
196
* Subtracts one month from the current calendar view.
197
* @method subtractMonth
199
subtractMonth : function (e) {
200
this.set("date", ydate.addMonths(this.get("date"), -1));
205
* Subtracts one year from the current calendar view.
206
* @method subtractYear
208
subtractYear : function (e) {
209
this.set("date", ydate.addYears(this.get("date"), -1));
214
* Adds one month to the current calendar view.
217
addMonth : function (e) {
218
this.set("date", ydate.addMonths(this.get("date"), 1));
223
* Adds one year to the current calendar view.
226
addYear : function (e) {
227
this.set("date", ydate.addYears(this.get("date"), 1));
234
* The identity of the widget.
238
* @default 'Calendar'
246
* Static property used to define the default attribute configuration of
257
* A setting specifying the type of selection the calendar allows.
258
* Possible values include:
260
* <li>`single`</li> - One date at a time
261
* <li>`multiple-sticky</li> - Multiple dates, selected one at a time (the dates "stick")
262
* <li>`multiple`</li> - Multiple dates, selected with Ctrl/Meta keys for additional single
263
* dates, and Shift key for date ranges.
265
* @attribute selectionMode
274
* The date corresponding to the current calendar view. Always
275
* normalized to the first of the month that contains the date
276
* at assignment time. Used as the first date visible in the
281
* @default Today's date as set on the user's computer.
285
setter: function (val) {
287
var newDate = this._normalizeDate(val),
288
newTopDate = ydate.addMonths(newDate, this._paneNumber - 1),
289
minDate = this.get("minimumDate"),
290
maxDate = this.get("maximumDate");
292
if ((minDate == null || ydate.isGreaterOrEqual(newDate, minDate)) &&
293
(maxDate == null || ydate.isGreaterOrEqual(maxDate, newTopDate))) {
297
else if (minDate != null && ydate.isGreater(minDate, newDate)) {
301
else if (maxDate != null && ydate.isGreater(newTopDate, maxDate)) {
302
var actualMaxDate = ydate.addMonths(maxDate, -1*(this._paneNumber - 1));
303
return actualMaxDate;
309
* The minimum date that can be displayed by the calendar. The calendar will not
310
* allow dates earlier than this one to be set, and will reset any earlier date to
311
* this date. Should be `null` if no minimum date is needed.
313
* @attribute minimumDate
319
setter: function (val) {
321
var curDate = this.get('date'),
322
newMinDate = this._normalizeDate(val);
323
if (curDate!= null && !ydate.isGreaterOrEqual(curDate, newMinDate)) {
324
this.set('date', newMinDate);
335
* The maximum date that can be displayed by the calendar. The calendar will not
336
* allow dates later than this one to be set, and will reset any later date to
337
* this date. Should be `null` if no maximum date is needed.
339
* @attribute maximumDate
345
setter: function (val) {
347
var curDate = this.get('date'),
348
newMaxDate = this._normalizeDate(val);
349
if (curDate!= null && !ydate.isGreaterOrEqual(val, ydate.addMonths(curDate, this._paneNumber - 1))) {
350
this.set('date', ydate.addMonths(newMaxDate, -1*(this._paneNumber -1)));
363
}, '3.4.1' ,{requires:['calendar-base', 'calendarnavigator'], lang:['en', 'ja', 'ru']});