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

Calendar

The Dynamic Calendar component is a versatile date selection and display tool that allows users to view, select, and interact with dates or date ranges. It supports different visualization modes and can display indicators on specific dates, making it useful for showing events, appointments, or important dates to users.

Properties

General Properties

• displayName - Sets the display name of the component shown in the structure panel. For example, "Meeting Calendar" allows for easy identification of the calendar's purpose in the component structure.

Visual Properties

• viewDate - Determines which month is initially displayed when the calendar loads. Options include "currentMonth" (shows the current month by default), "previousMonth" (shows the month before current), or "nextMonth" (shows the month after current). For example, setting to "previousMonth" would automatically display last month's calendar when the page loads.

• selectionMode - Sets how users can interact with the calendar with options "date" (select a single date) or "timeframe" (select a range of dates). For instance, using "timeframe" mode allows users to select vacation periods or reporting periods spanning multiple days.

• minZoomMode - Sets the minimum zoom level (most detailed view) users can navigate to. Options include "Day" (3), "Month" (2), or "Year" (1). For example, setting to "Month" (2) prevents users from drilling down to the daily view.

• maxZoomMode - Sets the maximum zoom level (least detailed view) users can navigate to. Options include "Day" (3), "Month" (2), or "Year" (1). For example, setting to "Year" (1) allows users to zoom out to a yearly overview.

• useMockData - Determines whether sample indicator data is used for demonstration purposes. When enabled, the calendar will display predefined color indicators on specific dates without requiring an actual data source connection.

Datasource Properties

• fetchEntityCollectionDataSourceId - Specifies the data source ID for retrieving calendar indicator data. For example, "api/calendar-events" connects the calendar to an API endpoint that provides date indicators.

• getEntityCollectionHttpRequestParametersMap - Configures HTTP parameters for fetching calendar indicator data. This object maps additional parameters needed for the data request, allowing for dynamic filtering of calendar indicators based on context.

Event Actions Properties

• events - Configures the events that the component can trigger and respond to:
  • ON_CALENDAR_DATETIME_CHANGE: Triggered when a user selects a date or date range. Provides the selected date (in date mode) or from/to dates (in timeframe mode) in the event payload.
  • ON_INIT: Triggered when the component is initialized. Can be used to perform setup operations.
  • ON_DESTROY: Triggered when the component is removed from the DOM. Useful for cleanup operations.

Authorization Properties

• visibilityPolicySetId - Determines the visibility of the component based on specified policy sets. For example, setting to "adminOnlyPolicy" restricts the calendar to users with admin privileges.

Visibility Properties

• displayConditions - Defines conditions for displaying the component. This allows the calendar to be shown or hidden based on dynamic conditions, such as user role, application state, or other contextual factors.

Testing Hooks Properties

• id - Specifies a unique identifier for the component used for programmatic access. For example, "mainCalendar" enables targeted manipulation of this specific calendar component.

• dataTestId - Sets the testing hook ID for automated testing. For example, setting it to "date-selector-calendar" allows test scripts to reliably locate this component.

• enableAsHotspot - Enables the calendar component as a guided tour hotspot. When enabled, the calendar can be highlighted during guided tours to draw user attention to important date selection features.

• guidedTourHotSpotTitle - Sets the title for the guided tour hotspot with support for multiple languages. For example, {"en-US": "Select a Date Range", "de-DE": "Wählen Sie einen Datumsbereich"} provides localized titles when the calendar is highlighted during a guided tour.

• guidedTourHotSpotDescription - Sets the description text for the guided tour hotspot with language support. For example, {"en-US": "Click and drag to select multiple days for your report period", "de-DE": "Klicken und ziehen Sie, um mehrere Tage für Ihren Berichtszeitraum auszuwählen"} provides detailed instructions during guided tours.