ch.Calendar

Description

It lets you move across the months of the year and allow to set dates as selected.

How-to

// Create a new Calendar.
var calendar = new ch.Calendar([el], [options]);

// Creates a new Calendar with custom options.
var calendar =  new ch.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 = new ch.Calendar('2011/12/25');

Parameters

• el - HTMLElement : A HTMLElement 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

• ch.Component

Properties

._next HTMLDivElement

Template of next arrow.

._prev HTMLDivElement

Template of previous arrow.

.Calendar#name String

The name of the component.

.Component#name String

The name of a component.

.container HTMLElement

The calendar container.

.uid Number

A unique id to identify the instance of a component.

Methods

.constructor()

Returns a reference to the constructor function.

.destroy()

Destroys a Calendar instance.

// Destroy a calendar
calendar.destroy();
// Empty the calendar reference
calendar = undefined;

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

• date - String : A given date to select. The format of the given date should be "YYYY/MM/DD".

// Returns the selected date.
calendar.select();

// Select a specific date.
calendar.select('2014/05/28');

.setFrom(date) → {calendar}

Set a minimum selectable date.

• date - String : A given date to set as minimum selectable date. The format of the given date should be "YYYY/MM/DD".

// Set a minimum selectable date.
calendar.setFrom('2010/05/28');

.setTo(date) → {calendar}

Set a maximum selectable date.

• date - String : A given date to set as maximum selectable date. The format of the given date should be "YYYY/MM/DD".

// Set a maximum selectable date.
calendar.setTo('2014/05/28');

.constructor()

Returns a reference to the constructor function.

.destroy()

Destroys an instance of Component and remove its data from asociated element.

// Destroy a component
component.destroy();
// Empty the component reference
component = undefined;

.disable() → {component}

Disables an instance of Component.

// Disabling an instance of Component.
component.disable();

.enable() → {component}

Enables an instance of Component.

// Enabling an instance of Component.
component.enable();

.require() → {component}

Adds functionality or abilities from other classes.

// You can require some abilitiest to use in your component.
// For example you should require the collpasible abitliy.
var component = new Component(element, options);
component.require('Collapsible');

Events

'destroy'

Emits when a component is destroyed.

// Subscribe to "destroy" event.
component.on('destroy', function () {
    // Some code here!
});

'disable'

Emits when a component is disable.

// Subscribe to "disable" event.
component.on('disable', function () {
    // Some code here!
});

'enable'

Emits when a component is enabled.

// Subscribe to "enable" event.
component.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 component 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!
});