# Calendar

## 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 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=calendar).

## Get Started

## Modifying Calendar at Design-Time

Calendar, like all components, have properties which can be modified at design-time to set the appearance and behavior of the component. Select the componentName 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.

### Setting the tooltipText

Calendar, 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).

### Setting the placeholderText

The text displayed inside the calendar textbox can be modified by setting its [`placeholderText`](/reference/servoyextensions/ui-components/input-control/calendar.md#placeholdertext) property. This will just be plain text which will be shown as an instruction on what you can do within the calendar's textbox. When you insert a value in the calendar textbox the placeholderText will disappear and your inserted text will take it's place. For more options open the [Text Property Editor](/reference/servoy-developer/object-editors/text-property-editor.md).

### Setting the property3name (or delete if needed)

### Styling

Like all components, Calendar 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 has events, which allow you to execute some logic when something happens in the UI. Of course, the most common event for a Calendar 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 button's `onAction` event is fired and the [Event](/reference/servoycore/dev-api/application/jsevent.md) object will be passed to it.

```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 reference](/reference/servoyextensions/ui-components/input-control/calendar.md) for comprehensive list of [all events](/reference/servoyextensions/ui-components/input-control/calendar.md#events)
{% endhint %}

## Modifying a Calendar at Runtime

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

#### Enabling or Disabling a Calendar

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

Change this to match your component

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

### HidingShowing a Calendar

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

Change this to match your component

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

## Calling Calendar API Methods

Like most components, a Calendar 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.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 using the `addStyleClass` method.

Change this to match your component

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

### Related Articles

The following articles are recommended for additional reading

* [Calendar Reference Documentation](/reference/servoyextensions/ui-components/input-control/calendar.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.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.