---
title: "Popup Calendar"
description: "The popup calendar is a popular way to provide date/time choosing controls on a window."
---

# Popup Calendar

> The popup calendar is a popular way to provide date/time choosing controls on a window.

![](pcalendar0.png)

**Component Palette Icon**:  

![](pcalendar1.png)

## Description
The popup calendar is a popular way to provide date/time choosing controls on a window. Similar to the Calendar component, but takes up much less screen real estate. Most commonly used by including this component's Date property 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     |
| Calendar Background | The background color for the popup calendar.                                                                       | Color         | .calendarBackground | Appearance |
| 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                | The date that this component represents.                                                                           | Date          | .date               | 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 display this date.                                                             | String        | .format             | Behavior   |
| 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     |
| 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 |
| Text                | The displayed text of the date (depends on the format string).                                                     | String        | .text               | Data       |
| 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)