Versions Compared

Old Version 1

changes.mady.by.user GE-DevDoc-Bot

Saved on

compared with

New Version 2

changes.mady.by.user GE-DevDoc-Bot

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)

Calendar

Figma link: tba

Overview

  • The Dynamic Calendar component lets users view, select, and interact with dates or date ranges.
  • It supports different visualization modes for navigating days, months, and years.
  • It can display indicators on specific dates to reflect events or important information.
  • It is useful for showing events, appointments, and important dates in applications.

...

  • useMockData — Determines whether sample indicator data is used for demonstration. When enabled, predefined color indicators appear without a real data source (useful for demos and automated tests).

Guidelines

[NO DATA AVAILABLE]

Accessibility

...

Usage

  • Use when users need to pick one date or a contiguous date range. Choose the interaction via selectionMode: "date" (single) or "timeframe" (range).
  • Start users in the relevant period with viewDate and constrain navigation with minZoomMode / maxZoomMode.
  • Expose stable hooks for tests and analytics via id and dataTestId.

Interactions & Events

  • React to user selection by handling ON_CALENDAR_DATETIME_CHANGE to update related UI or trigger logic.

Visibility & Authorization

  • Show or hide the calendar based on runtime context using displayConditions.
  • Gate access with visibilityPolicySetId when role-based visibility is needed.

Dos & Don’ts

DoDon’tArticle setting(s)
Set selectionMode: "timeframe" when ranges are required so users can drag/select a span.Simulate ranges in "date" mode (it emits only a single date).selectionMode, events.ON_CALENDAR_DATETIME_CHANGE
Constrain zoom with minZoomMode/maxZoomMode to the levels your use case needs.Allow unrestricted zooming that sends users into irrelevant levels.minZoomMode, maxZoomMode
Initialize the first visible month with viewDate to match the task (e.g., next month for planning).Rely on defaults that open on an unhelpful month.viewDate
Populate indicators through a data source and pass scoped filters.Hard-code indicator dots or mix mock and real data in production.fetchEntityCollectionDataSourceId, getEntityCollectionHttpRequestParametersMap, useMockData
Treat ON_CALENDAR_DATETIME_CHANGE as the place to react to user selection.Poll the component for selection state.events.ON_CALENDAR_DATETIME_CHANGE
Use the guided-tour hotspot with brief, localized text as optional help.Place essential instructions only in the hotspot/tooltip-style copy.enableAsHotspot, guidedTourHotSpotTitle, guidedTourHotSpotDescription

Accessibility

Protocol of implemented accessibility measures

  • Provide concise, localized helper text via guidedTourHotSpotTitle / guidedTourHotSpotDescription when enableAsHotspot is used.
  • Reduce cognitive load by starting in-context with viewDate and keeping navigation bounded with minZoomMode / maxZoomMode.
  • Ensure deterministic automation and auditability with dataTestId and id.
  • Avoid color-only meaning by pairing indicator visuals with reactions to ON_CALENDAR_DATETIME_CHANGE (e.g., updating nearby text).
  • Use displayConditions to prevent rendering when irrelevant, reducing tab stops and screen-reader noise.