# Calendar

(part of package '[Bootstrap Components](https://docs.servoy.com/reference/servoyextensions/packages/ui-component-packages/bootstrap-components)')\
Extends designtime/SolutionModel: [JSWebComponent](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jswebcomponent)\
Extends runtime: [RuntimeWebComponent](https://docs.servoy.com/reference/servoycore/dev-api/forms/runtimeform/elements/runtimewebcomponent)

Calendar is an input control component. It allows using a date-picker to choose Date values for a bound data-provider.\
The key difference compared to the Calendar-Inline component is that this Calendar component is an input field that the shows the date-picker in a popup only when clicked; whereas the Calendar-Inline shows the date-picker directly on the form.

This is a reference page; many components have detailed usage guides [here](https://docs.servoy.com/guides/develop/application-design/ui-components).

## Properties

### calendarWeeks

Indicates whether calendar week numbers should be displayed. Type: [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean) Default Value: true

***

### dataProviderID

The bound data provider identifier representing the Date value. Type: [Dataprovider](https://docs.servoy.com/servoy-developer/component_and_service_property_types#dataprovider)

***

### enabled

Flag indicating whether the calendar is enabled for user interaction. Type: [Enabled](https://docs.servoy.com/servoy-developer/component_and_service_property_types#protected) Default Value: true

***

### format

The date format string used to display and parse the date. Type: [Format](https://docs.servoy.com/servoy-developer/component_and_service_property_types#format)

***

### options

See <https://getdatepicker.com/6/options/> what options you can set, some could be overridden by the locale again Type: [Json](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/json)

***

### pickerOnly

Whether to only allow date entry from the date picker or not (cannot type the date). Type: [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean) Default Value: false

***

### placeholderText

Placeholder text displayed when no date is selected. Type: [Tagstring](https://docs.servoy.com/servoy-developer/component_and_service_property_types#tagstring)

***

### selectOnEnter

Whether to select the text when date field is focused. Type: [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean)

***

### styleClass

Set the styleclasses that should be applied at to this component Type: [Styleclass](https://docs.servoy.com/servoy-developer/component_and_service_property_types#styleclass) Default Value: "form-control"

***

### tabSeq

The tab sequence order for keyboard navigation. Type: [Tabseq](https://docs.servoy.com/servoy-developer/component_and_service_property_types#tabseq)

***

### theme

The visual theme applied to the calendar (e.g. light or dark). Type: [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) Default Value: "light"

***

### toolTipText

The tooltip text shown when hovering over the calendar. Type: [Tagstring](https://docs.servoy.com/servoy-developer/component_and_service_property_types#tagstring)

***

### visible

Whether the button is visible or not Type: [Visible](https://docs.servoy.com/servoy-developer/component_and_service_property_types#visible)

***

## Events

### onActionMethodID(event)

**@param** {JSEvent} event The event object containing information about the action event

**Parameters:**

> * {[JSEvent](https://docs.servoy.com/reference/servoycore/dev-api/application/jsevent)} event

***

### onDataChangeMethodID(oldValue,newValue,event)

Handle changed data, return false if the value should not be accepted.\
JSEvent.data will contain extra information about dataproviderid, its scope and the scope id (record datasource or form/global variable scope)

**Parameters:**

> * {[${dataproviderType}](https://docs.servoy.com/servoy-developer/component_and_service_property_types#dataprovider)} oldValue The previous date value from the data provider
> * {[${dataproviderType}](https://docs.servoy.com/servoy-developer/component_and_service_property_types#dataprovider)} newValue The new date value to be set in the data provider
> * {[JSEvent](https://docs.servoy.com/reference/servoycore/dev-api/application/jsevent)} event The event object associated with the data change

**Returns:** {[Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean)}

***

### onFocusGainedMethodID(event)

**@param** {JSEvent} event The event object containing details about the focus event

**Parameters:**

> * {[JSEvent](https://docs.servoy.com/reference/servoycore/dev-api/application/jsevent)} event

***

### onFocusLostMethodID(event)

**@param** {JSEvent} event The event object containing details about the focus loss event

**Parameters:**

> * {[JSEvent](https://docs.servoy.com/reference/servoycore/dev-api/application/jsevent)} event

***

## API

### disableDates(dateArray,keepInvalid)

Dates that should be disabled.

**Parameters:**

> * {[Array\<Date>](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/date)} dateArray An array of dates to be disabled in the component.
> * {[Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean)} \[keepInvalid] A flag indicating whether to retain previously disabled dates that are no longer valid (true) or to remove them (false).

***

### disableDays(dayArray,keepInvalid)

Days of the week that should be disabled. Values are 0 (Sunday) to 6 (Saturday).

**Parameters:**

> * {[Array\<Number>](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number)} dayArray An array of numbers representing the days of the week to be disabled, where 0 corresponds to Sunday and 6 to Saturday.
> * {[Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean)} \[keepInvalid] A flag indicating whether to retain previously disabled days that are no longer valid (true) or to remove them (false).

***

### requestFocus(mustExecuteOnFocusGainedMethod)

Set the focus to this calendar.

**Example:**

```js
myElement.requestFocus();
```

**Parameters:**

> * {[Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean)} \[mustExecuteOnFocusGainedMethod] if false will not execute the onFocusGained method; the default value is true

***

### setMinMaxDate(minDate,maxDate,keepInvalid)

Set the min date or max date that can be selected

**Parameters:**

> * {[Date](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/date)} minDate The earliest date that can be selected in the component.
> * {[Date](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/date)} maxDate The latest date that can be selected in the component.
> * {[Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean)} \[keepInvalid] Optional. A flag indicating whether to retain previously restricted dates that are no longer valid (true) or to remove them (false).

***

***