Y.Calendar.JumpNavView Class
This class defines a View class extension for Calendar that configures to load on a "click" on the Calendar's "Month Year" header label to display a popup panel that allows for selecting the month / year without requiring to page thru by month. The view creates a Panel instance from a standard template (see the property template for the default) and handles populating the SELECT dropdown controls for "month" and "year".
Attributes are provided that include yearStart and yearEnd for defining the range to be used for the "year" dropdown elements, for example.
Usage
The simplest application includes creating a Calendar instance and then creating the View and attaching the calendar to the view with the calendar attribute.
var cal = new Y.Calendar({
contentBox: "#mycal",
width:'240px',
showPrevMonth: true,
showNextMonth: true
}).render();
// This creates a View instance and connects it to the "cal" Calendar instance.
var calJNav = new Y.Calendar.JumpNavView({
calendar: cal,
yearStart: 1988,
yearEnd: 2021
});
An additional module is provided, the Y.Plugin.Calendar.JumpNav plugin that attaches the Calendar to the view via a plugin method.
Item Index
Methods
Properties
- _classCalHead
- _classMonth
- _classPanel
- _classYear
- _panel
- _subscr
- _viewNode
- events static
- template static
Attributes
Events
Methods
_createPanelView
-
vnode
Parameters:
-
vnodeNodeThe Node that was created from
templatethat will be used as the container for the Y.Panel creation.
_onCalendarDateChange
-
e
Listener on the Calendar's "dateChange" event to update the JumpNavigator if it's visible
Parameters:
-
eEventTarget
_onGoButton
()
private
Listener on the Panel's "Go" button, resets the Calendar to the Month/Year and first day,
and optionally closes the Panel if closeAfterGo is true.
_regenMonths
-
curDate
Method that regenerates the "month" SELECT control, adding the months and defining the "selected" as the curDate parameter
Parameters:
-
curDateDateCurrent date to set as "selected"
_regenYears
-
curDate
Method that regenerates the "year" SELECT control, adding the months defined by attributes yearStart to yearEnd
and defining the "selected" as the curDate parameter
Parameters:
-
curDateDateCurrent date to set as "selected"
_selectMonth
-
e
"change" Listener on the SELECT control for the JumpNavigator's month control
Parameters:
-
eObject
_selectYear
-
e
"change" Listener on the SELECT control for the JumpNavigator's year control
Parameters:
-
eObject
_setSelectedMonth
-
curDate
Sets the currently "selected" OPTION for the month control to the current month
Parameters:
-
curDateDate
_setSelectedYear
-
curDate
Sets the currently "selected" OPTION for the year control to the current year.
This method searches the OPTION nodes for "value" set to the year, to get around
CSS selector issues in some browers.
Parameters:
-
curDateDate
_yearInSelect
-
year
Helper method to check if the specified year is an option in the current SELECT control OPTIONS.
Parameters:
-
yearNumberYear to be checked if it is in the current SELECT control
Returns:
destructor
()
protected
Clears up the created listeners and destroys the Panel
initializer
()
protected
chainable
Initializer that creates the container, the Panel instance and listeners for this view
Returns:
render
()
protected
chainable
Renders the Panel and resets the SELECT controls "selected" default to the current Calendar data setting
Returns:
Properties
_classCalHead
String
private
Stores the classname to search the Calendar instance for to hook onto the "header-label" element
Default: 'yui3-calendar-header-label'
_classMonth
String
private
Stores the classname used internally for the Panel's "month" SELECT control
Default: 'yui3-calendar-jumpnav-month'
_classPanel
String
private
Stores the classname used internally for the Panel srcNode used in this view
Default: 'yui3-calendar-jumpnav-panel'
_classYear
String
private
Stores the classname used internally for the Panel's "month" SELECT control
Default: 'yui3-calendar-jumpnav-year'
_panel
Y.Panel
private
Placeholder for the Y.Panel instance used in this view
Default: null
_subscr
Array
private
Holder for an array of the Listeners created by this view so we can detach them when finished
Default: []
_viewNode
Node
private
Placeholder for the Node instance for this view, set to Panel contentBox
Default: null
events
Object
static
Defines event objects as part of View's event handling, specifically defines actions to be taken on "change" events of the month and year SELECT controls.
template
String HTML Setting for Panel's contents
static
Default setting for the template attribute that defines the Panel HTML contents, including
the SELECT options for month and year.
Default: See example below
Example:
// Where classPanel is replaced by 'yui3-calendar-jumpnav-panel',
// and classMonth by 'yui3-calendar-jumpnav-month'
// and classYear by 'yui3-calendar-jumpnav-year'
<div class="{classPanel}">
<div class="yui3-widget-bd">
<table>
<tr><td align="right">Jump to Month:</td><td><select class="{classMonth}"></select></td></tr>
<tr><td align="right">and Year:</td><td><select class="{classYear}"></select></td></tr>
</table>
</div>
</div>
Attributes
calendar
Y.Calendar
Specifies the Calendar instance that this view will be attached to for header label clicks and
for updates to the date attribute.
Default: null
closeAfterGo
Boolean
This flag sets whether the Panel instance should be hidden after the "Go" button is pressed
Default: true
offsetXY
Array
The x,y offset (horiz, vert) that should be used to offset the popup Panel from the original Calendar "header label" that was clicked.
Default: [ 30, 10 ]
openEventType
String
Sets the Event "type" that is used in the Calendar "header label" listener to open the popup Panel. Sensible values are "click" or "dblclick".
Default: 'click'
template
String
Defines the HTML content that is used to setup the Y.Panel instance that is created by this View. See the property template for the default setting.
Default: this.template
Events
monthSelected
Event Payload:
-
returnObject-
evtEventTargetEventtarget for the SELECT "change" event
-
valueNumberValue part of the selected OPTION, which is the selected month
-
textStringText from selected OPTION, which is the month name
-
yearSelected
Event Payload:
-
returnObject-
evtEventTargetEventtarget for the SELECT "change" event
-
valueNumberValue part of the selected OPTION, which is the Selected year
-
textStringText from selected OPTION, which is the selected year
-