---
title: "Calendar"
description: "Displays a calendar and time input directly embedded in your window."
---

# Calendar

> Displays a calendar and time input directly embedded in your window.

![](calendar.png)

**Component Palette Icon**:  

![](calendar1.png)

## Description
Displays a calendar and time input directly embedded in your window. Most commonly used by including one of the two date properties (immediate or latched) from the calendar in dynamic [SQL Query Binding](visualization-and-dashboards/property-binding-types/sql-query-binding/sql-query-binding.md).

## Properties
| Name                   | Description                                                                                                        | Property Type | Scripting             | Category   |
| ---------------------- | ------------------------------------------------------------------------------------------------------------------ | ------------- | --------------------- | ---------- |
| Antialias              | Draw with antialias on? Makes text smoother.                                                                       | boolean       | .antialias            | Appearance |
| Background Color       | The background color of the component.                                                                             | Color         | .background           | Appearance |
| Border                 | The border surrounding this component. NOTE that the border is unaffected by rotation.                             | Border        | .border               | Common     |
| Cursor                 | The mouse cursor to use when hovering over this component.                                                         | int           | .cursorCode           | Common     |
| Data Quality           | The data quality code for any tag bindings on this component.                                                      | int           | .dataQuality          | Data       |
| Date (immediate)       | The date as it is selected right now.                                                                              | Date          | .date                 | Data       |
| Date (latched)         | The date the last time "OK" was pressed.                                                                           | Date          | .latchedDate          | Data       |
| Enabled                | If disabled, a component cannot be used.                                                                           | boolean       | .componentEnabled     | Common     |
| Font                   | Font of text on this component.                                                                                    | Font          | .font                 | Appearance |
| Foreground Color       | The foreground color of the component.                                                                             | Color         | .foreground           | Appearance |
| Format String          | The date formatting pattern used to format the string versions of the dates.                                       | String        | .format               | Behavior   |
| Formatted Date         | The date property, as formatted by the format string.                                                              | String        | .formattedDate        | Data       |
| Formatted Latched Date | The latched date property, as formatted by the format string.                                                      | String        | .formattedLatchedDate | Data       |
| Mouseover Text         | The text that is displayed in the tooltip which pops up on mouseover of this component.                            | String        | .toolTipText          | Common     |
| Name                   | The name of this component.                                                                                        | String        | .name                 | Common     |
| Opaque                 | If false, backgrounds are not drawn. If true, backgrounds are drawn.                                               | boolean       | .opaque               | Common     |
| Selected Border        | The border for the selected day indicator.                                                                         | Border        | .selectedBorder       | Appearance |
| Show OK Button         | Turn this off if you don't want to show the OK button. The latched date and the immediate date will be equivalent. | boolean       | .showOkButton         | Behavior   |
| Show Time              | Turn this off if you don't want to show the time panel.                                                            | boolean       | .showTime             | Behavior   |
| Styles                 | Contains the component's styles.                                                                                   | Dataset       | .styles               | Appearance |
| Time Display Format    | The format for displaying time in the panel.                                                                       | int           | .timeDisplayFormat    | Behavior   |
| Time Style             | Select how this calendar should treat the time portion of the date.                                                | int           | .timeStyle            | Behavior   |
| Title Background       | The background of the title bar.                                                                                   | Color         | .titleBackground      | Appearance |
| Today Background       | Background color for the today indicator.                                                                          | Color         | .todayBackground      | Appearance |
| Today Foreground       | Foreground color for the today indicator.                                                                          | Color         | .todayForeground      | Appearance |
| Visible                | If disabled, the component will be hidden.                                                                         | boolean       | .visible              | Common     |
| Weekend Background     | Background color for the weekend indicators.                                                                       | Color         | .weekendBackground    | Appearance |
| Weekend Foreground     | Foreground color for the weekend indicators.                                                                       | Color         | .weekendForeground    | Appearance |

## Scripting

### Scripting Functions
This component does not have scripting functions associated with it.

### Extension Functions
This component does not have extension functions associated with it.

### Event Handlers
Event handlers allow you to run a script based off specific triggers. See the full list of available event handlers on the [Component Events](scripting\scripting-in-ignition\component-and-window-scripting\component-events.md) page

## Customizers
+ [Vision Component Customizers](visualization-and-dashboards\understanding-components\component-customizers\component-customizers.md)
+ [Style Customizer](visualization-and-dashboards\understanding-components\component-customizers\component-customizers.md#style-customizer)