ch.Calendar (Class)

Documentation updated on Fri Jul 06 2012, generated by JsDoc Toolkit.

Overview

ch.Calendar extends ch.Uiobject. Calendar shows months, and lets you move across the months of the year. Calendar lets you set one or many dates as selected.

View source on GitHub

Returns

itself

Use

Create a new Calendar with a class name 'example'.

var widget = $(".example").calendar();

Create a new Calendar with configuration.

var widget = $(".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"]
});

Configuration

The following options lets you create a customized ch.Calendar:

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

Returns

Properties

element

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.

HTMLElement

type

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'.

string

uid

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.

number

Methods

content(content)

Sets and gets component content. To get the defined content just use the method without arguments, like 'widget.content()'. To define a new content pass an argument to it, like 'widget.content("new content")'. Use a valid URL to get content using AJAX. Use a CSS selector to get content from a DOM Element. Or just use a String with HTML code.

It method borrows ch.Uiobject#content.

Parameters

  • content: string Static content, DOM selector or URL. If argument is empty then will return the content.

Examples

Get the defined content

widget.content();

Set static content

widget.content("Some static content");

Set DOM content

widget.content("#hiddenContent");

Set AJAX content

widget.content("http://chico.com/some/content.html");
from()

Set a minimum selectable date.

Parameters

  • "YYYY/MM/DD". Since 0.9: string

Returns

  • itself
hide()

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

Returns

  • itself

Examples

Following the first example, using widget as modal's instance controller:

widget.hide();
next(time)

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
off(event, handler)

Removes a callback function from specific event.

It method borrows ch.Object#off.

Parameters

  • event Since version 0.7.1: string Event nawidget.
  • handler Since version 0.7.1: function Handler function.

Returns

  • itself

Examples

Will remove event handler to the "ready" event

var startDoingStuff = function () {
    // Some code here!
};

widget.off("ready", startDoingStuff);
on(event, handler)

Add a callback function from specific event.

It method borrows ch.Object#on.

Parameters

  • event Since version 0.7.1: string Event nawidget.
  • handler Since version 0.7.1: function Handler function.

Returns

  • itself

Examples

Will add a event handler to the "ready" event

widget.on("ready", startDoingStuff);
once(event, handler)

Add a callback function from specific event that it will execute once.

It method borrows ch.Object#once.

Parameters

  • event Since version 0.8.0: string Event nawidget.
  • handler Since version 0.8.0: function Handler function.

Returns

  • itself

Examples

Will add a event handler to the "contentLoad" event once

widget.once("contentLoad", startDoingStuff);
prev(time)

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

Parameters

  • time: String A string that allows specify if it should move to previous month or year.

Returns

  • itself
reset()

Reset the Calendar to date of today

Returns

  • itself
selectDay()

Select a specific day into current month and year.

Parameters

  • Since 0.10.1: string || number

Returns

  • New selected date. (string)
show()

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

Returns

  • itself

Examples

Following the first example, using widget as modal's instance controller:

widget.show();
to()

Set a maximum selectable date.

Parameters

  • "YYYY/MM/DD". Since 0.9: string

Returns

  • itself
today()

Returns date of today

Returns

  • date

Events

nextMonth
It triggers a callback when a next month is shown.

Examples

widget.on("nextMonth",function(){
	sowidget.action();
});
nextYear
It triggers a callback when a next year is shown.

Examples

widget.on("nextYear",function(){
	sowidget.action();
});
prevMonth
It triggers a callback when a previous month is shown.

Examples

widget.on("prevMonth",function(){
	sowidget.action();
});
prevYear
It triggers a callback when a previous year is shown.

Examples

widget.on("prevYear",function(){
	sowidget.action();
});
ready
Triggers when the component is ready to use (Since 0.8.0).

Examples

Following the first example, using widget as Calendar's instance controller:

widget.on("ready", function () {
	this.show();
});
select
It triggers a callback when a date is selected.

Examples

widget.on("select",function(){
	sowidget.action();
});