<zg-calendar-selection>
Interactive Storybook Playground
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.
| Component | Relationship | Type | Ancestor |
|---|---|---|---|
| ZingGrid | Parent | Generated | n/a |
| ZGButton | Child | Generated | n/a |
Related Web Components
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.
<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 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:
: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 or our Styling Basics guide to learn more about styling the grid.
| Name | Default | Description | Demo | CSS Ref |
|---|---|---|---|---|
| --zg-calendar-selection-background | #fff | Styles the background of the calendar selection overlay | ||
| --zg-calendar-selection-border-color | --theme-border-color | Styles the color of borders and dividers in the calendar selection overlay | ||
| --zg-calendar-selection-cancel-color | red | Styles the text color of the cancel button | ||
| --zg-calendar-selection-color | --theme-color_alt | Styles the text color of the calendar selection overlay | ||
| --zg-calendar-selection-primary | --theme-color-primary | Styles the primary accent color used for selected dates, focus outlines, and the apply button | ||
| --zg-calendar-selection-primary_active | var(--zg-calendar-selection-primary, var(--theme-color-primary)) | Styles the accent color of the active/open state (month/year picker button when its panel is open) | ||
| --zg-calendar-selection-primary_hover | var(--zg-calendar-selection-primary, var(--theme-color-primary)) | Styles the hover background of the primary accent (apply button) | ||
| --zg-calendar-selection-secondary | rgba(103, 78, 167, 0.15) | Styles the secondary fill used for days within the selected range | ||
| --zg-calendar-selection-secondary_active | var(--zg-calendar-selection-secondary, rgba(103, 78, 167, 0.15)) | Styles the pressed/active background of days within the selected range | ||
| --zg-calendar-selection-secondary_hover | var(--zg-calendar-selection-tertiary_hover, var(--theme-border-color)) | Styles the hover background of days within the selected range | ||
| --zg-calendar-selection-selected-color | #fff | Styles the text color rendered on top of the primary accent (selected dates, apply button) | ||
| --zg-calendar-selection-tertiary | none | Styles the background of unselected interactive cells and buttons (nav arrows, month/year buttons, day/month/year cells) | ||
| --zg-calendar-selection-tertiary_active | var(--zg-calendar-selection-tertiary_hover, var(--theme-border-color)) | Styles the pressed/active background of interactive cells and buttons | ||
| --zg-calendar-selection-tertiary_hover | --theme-border-color | Styles the hover background of interactive cells and buttons |
CSS Selector
<zg-calendar-selection> can be styled by common CSS selectors, like so:
zg-calendar-selection { border: 1px solid red; }
Slots
There are no slots available for the <zg-calendar-selection> web component.
[api: <zg-calendar-selection>]