---
title: "ZingGrid Web Component: `<zg-calendar-selection>` | Docs"
description: "View our in depth tutorial covering the web component `<zg-calendar-selection>` tag and the associated features for the JavaScript grid."
url: https://www.zinggrid.com/docs/api/tags/zg-calendar-selection
---

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/api/tags/zg-calendar-selection.md
mode: provenance
representation: markdown
origin_response_id: c2a69acb0eb6c2644e6c68d94cc4c02f
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.617Z
version_nonce: 19786fb8b14a2d182e03565914e12df0
generated_at_utc: 2026-10-26T04:37:45.998Z
response_nonce: ff784c7285f6938b0abb256664709818
```

# `<zg-calendar-selection>`

[Interactive Storybook Playground](https://storybook.zinggrid.com/?path=/docs/components-zg-calendar-selection--docs)

The `<zg-calendar-selection>` tag is a web component that controls the functionality and styling for the date range picker overlay that appears when clicking the calendar selection button in a filter summary row. It allows users to select a "From" and "To" date range to filter date-type columns. This web component is dynamically inserted by the grid and can be styled by CSS variables or the `zg-calendar-selection` CSS selector.

![Image of the DOM relationship for the zg-calendar-selection web component tag](https://storage.googleapis.com/zinggrid-pwa.appspot.com/components/v2/zg-calendar-selection-web-component-dom.png "Image of the DOM relationship for the zg-calendar-selection web component tag")

#### Related Web Components

- [`<zg-filter-summary>`](https://www.zinggrid.com/docs/api/tags/zg-filter-summary/)
- [`<zg-button>`](https://www.zinggrid.com/docs/api/tags/zg-button/)
- [`<zg-column>`](https://www.zinggrid.com/docs/api/tags/zg-column/)
- [`<zing-grid>`](https://www.zinggrid.com/docs/api/tags/zing-grid/)

## Usage

`<zg-calendar-selection>` is automatically inserted when a date-type column is using the calendar filter summary chart and the user clicks the calendar selection button in that column's filter summary row.

```html
<zing-grid
  filter="summary"
  src="...">
  <zg-column index="name"></zg-column>
  <zg-column index="startDate" type="date" filter-summary-chart="calendar"></zg-column>
</zing-grid>
```

Check out the [Filtering Summary Chart](https://www.zinggrid.com/docs/features/filtering-summary-chart/) documentation to learn more about the calendar chart type.

## Attributes

There are no attributes available for the `<zg-calendar-selection>` web component.

## CSS Variables

`<zg-calendar-selection>` can be styled with CSS variables, like so:

```css
:root {
  --zg-calendar-selection-background: red;
}
```

Below is a list of all the associated `--zg-cal-sel` CSS variables. Check out the [full list of CSS variables](https://www.zinggrid.com/docs/api/css-variables/reference/) or our [Styling Basics guide](https://www.zinggrid.com/docs/getting-started/styling-basics/) to learn more about styling the grid.

| Name | Default | Description | Demo |
| --- | --- | --- | --- |

## CSS Selector

`<zg-calendar-selection>` can be styled by common CSS selectors, like so:

```css
zg-calendar-selection {
  border: 1px solid red;
}
```

## Slots

There are no slots available for the `<zg-calendar-selection>` web component.