v 1.1.3

modo.Calendar

A simple calendar widget with the ability to let the user pick a specific day.

The calendar widget is made of two parts: The month selector on top, displaying two modo.Buttons to navigate forward and backwards in the months, as well as a label, which displays the currently selected month/year, according to the defined monthLabelFormat.

The lower part of the widged shows a calendar-field, with multiple rows of days. The first row contains localizable week-day names.

The calendar can be used to either just display a calendar, or even letting the user pick a date from it.


Localization

The modo.Calendar object has a couple of properties you can change for localization reasons. When you change this properties, the rendering of all modo.Calendar elements will be affected.

Property NameDescription

PREVIOUS

Label of the 'Previous Month' button in the calendar month selector. Default: <

NEXT

Label of the 'Next Month' button in the calendar month selector. Default: >

MONTH_NAMES

Array with the full names of every month in the year.

Default:

['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']

MONTH_NAMES_SHORT

Array with short Names of every month in the year.

Default:

['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

DAY_NAMES

Array with the full names of all week days.

Default:

['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']

DAY_NAMES_SHORT

Array with short names of all week days.

Default:
['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']

SUFFIX

Array with suffixes to be appended to certain numbers, when formatting dates.
If you are using a language without suffixes, just provide an array with four empty strings.

Default:
['st', 'nd', 'rd', 'th']

Constructor

modo.Calendar(params)modo.Calendar

The following list of parameters can be used in the params object, passed to the constructor. Parameters in [brackets] are optional.

PropertyDescription

[minDate]

A JavaScript Date object, defining the lowest date to select and navigate to.

[maxDate]

A JavaScript Date object, defining the highest date to select and navigate to.

[monthLabelFormat]

A string, defining the format of the month label of the calendar. Follows the rules of the PHP date formatter. Default format is: F Y, which becomes for example January 2013.

[date]

A JavaScript Date object, which represents a pre-selected date on the calendar.

[selectable]

Boolean definition if a user should be able to pick a date on the calendar, or just browse months. Default: true

[className]

A string with custom CSS classes to apply to the generated DOM element

[dataAttributes]

A object with attributes to assign to the generated DOM element. Omit the "data-" part. So for example {count: 1} becomes data-count="1" on the DOM element.

[el]

The jQuery enhanced DOM element to be generated. If nothing is set, a standard DIV container will be created. If you want to use a different DOM element, pass a jQuery generated DOM element to this parameter.

[showEffect]

The default show effect for the element. See associated property description. Default: null

[hideEffect]

The default hide effect for the element. See associated property description. Default: null

Properties

Inherited Properties from modo.Element

elObject

Contains the jQuery enhanced DOM Node of this modoJS element.

modoIdNumber

Contains a internally given, numeric ID for this element.

visibleBool

Will be set by .show() and .hide(). Access this property to check the current visibility of the element.

showEffectobject

Set a default show effect (like the options you can pass to the show() / hide() methods.

Example:

element.showEffect = {
    effect: 'slideDown',
    effectArgs: ['fast']
};

hideEffectobject

Define a default hide effect instead of a simple, instant hide.

Methods

enable()this

Enables the button to capture clicks. Removes the CSS-Class mdo-disabled from its DOM element. Triggers the Backbone Event "enabled".

disable()this

Disables the button to not capture any clicks. Adds the CSS-Class mdo-disabled to its DOM element. Triggers the Backbone Event "disabled".

Inherited Methods from modo.Element

setFlexible([value])this

Pass either true or false to this value to make the element stretch inside a modo.FlexContainer element.

show(options)this

Make the connected DOM object visible and trigger the Backbone Event "show".

You can control the way the element is shown by passing an object of options.

Example:

element.show({
    effect: 'slideDown',
    effectArgs: ['fast']
});

hide()this

Make the connected DOM object invisible and trigger the Backbone Event "hide".

You can control the hide effect the same way as with the show() method.

addClass(classname, doPrefix)this

Will add another class name to the DOM element. The class name will be automatically prefixed (i.e. with mdo-) if doPrefix = true (default).

removeClass(classname, doPrefix)this

Will remove a class name from the DOM element. The class name will be automatically prefixed.

addClassTemporary(classname, timeout, doPrefix)this

Helps with adding a classname temporarily to the object. Just call this method and after the specified amount of time, the added class(es) will be removed.


Note: All modoJS Objects are extended with all methods of the Backbone.Events class.


Events

click

Triggered, when the button is enabled and a user has clicked on it.

Event parameterDescription

event

The click event object

enabled

Triggered, when the button has been enabled through enable().

disabled

Triggered, when the button has been disabled through disable().

Inherited Events from modo.Element

show

Triggered, when the object has been displayed through show()

hide

Triggered, when the object has been hidden through hide()

CSS Classes

mdo-button

Applied on the button element.

mdo-disabled

Applied when the element has been disabled through disable(). Will be removed after a call to enable().

Inherited CSS Classes from modo.Element

mdo-element

Basic class that will be applied to every element that extends modo.Element.

mdo-flexible

Will be applied to every modo element where setFlexible(true) has been called upon.

comments powered by Disqus