Alloy UI

aui-calendar  1.0.1

 
Filters

Class Calendar - extends OverlayContext

Known Subclasses:
DatePickerSelect

A base class for Calendar, providing:
  • Widget Lifecycle (initializer, renderUI, bindUI, syncUI, destructor)
  • Setting Configuration Options
  • Obtaining Selected Dates
  • Creating International Calendars
  • Customizing the Calendar
Quick Example:
var instance = new A.Calendar({
trigger: '#input1',
dates: ['09/14/2009', '09/15/2009'],
dateFormat: '%d/%m/%y %A',
setValue: true,
selectMultipleDates: true
}).render();
Check the list of Configuration Attributes available for Calendar.

Constructor

Calendar ( config )
Parameters:
config <Object> Object literal specifying widget configuration properties.

Properties

Calendar.ATTRS - static Object

Static property used to define the default attribute configuration for the Calendar.

Calendar.NAME - static String

Static property provides a string to identify the class.

headerContentNode - protected Node

This node is the WidgetStdMod.HEADER of the Calendar Overlay. Container to the headertitleNode.

headerTitleNode - protected Node

Header title Node.

monthDaysNode - protected Node

Container for house the month days elements.

weekDaysNode - protected Node

Container for house the week days elements.

Properties inherited from WidgetPositionConstrain:

Properties inherited from WidgetStack:

Properties inherited from Attribute:

Properties inherited from Component:

Properties inherited from WidgetPositionAlign:

Properties inherited from Base:

Properties inherited from WidgetStdMod:

Properties inherited from WidgetPosition:

Properties inherited from OverlayContext:

Configuration Attributes

currentDay - Number

Current day number.
Default Value: Current day

currentMonth - Number

Current month number.
Default Value: Current month

currentYear - Number

Current year number.
Default Value: Current year

dateFormat - String

The default date format string which can be overriden for localization support. The format must be valid according to A.DataType.Date.format.
Default Value: %m/%d/%Y

dates - Array

Dates which the calendar will show as selected by default.
Default Value: Current date

firstDayOfWeek - Number

First day of the week: Sunday is 0, Monday is 1.
Default Value: 0

maxDate - String | Date

Maximum allowable date. Values supported by the Date constructor are supported.
Default Value: null

minDate - Date | String

Minimum allowable date. Values supported by the Date constructor are supported.
Default Value: null

selectMultipleDates - boolean

Wether accepts to select multiple dates.
Default Value: false

setValue - boolean

If true set the selected date with the correct dateFormat to the value of the input field which is hosting the Calendar.
Default Value: true

stack - boolean

If true is able to do stacking with another overlays.
Default Value: true

Configuration attributes inherited from WidgetPositionConstrain:

Configuration attributes inherited from Widget:

Configuration attributes inherited from WidgetStack:

Configuration attributes inherited from Component:

Configuration attributes inherited from WidgetPositionAlign:

Configuration attributes inherited from Base:

Configuration attributes inherited from WidgetStdMod:

Configuration attributes inherited from WidgetPosition:

x,
xy,
y

Methods

_afterSetDates

protected void _afterSetDates ( event )
Fires after select event.
Parameters:
event <EventFacade> select custom event

_compareDates

protected boolean _compareDates ( d1 , d2 )
Compare two dates.
Parameters:
d1 <Date>
d2 <Date>

_eachSelectedDate

protected void _eachSelectedDate ( fn , dates )
Loop each date from dates and executes a callback.
Parameters:
fn <function> Callback to be executed for each date.
dates <Dates> Optional dates Array to loop through. If not passed it will use the dates.

_getDayName

protected String _getDayName ( weekDay )
Get the day name of the passed weekDay from the locale map.
Parameters:
weekDay <Number>

_getDayNameMin

protected String _getDayNameMin ( weekDay )
Get a very short day name of the passed weekDay from the locale map.
Parameters:
weekDay <Number>

_getDayNameShort

protected String _getDayNameShort ( weekDay )
Get a short day name of the passed weekDay from the locale map.
Parameters:
weekDay <Number>

_getLocaleMap

protected Object _getLocaleMap ( )
Get the locale map containing the respective values for the locale used.
A.DataType.Date.Locale['pt-br'] = A.merge(
A.DataType.Date.Locale['en'], {
a: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Fri', 'Sat'],
A: ['Domingo','Segunda-feira','Terça-feira','Quarta-feira','Quinta-feira','Sexta-feira','Sabado'],
b: ['Jan','Fev','Mar','Abr','Mai','Jun', 'Jul','Ago','Set','Out','Nov','Dez'],
B: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho', 'Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
c: '%a %d %b %Y %T %Z',
p: ['AM', 'PM'],
P: ['am', 'pm'],
r: '%I:%M:%S %p',
x: '%d/%m/%y',
X: '%T'
}
);

_getMonthName

protected String _getMonthName ( month )
Get a month name of the passed month from the locale map.
Parameters:
month <Number>

_getMonthNameShort

protected String _getMonthNameShort ( month )
Get a short month name of the passed month from the locale map.
Parameters:
month <Number>

_navigateMonth

protected void _navigateMonth ( offset )
Navigate through months and re-sync the UI.
Parameters:
offset <Number> Offset of the number of months to navigate. Could be a positive or a negative offset.

_normalizeYearMonth

protected Object _normalizeYearMonth ( year , month , day )
Returns an Object with the current day, month and year.
Parameters:
year <Number> Year in the format YYYY.
month <Number> 0 for January 11 for December.
day <Number>

_onClickDays

protected void _onClickDays ( event )
Fires on click days elements.
Parameters:
event <EventFacade>

_onMouseEnterDays

protected void _onMouseEnterDays ( event )
Fires on mouseenter days elements.
Parameters:
event <EventFacade>

_onMouseLeaveDays

protected void _onMouseLeaveDays ( event )
Fires on mouseleave days elements.
Parameters:
event <EventFacade>

_removeDate

protected void _removeDate ( date )
Remove the passed date from dates.
Parameters:
date <Date> Date to remove

_renderBlankDays

protected void _renderBlankDays ( )
Render Calendar DOM blank days elements. Blank days are used to align with the week day column.

_renderCalendar

protected void _renderCalendar ( )
Render Calendar DOM elements.

_renderMonthDays

protected void _renderMonthDays ( )
Render Calendar DOM month days elements.

_renderWeekDays

protected void _renderWeekDays ( )
Render Calendar DOM week days elements.

_restrictDate

protected void _restrictDate ( currentDate , monthDayNode )
Util method to disable day nodes between minDate and maxDate.
Parameters:
currentDate <Date> Current date showed on the Calendar.
monthDayNode <Node> Day node to be disabled.

_selectDate

protected void _selectDate ( )
Select the current date returned by getCurrentDate.

_selectNextMonth

protected void _selectNextMonth ( event )
Navigate to the next month. Fired from the next icon on the Calendar header.
Parameters:
event <EventFacade>

_selectPrevMonth

protected void _selectPrevMonth ( event )
Navigate to the previous month. Fired from the previous icon on the Calendar header.
Parameters:
event <EventFacade>

_setDates

protected Array _setDates ( value )
Setter for the dates attribute.
Parameters:
value <Array>

_setMinMaxDate

protected Date _setMinMaxDate ( value )
Setter for the maxDates or minDates attributes.
Parameters:
value <Date>

_setStack

protected boolean _setStack ( value )
Setter for the stack attribute.
Parameters:
value <boolean>

_syncDays

protected void _syncDays ( )
Sync Calendar days UI.

_syncHeader

protected void _syncHeader ( )
Sync Calendar header UI.

_syncSelectedDays

protected void _syncSelectedDays ( )
Sync Calendar selected days UI.

_syncView

protected void _syncView ( )
Sync Calendar header, days and selected days UI.

alreadySelected

boolean alreadySelected ( date )
Check if a date is already selected.
Parameters:
date <Date> Date to be checked.

bindUI

protected void bindUI ( )
Bind the events on the Calendar UI. Lifecycle.

formatDate

String formatDate ( date , mask )
Format a date with the passed mask. Used on dateFormat.
Parameters:
date <Date>
mask <String> See dateFormat.

getCurrentDate

Date getCurrentDate ( )
Get current date.

getDaysInMonth

Number getDaysInMonth ( year , month )
Get the number of days in the passed year and month.
Parameters:
year <Number> Year in the format YYYY.
month <Number> 0 for January 11 for December.

getDetailedSelectedDates

Array getDetailedSelectedDates ( )
Get an Array with selected dates with detailed information (day, month, year).
[{
year: date.getFullYear(),
month: date.getMonth(),
day: date.getDate()
}]

getFirstDate

Date getFirstDate ( year , month )
Get the Date for the first day of the passed year and month.
Parameters:
year <Number> Year in the format YYYY.
month <Number> 0 for January 11 for December.

getFirstDayOfWeek

Number getFirstDayOfWeek ( year , month )
Get the first day of week of the passed year and month.
Parameters:
year <Number> Year in the format YYYY.
month <Number> 0 for January 11 for December.

getFormattedSelectedDates

Array getFormattedSelectedDates ( )
Get the selected dates formatted by the dateFormat.

getLastDate

Date getLastDate ( year , month )
Get the Date for the last day of the passed year and month.
Parameters:
year <Number> Year in the format YYYY.
month <Number> 0 for January 11 for December.

getSelectedDates

Array getSelectedDates ( )
Get the selected dates.

initializer

protected void initializer ( )
Construction logic executed during Calendar instantiation. Lifecycle.

parseDate

Date parseDate ( dateString )
Parse a string to a Date object.
Parameters:
dateString <String>

renderUI

protected void renderUI ( )
Create the DOM structure for the Calendar. Lifecycle.

syncUI

protected void syncUI ( )
Sync the Calendar UI. Lifecycle.

Methods inherited from Plugin.Host:

Events

currentDayChange

currentDayChange ( event )
Fires when the value for the configuration attribute 'currentDay' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

currentMonthChange

currentMonthChange ( event )
Fires when the value for the configuration attribute 'currentMonth' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

currentYearChange

currentYearChange ( event )
Fires when the value for the configuration attribute 'currentYear' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

dateFormatChange

dateFormatChange ( event )
Fires when the value for the configuration attribute 'dateFormat' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

datesChange

datesChange ( event )
Fires when the value for the configuration attribute 'dates' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

firstDayOfWeekChange

firstDayOfWeekChange ( event )
Fires when the value for the configuration attribute 'firstDayOfWeek' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

maxDateChange

maxDateChange ( event )
Fires when the value for the configuration attribute 'maxDate' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

minDateChange

minDateChange ( event )
Fires when the value for the configuration attribute 'minDate' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

selectMultipleDatesChange

selectMultipleDatesChange ( event )
Fires when the value for the configuration attribute 'selectMultipleDates' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

setValueChange

setValueChange ( event )
Fires when the value for the configuration attribute 'setValue' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

stackChange

stackChange ( event )
Fires when the value for the configuration attribute 'stack' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

Events inherited from WidgetStack:

Events inherited from Base:

Events inherited from WidgetPosition: