# Calendar Inline

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

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

## Properties

### calendarWeeks

Calendar-Inline is an inline input component. It shows a date-picker so the user can choose Date values for a bound data-provider.\
It is similar to the Calendar component, but this Calendar-Inline shows the date-picker the date-picker directly on the form, not in a popup when clicked. Type: [Boolean](/reference/servoycore/dev-api/js-lib/boolean.md) Default Value: true

***

### dataProviderID

Bound data provider identifier for the date value. Type: [Dataprovider](/reference/servoy-developer/component_and_service_property_types.md#dataprovider)

***

### enabled

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

***

### format

This format is just used to be able to configure 'use as LocalDateTime' Type: [Format](/reference/servoy-developer/component_and_service_property_types.md#format)

***

### styleClass

Set the styleclasses that should be applied at to this component Type: [Styleclass](/reference/servoy-developer/component_and_service_property_types.md#styleclass)

***

### theme

Visual theme applied to the calendar (e.g. light or dark). Type: [String](/reference/servoycore/dev-api/js-lib/string.md) Default Value: "light"

***

### toolTipText

Tooltip text displayed when hovering over the calendar. Type: [Tagstring](/reference/servoy-developer/component_and_service_property_types.md#tagstring)

***

### visible

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

***

## Events

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

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

***

## API

### disableDates(dateArray)

Dates that should be disabled.

**Parameters:**

> * {[Array\<Date>](/reference/servoycore/dev-api/js-lib/date.md)} dateArray An array of dates to be disabled in the component.

***

### disableDays(dayArray)

Days of the week that should be disabled.

**Parameters:**

> * {[Array\<Number>](/reference/servoycore/dev-api/js-lib/number.md)} dayArray An array of numbers representing the days of the week to be disabled, where 0 corresponds to Sunday and 6 to Saturday.

***

### setMinMaxDate(minDate,maxDate)

Set the min date or max date that can be selected

**Parameters:**

> * {[Date](/reference/servoycore/dev-api/js-lib/date.md)} minDate The earliest date that can be selected in the Servoy component.
> * {[Date](/reference/servoycore/dev-api/js-lib/date.md)} maxDate The latest date that can be selected in the Servoy component.

***

***


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/calendar-inline.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.