Chico UI

ch.Calendar (Class)

Documentation updated on Fri May 18 2012 12:47:07 GMT-0300 (GMT-03:00), generated by JsDoc Toolkit 2.4.0

Overview

Is a UI Widget for show dates.

Summary

Visibility Name Description
<private>  
Handles behavior of arrows to move around months.
<private>  
The current date that should be shown on Calendar.
<private>  
Collection of weekdays (short names).
<public>  
Reference to a DOM Element.
<private>  
Map of date formats.
<private>  
Collection of months names.
<private>  
Sets the date object of selected day.
<private>  
Reference to a internal component instance, saves all the information and configuration properties.
<private>  
Thead tag, including ARIA and cells with each weekday name.
<public>  
This public property defines the component type.
<public>  
uid
The 'uid' is the Chico's unique instance identifier.

Fields borrowed from class ch.Uiobject: DOMParent,originalContent,position,staticContent

Visibility Name Description
<private>  
addZero(num)
Completes with zero the numbers less than 10.
<private>  
Creates a JSON Object with reference to day, month and year, from a determinated date.
<private>  
Creates a complete month in a table.
<public>  
from()
Set a minimum selectable date.
<public>  
hide()
Triggers the innerHide method and returns the public scope to keep method chaining.
<private>  
isSelectable(year, month, day)
Indicates if an specific date is selected or not (including date ranges and simple dates).
<public>  
next(time)
Move to the next month or year.
<private>  
Move to next month of Calendar.
<private>  
Move to next year of Calendar.
<private>  
parseDate(value)
Parse string to YYYY/MM/DD or DD/MM/YYYY format date.
<private>  
Move to previous month of Calendar.
<private>  
Move to previous year of Calendar.
<public>  
Reset the Calendar to date of today
<private>  
select(date)
Selects an specific date to show.
<public>  
Select a specific day into current month and year.
<public>  
show()
Triggers the innerShow method and returns the public scope to keep method chaining.
<public>  
to()
Set a maximum selectable date.
<public>  
Returns date of today
<private>  
Refresh the structure of Calendar's table with a new date.

Methods borrowed from class ch.Uiobject: content, prevent

Methods borrowed from class ch.Object: callbacks, off, on, once, trigger

Visibility Name Description
<public>  
Callback function
<public>  
Callback function
<public>  
Callback function
<public>  
Callback function
<public>  
Triggers when the component is ready to use (Since 0.8.0).
<public>  
Callback function

Classdetail

Parameters

  • conf: Object, Optional. Object with configuration properties.
  • conf.format: String, Optional. Sets the date format. By default is "DD/MM/YYYY".
  • conf.selected: String, Optional. Sets a date that should be selected by default. By default is the date of today.
  • conf.from: String, Optional. Set a maximum selectable date.
  • conf.to: String, Optional. Set a minimum selectable date.
  • conf.points: String, Optional. Points to be positioned. See Positioner component. By default is "ct cb".
  • conf.monthsNames: Array, Optional. By default is ["Enero", ... , "Diciembre"].
  • conf.weekdays: Array, Optional. By default is ["Dom", ... , "Sab"].

Returns

  • itself

Examples

// Create a new Calendar with configuration.
var me = $(".example").calendar({
	 "format": "MM/DD/YYYY",
	 "selected": "2011/12/25",
	 "from": "2010/12/25",
	 "to": "2012/12/25",
	 "monthsNames": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
	 "weekdays": ["Su", "Mo", "Tu", "We", "Thu", "Fr", "Sa"]
});
// Create a new Calendar with a class name 'example'.
var me = $(".example").calendar();

Properties detail

arrows (private, Object)

Handles behavior of arrows to move around months.

currentDate (private, Object)

The current date that should be shown on Calendar.

DAYS_SHORTNAMES (private, Array)

Collection of weekdays (short names).

element (public, HTMLElement)

Reference to a DOM Element. This binding between the component and the HTMLElement, defines context where the component will be executed. Also is usual that this element triggers the component default behavior.

FORMAT_DATE (private, Object)

Map of date formats.

MONTHS_NAMES (private, Array)

Collection of months names.

selected (private, Object)

Sets the date object of selected day.

that (private, object)

Reference to a internal component instance, saves all the information and configuration properties.

thead (private, String)

Thead tag, including ARIA and cells with each weekday name.

type (public, String)

This public property defines the component type. All instances are saved into a 'map', grouped by its type. You can reach for any or all of the components from a specific type with 'ch.instances'.

uid (public, Number)

The 'uid' is the Chico's unique instance identifier. Every instance has a different 'uid' property. You can see its value by reading the 'uid' property on any public instance.

Methods detail

addZero (private)

Completes with zero the numbers less than 10.

Parameters
  • num: . Number
Returns
  • String

createDateObject (private)

Creates a JSON Object with reference to day, month and year, from a determinated date.

Parameters
  • date: .
Returns
  • Object

createTable (private)

Creates a complete month in a table.

Parameters
  • date: . {Object} Date from will be created the entire month.
Returns
  • jQuery Object

from (public)

Set a minimum selectable date.

Parameters
  • "YYYY/MM/DD". (Since : string.
Returns
  • itself

hide (public)

Triggers the innerHide method and returns the public scope to keep method chaining.

Examples
// Following the first example, using 'me' as modal's instance controller:
me.hide();
Returns
  • itself

isSelectable (private)

Indicates if an specific date is selected or not (including date ranges and simple dates).

Parameters
  • year: .
  • month: .
  • day: .
Returns
  • Boolean

next (public, itself)

Move to the next month or year. If it isn't specified, it will be moved to next month.

Parameters
  • time: String. A string that allows specify if it should move to next month or year.
Returns
  • (itself)

nextMonth (private)

Move to next month of Calendar.

Returns
  • itself

nextYear (private)

Move to next year of Calendar.

Returns
  • itself

parseDate (private)

Parse string to YYYY/MM/DD or DD/MM/YYYY format date.

Parameters
  • value: . {String} The date to be parsed.

prevMonth (private)

Move to previous month of Calendar.

Returns
  • itself

prevYear (private)

Move to previous year of Calendar.

Returns
  • itself

reset (public)

Reset the Calendar to date of today

Returns
  • itself

select (private)

Selects an specific date to show.

Parameters
  • date: . {Date} Date to be selected.
Returns
  • itself

selectDay (public, string)

Select a specific day into current month and year.

Parameters
  • (Since : string || number.
Returns
  • New selected date. (string)

show (public)

Triggers the innerShow method and returns the public scope to keep method chaining.

Examples
// Following the first example, using 'me' as modal's instance controller:
me.show();
Returns
  • itself

to (public)

Set a maximum selectable date.

Parameters
  • "YYYY/MM/DD". (Since : string.
Returns
  • itself

today (public)

Returns date of today

Returns
  • date

updateTable (private)

Refresh the structure of Calendar's table with a new date.

Parameters
  • date: . {String} Date to be selected.

Events detail

nextMonth (public)

Callback function

nextYear (public)

Callback function

prevMonth (public)

Callback function

prevYear (public)

Callback function

ready (public)

Triggers when the component is ready to use (Since 0.8.0).

Examples
// Following the first example, using 'me' as Calendar's instance controller:
me.on("ready", function () {
	this.show();
});

select (public)

Callback function