Calendar depicts a navigable calendar that can show a selected date, and have the client select another date.

More Attributes

|

max

Maximum date that the calendar will accept as valid. It must not be less than its minimum. If no max value is required, it must be set to null. Expects a YYYY-MM-DD[T]HH:mmZ formatted string. When set to "today", the value will be transformed to the current day.
Show Markup

                      

min

Minimum date that the NumberInput will accept as valid. It must not be greater than its maximum. If no min value is required, it must be set to null. Expects a YYYY-MM-DD[T]HH:mmZ formatted string. When set to "today", the value will be transformed to the current day.
Show Markup

                      

invalid

Indicates that there is an error with the current value. This is normally the case when the value is not within the specified min/max. The component cannot be initialized as invalid, since assigning the value, min and max will determine if the current state is valid. After the component is initialized it will accept to be marked as invalid. In the example shown below, the invalid state is shown since the date is outside of the min/max values.
Show Markup

                      

name

Name that identifies the component when submitting the form.
Show Markup

                      

required

Indicates that the user must fill in a value before submitting a form.
Show Markup

            

The following examples demonstrate usage of the JavaScript API's for Coral.Calendar.

The following JavaScript manually initializes the component on page initialization and adds it to the DOM.

                    

No example content provided!

Getting the value

The following will display the above component's value in an alert.
                    

No example content provided!

Setting the value

The following will set the above component's value to December 5th 2014.
                        

No example content provided!

Responding to user interaction

The following example shows how to detect changes performed by the user.
                        

No example content provided!

Working with locales

The following example sets up the component to use the appropriate date formatting for the specified page locale (e.g. <html lang="fr-FR">). Requires moment-with-locales.js.

                    

No example content provided!

Note: moment-with-locales.js provides support to close to 100 locales. If maintaining minimal footprint is critical to your product, it's possible to generate a custom version (moment-with-locales.custom.js) that limits support to a set of languages you can specify.

Log

Coral.Calendar API

Constructor

JavaScript:

new Coral.Calendar() or document.createElement('coral-calendar')

HTML Tag:

<coral-calendar>

Extends

Instance Properties

instance.disabled {Boolean}

Reflected
Whether this field is disabled or not.
Inherited From:
Default Value:
  • false
HTML Attribute:
  • disabled

instance.headerFormat {String}

The format used to display the current month and year. See http://momentjs.com/docs/#/displaying/ for valid format string options.
Default Value:
  • "MMMM YYYY"
HTML Attribute:
  • headerformat

instance.invalid {Boolean}

Reflected
Whether the current value of this field is invalid or not.
Inherited From:
Default Value:
  • false
HTML Attribute:
  • invalid

instance.labelledBy {String}

Reference to a space delimited set of ids for the HTML elements that provide a label for the formField. Implementers should override this method to ensure that the appropriate descendant elements are labelled using the aria-labelledby attribute. This will ensure that the component is properly identified for accessibility purposes. It reflects the aria-labelledby attribute to the DOM.
Inherited From:
Default Value:
  • null
HTML Attribute:
  • labelledby

instance.max {String | Date}

The max selectable date in the Calendar view. When passed a string, it needs to be 'YYYY-MM-DD' formatted.
Default Value:
  • null
HTML Attribute:
  • max

instance.min {String | Date}

The minimal selectable date in the Calendar view. When passed a string, it needs to be 'YYYY-MM-DD' formatted.
Default Value:
  • null
HTML Attribute:
  • min

instance.name {String}

Reflected
Name used to submit the data in a form.
Inherited From:
Default Value:
  • ""
HTML Attribute:
  • name

instance.readOnly {Boolean}

Reflected
Whether this field is readOnly or not. Indicating that the user cannot modify the value of the control. This is ignored for checkbox, radio or fileupload.
Inherited From:
Default Value:
  • false
HTML Attribute:
  • readonly

instance.required {Boolean}

Reflected
Whether this field is required or not.
Inherited From:
Default Value:
  • false
HTML Attribute:
  • required

instance.startDay {Number}

Defines the start day for the week, 0 = Sunday, 1 = Monday etc., as depicted on the calendar days grid.
Default Value:
  • 0
HTML Attribute:
  • startday

instance.value {String}

The current value. When set to 'today', the value is coerced into the clients local date expressed as string formatted in accordance to the set valueFormat.
Default Value:
  • ""
HTML Attribute:
  • value

instance.valueAsDate {Date}

The value returned, or set, as a Date. If the value is '' it will return null.
Default Value:
  • null

instance.valueFormat {String}

Reflected
The format to use on expressing the selected date as a string on the value attribute. See http://momentjs.com/docs/#/displaying/ for valid format string options.
Default Value:
  • "YYYY-MM-DD"
HTML Attribute:
  • valueformat

Methods

instance.get

Get the value of a property.
Parameters:
Name Type Description
property String The name of the property to fetch the value of.
Returns:
Property value. {*}
Inherited From:

instance.hide

Hide this component.
Returns:
this, chainable {Coral.Component}
Inherited From:

instance.off

Remove an event listener.
Parameters:
Name Type Optional Description
eventName String No
The event name to stop listening for.
selector String Yes
The selector that was used for event delegation.
func function No
The function that was passed to on().
useCapture Boolean Yes
Only remove listeners with useCapture set to the value passed in.
Returns:
this, chainable. {Coral.Component}
Inherited From:

instance.on

Add an event listener.
Parameters:
Name Type Optional Default Description
eventName String No
The event name to listen for.
selector String Yes
The selector to use for event delegation.
func function No
The function that will be called when the event is triggered.
useCapture Boolean Yes
false Whether or not to listen during the capturing or bubbling phase.
Returns:
this, chainable. {Coral.Component}
Inherited From:

instance.remove

Non-destructively remove this element. It can be re-added by simply appending it to the document again. It will be garbage collected if there are no more references to it. This is different from using jQuery's remove(), which is destructive in that it removes data and listeners.
Inherited From:

instance.show

Show this component.
Returns:
this, chainable {Coral.Component}
Inherited From:

instance.trigger

Trigger an event.
Parameters:
Name Type Optional Default Description
eventName String No
The event name to trigger.
props Object Yes
Additional properties to make available to handlers as event.detail.
bubbles Boolean Yes
true Set to false to prevent the event from bubbling.
cancelable Boolean Yes
true Set to false to prevent the event from being cancelable.
Returns:
CustomEvent object {CustomEvent}
Inherited From:

Events

change

Triggered when the value has changed. This event is only triggered by user interaction.
Callback Parameters:
Name Type Description
event Object Event object.
Inherited From:

coral-component:attached

Triggered when the component is attached to the DOM.
Callback Parameters:
Name Type Description
event Object Event object.
Inherited From:

coral-component:detached

Triggered when the component is detached to the DOM.
Callback Parameters:
Name Type Description
event Object Event object.
Inherited From:

coral-component:ready

Triggerred when the component has been upgraded and is ready for use.
Callback Parameters:
Name Type Description
event Object Event object.
Inherited From: