ch.Calendar
Description
Calendar shows months, and lets you move across the months of the year. Calendar lets you set one or many dates as selected.
How-to
// Create a new Calendar.
var calendar = new ch.Calendar($el, [options]);
// Create a new Calendar with jQuery or Zepto.
var calendar = $(selector).calendar();
// Creates a new Calendar with custom options.
var calendar = $(selector).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']
});
// Creates a new Calendar using a shorthand way (selected date as parameter).
var calendar = $(selector).calendar('2011/12/25');
Parameters
-
$el
- jQuerySelector | ZeptoSelector : A jQuery or Zepto Selector to create an instance of ch.Calendar. -
options
- Object : Options to customize an instance.-
format
- String : Sets the date format. You must use "DD/MM/YYYY", "MM/DD/YYYY" or "YYYY/MM/DD". Default: "DD/MM/YYYY". -
selected
- String : Sets a date that should be selected by default. Default: The date of today. -
from
- String : Set a minimum selectable date. The format of the given date should be YYYY/MM/DD. -
to
- String : Set a maximum selectable date. The format of the given date should be YYYY/MM/DD. -
monthsNames
- Array : A collection of months names. Default: ["Enero", ... , "Diciembre"]. -
weekdays
- Array : A collection of weekdays. Default: ["Dom", ... , "Sab"].
-
Extends
Properties
.$container
jQuerySelector | ZeptoSelector
The calendar container.
.uid
Number
A unique id to identify the instance of a widget.
.Widget#name
String
The name of a widget.
// You can reach the instance associated.
var widget = $(selector).data(name);
Methods
-
date
- String : A given date to select. The format of the given date should be "YYYY/MM/DD". -
date
- String : A given date to set as minimum selectable date. The format of the given date should be "YYYY/MM/DD". -
date
- String : A given date to set as maximum selectable date. The format of the given date should be "YYYY/MM/DD". -
event
- String : The name of the event you want to emit. -
var_args
- Object : Data to pass to the listeners. -
event
- String : The event name. -
event
- String : Event name. -
listener
- Function : Listener function. -
event
- String : The event name to subscribe. -
listener
- Function : Listener function. -
once
- Boolean : Indicate if a listener function will be called only one time. -
event
- String : Event name. -
listener
- Function : Listener function.
.constructor()
Returns a reference to the constructor function.
.destroy()
Destroys a Calendar instance.
// Destroying an instance of Calendar.
calendar.destroy();
.getToday() → {String}
Returns date of today
// Get the date of today.
var today = calendar.getToday();
.nextMonth() → {calendar}
Moves to the next month.
// Moves to the next month.
calendar.nextMonth();
.nextYear() → {calendar}
Move to the next year.
// Moves to the next year.
calendar.nextYear();
.prevMonth() → {calendar}
Move to the previous month.
// Moves to the prev month.
calendar.prevMonth();
.prevYear() → {calendar}
Move to the previous year.
// Moves to the prev year.
calendar.prevYear();
.select(date) → {calendar}
Selects a specific date or returns the selected date.
// Returns the selected date.
calendar.select();
// Select a specific date.
calendar.select('2014/05/28');
.setFrom(date) → {calendar}
Set a minimum selectable date.
// Set a minimum selectable date.
calendar.setFrom('2010/05/28');
.setTo(date) → {calendar}
Set a maximum selectable date.
// Set a maximum selectable date.
calendar.setTo('2014/05/28');
.emit(event, var_args)
Execute each item in the listener collection in order with the specified data.
// Will emit the 'ready' event with 'param1' and 'param2' as arguments.
widget.emit('ready', 'param1', 'param2');
.getListeners(event) → {Array}
Returns all listeners from the collection for a specified event.
// Returns listeners from 'ready' event.
widget.getListeners('ready');
.off(event, listener) → {Object}
Removes a listener from the collection for a specified event.
// Will remove event listener to 'ready' event.
widget.off('ready', listener);
.on(event, listener, once)
Adds a listener to the collection for a specified event.
// Will add an event listener to 'ready' event.
widget.on('ready', listener);
.once(event, listener) → {Object}
Adds a listener to the collection for a specified event to will execute only once.
// Will add an event handler to 'contentLoad' event once.
widget.once('contentLoad', listener);
.constructor()
Returns a reference to the constructor function.
.destroy()
Destroys an instance of Widget and remove its data from asociated element.
// Destroying an instance of Widget.
widget.destroy();
.disable() → {instance}
Disables an instance of Widget.
// Disabling an instance of Widget.
widget.disable();
.enable() → {instance}
Enables an instance of Widget.
// Enabling an instance of Widget.
widget.enable();
.require() → {instance}
Adds functionality or abilities from other classes.
// You can require some abilitiest to use in your widget.
// For example you should require the collpasible abitliy.
var widget = new Widget(element, options);
widget.require('Collapsible');
Events
'destroy'
Emits when a widget is destroyed.
// Subscribe to "destroy" event.
widget.on('destroy', function () {
// Some code here!
});
'disable'
Emits when a widget is disable.
// Subscribe to "disable" event.
widget.on('disable', function () {
// Some code here!
});
'enable'
Emits when a widget is enable.
// Subscribe to "enable" event.
widget.on('enable', function () {
// Some code here!
});
'nextmonth'
Event emitted when a next month is shown.
// Subscribe to "nextmonth" event.
calendar.on('nextmonth', function () {
// Some code here!
});
'nextyear'
Event emitted when a next year is shown.
// Subscribe to "nextyear" event.
calendar.on('nextyear', function () {
// Some code here!
});
'prevmonth'
Event emitted when a previous month is shown.
// Subscribe to "prevmonth" event.
calendar.on('prevmonth', function () {
// Some code here!
});
'prevyear'
Event emitted when a previous year is shown.
// Subscribe to "prevyear" event.
calendar.on('prevyear', function () {
// Some code here!
});
'ready'
Event emitted when the widget is ready to use.
// Subscribe to "ready" event.
calendar.on('ready', function () {
// Some code here!
});
'select'
Event emitted when a date is selected.
// Subscribe to "select" event.
calendar.on('select', function () {
// Some code here!
});