Calendar Control
This element is nestable, allowing for any Bricks elements to be added inside.
This element can be used inside query loops.
This element supports being used inside AJAX filtered content, either by Bricks’ native filter elements, WPGridbuilder, JetSmartFilters or PiotnetGrid
This element support being used inside both components & nested components.
Feature comes with it’s own skill for using with Bricks AI Abilities
- Overview
- Accessibility
This nestable element provides the ability to build external controls for the calendar element for changing views and navigating the calendar. This provides much more flexibility over the overall design than the built-in toolbars.
Settings
Calendar to control – how this control finds its target calendar: Within the same section, Specific selector, or Within the same component. By default the calendar within the same section as the controls will be the one being controlled.
Component scope – when both control and calendar live inside the same component, scopes the selector lookup to that component instance so duplicated components don’t cross-wire.
Control Type –
- Previous / Next – step one unit (month/week/day, depending on current view)
- Previous year / Next year — step a full year
- Today — jump to today
- View button — switch to a specific view
- Title — a live text label showing the calendar’s current date range
- Skip to next events – skip calendar view forward until next events show
- Skip to previous events – skip calendar view backward until next events show
Content – Populate the buttons with either custom icons, text or nest any element inside the button.
Active Styles – For the view buttons that have an active state, extra style controls are available to style for the button when active (previous/next buttons don’t have an active state)
Some notes on accessibility…
- Each control (Today, Prev, Next, view switchers) is a button element, so is focusable and can be triggered via keyboard (return or space key).
- aria-controls is set automatically to the id of the calendar it’s driving, so screen readers can announce the relationship between the control and the calendar it affects.
- View-switcher buttons use aria-pressed (true/false) to reflect which view is currently active, and unavailable buttons disabled.
- The calendar’s title/heading region uses aria-live=”polite”, so month or view changes are announced without stealing keyboard focus.
- As each control is a button at the root level, you can add any attributes using Bricks’ custom attributes settings for your specific use case.