# Calendar Inline

## Overview

Calendar-Inline is an input control component. It allows a user us a date-picker to choose Date values for a bound data-provider. Similar to the Calendar component, the Calendar-Inline provides a date-picker interface to choose a date. The key difference is that the 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. Common use cases include selecting a value for a filter or search parameter.

To see a live sample of the component you can go [here](https://samples-dev.samples.servoy-cloud.eu/solution/components?a=calendarinline).

## Get Started

In the [Form Editor](/reference/servoy-developer/object-editors/form-editor.md), drag the Calendar-Inline component from the Pallet onto the form.

<figure><img src="/files/tQ39kK7AkHchcGxPdjiO" alt=""><figcaption><p>Add Calendar Inline</p></figcaption></figure>

{% hint style="info" %}
If the component does not appear in the pallet, it means you do not have the Bootstrap Components package installed. Click "Get more components" at the top of the pallet to open the [Servoy Package Manager](/reference/servoy-developer/package-manager.md) and install it.
{% endhint %}

## Modifying Calendar Inline at Design-Time

Calendar Inline, like all components, have properties which can be modified at design-time to set the appearance and behavior of the component. Select the Calendar Inline in the [Form Editor](/reference/servoy-developer/object-editors/form-editor.md) to see a list of properties in the [Component Properties Editor](/reference/servoy-developer/views/properties.md#properties). Below are some common properties and how to set them at design-time.

{% hint style="info" %}
See the reference docs for [Calendar Inline](/reference/servoyextensions/ui-components/input-control/calendar-inline.md) for a complete list of its [properties](/reference/servoyextensions/ui-components/input-control/calendar-inline.md#properties).
{% endhint %}

### Setting the toolTipText

Calendar Inline, like many components, can display tooltip messages when a user hovers their cursor. Most often, this will just be plain text that describes what will happen on-click. In this case, just enter the value into the editor. For more options open the [Text Property Editor](/reference/servoy-developer/object-editors/text-property-editor.md).

<figure><img src="/files/Vu6ySq2T8rkpLIqp4Bzz" alt=""><figcaption></figcaption></figure>

### Styling

Like all components, Calendar Inline can be styled using themes, variants and raw CSS. To apply any available style class, simply enter one or more space-delimited values for the `styleClass` property.

## Handling Events

Like most components, Calendar Inline has events, which allow you to execute some logic when something happens in the UI. Of course, the most common event for a Calendar Inline is the `onDataChange` event, which is triggered when a date item is clicked.

To handle the event, double-click the value for the `onDataChange` property in the [Properties Editor](https://github.com/Servoy/gitbook/blob/master/reference/servoy-developer/views/component-properties-editor.md). You will see the [Method Selection Wizard](/reference/servoy-developer/object-editors/method-selection-wizard.md). You'll have the option select an existing Method or create a new Method. The method will be called when the component's `onDataChange` event is fired and the [Event](/reference/servoycore/dev-api/application/jsevent.md) object will be passed to it.

<figure><img src="/files/PlBjxerluIZKQ3No2d8j" alt=""><figcaption><p>Create a method to handle the onDataChange event</p></figcaption></figure>

```javascript
/**
 * @param {JSEvent} event
 *
 * @properties={typeid24,uuidA74C281C-00AA-46AA-BB38-500C937F2D1A}
*/ 
function onDataChange(oldValue, newValue, event) {
	 application.output(newValue); //print out the date selected
}
```

{% hint style="info" %}
See the [Calendar Inline reference](/reference/servoyextensions/ui-components/input-control/calendar-inline.md) for comprehensive list of [all events](/reference/servoyextensions/ui-components/input-control/calendar-inline.md#events)
{% endhint %}

## Modifying a Calendar Inline at Runtime

Calendar Inline, like many components, can be modified at runtime through code. Below are a few examples of controlling a Calendar Inline from code.

### Enabling or Disabling a Calendar Inline

You can easily change the `enabled` state of a Calendar Inline at runtime.

```javascript
function disableCalendar(){
	elements.myCalendar.enabled = false;
}
```

### HidingShowing a Calendar Inline

You can easily change the `visible` state of a Calendar Inline at runtime.

```javascript
function hideCalendar(){
	elements.myCalendar.visible = false;
}
```

## Calling Calendar Inline API Methods

Like most components, a Calendar Inline has API methods which can be called from code. Below is an example of common API calls.

### disableDates

Disable some dates from selection in the calendar [`disableDates`](/reference/servoyextensions/ui-components/input-control/calendar-inline.md#disabledates) method.

```javascript
function disableDates(){
	var dates = [];
	var d = new Date(); //create a new date object for today's date
	d.setDate(d.getDate() + 1); //set the date to the next day
	dates.push(d); // add that date object to an array
	elements.myCalendar.disableDates(dates); // send the array to the api which will then disable the day after today.
}
```

### Add CSS Style Class

You can easily add a style class to a Calendar Inline using the `addStyleClass` method.

```javascript
function AddStyleClassCalendar(){
	elements.myCalendar.addStyleClass('mycssclass');
}
```

## Related Articles

The following articles are recommended for additional reading

* [Calendar Inline Reference Documentation](/reference/servoyextensions/ui-components/input-control/calendar-inline.md)
* [Styling and Themes](/guides/develop/application-design/styling-and-themes.md)
* [Scripting the UI](/guides/develop/programming-guide/scripting-the-ui.md)


---

# 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/guides/develop/application-design/ui-components/input-controls/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.