Skip to main content

IPlannerProps

@spartanfx/react v1.2.2

@spartanfx/react / index / IPlannerProps

Interface: IPlannerProps

Props for the Planner component.

Remarks​

Raw items are converted into planner items based on the provided schema. View state changes may be captured via the provided callbacks.

Properties​

Required​

PropertyTypeDefaultDescription
itemsRecord<string, unknown>[]-Raw item list before schema transformation.
optionsIPlannerOptions-Global planner configuration and event hooks.
schemaIPlannerSchema-Mapping definition from raw data to planner item.

Options​

PropertyTypeDefaultDescription
allowAddNew?boolean-Whether adding new items is enabled
allowDragDrop?boolean-Whether drag-and-drop is enabled.
allowPeriodCountSelection?boolean-Whether to show the period count selector in the UI.
allowViewByWeek?boolean-Whether viewing by week is permitted.
allowViewByYear?boolean-Whether viewing by year is permitted.
categories?string[]-Explicit list of category (group) strings to display as rows. When provided, one row per entry is rendered in exactly this order, even if no items exist for a given category. Extra categories found in items but not in this array are appended after the explicit list. When omitted, categories are derived from items at render time (current behavior).
containerHeight?number-Height of the planner container.
containerWidth?number-Width of the planner container.
currentMonth?number-Current month in view.
currentWeek?number-Current week in view.
currentYear?number-Current year in view.
elementClassName?string-CSS class applied to each item element.
grouped?booleantrueWhether items should be displayed in grouped mode.
groupIconMapping?GroupIconMapping-Optional custom group icon mapping per group.
loading?boolean-Update this prop to show the embbedded loading animation of the Planner
maxPeriodCount?PeriodCount-Max period count to show in the selector in the UI.
nonWorkingDates?Date[]-Specific dates that should be styled as non-working days. Independent of nonWorkingWeekdays — both can be used together. A day is non-working if it matches either rule. Time components are ignored when comparing. Defaults to an empty array when omitted.
nonWorkingWeekdays?number[]-Recurring weekday numbers that should be styled as non-working days. Uses JavaScript Date.getDay() numbering: 0 = Sunday, 6 = Saturday. Defaults to [0, 6] (Saturday and Sunday) when omitted.
periodCount?PeriodCount-Number of periods to display (1 or 2).
showLegend?boolean-Whether the color legend should be displayed.
viewBy?ViewBy-Current view mode.

Events & callbacks​

PropertyTypeDefaultDescription
onChangeCurrentMonth?(month) => void-Month change callback.
onChangeCurrentWeek?(week) => void-Week change callback.
onChangeCurrentYear?(year) => void-Year change callback.
onChangePeriodCount?(count) => void-Period count change callback.
onChangeViewBy?(viewBy) => void-View mode change callback.
onDragClass?string-CSS class applied during drag operations.
onPlannerDatesChanged?(newStartDate, newEndDate) => void-Callback for planner dates changed
onRenderGroup?(groupStr) => Element-Custom renderer to render the group element.
onRenderItem?(item, props) => ReactNode-Optional callback to render a custom inner element for each planner item. The ElementWrapper behaviour (drag, resize, click, context menu) is preserved.

Appearance & theming​

PropertyTypeDefaultDescription
appearance?string-Appearance mode (light/dark) - AppearanceMode enum. Defaults to light.
className?string-Custom CSS class on the container.
colorIndex?number-Index for selecting a predefined color palette.
colorMapping?ColorMapping-Optional custom color mapping.
style?any-Inline styles for the container.

Advanced & escape hatches​

PropertyTypeDefaultDescription
legendProps?Partial<ILegendProps>-Additional props passed to the legend component.