Planner

@spartanfx/react v1.0.4

---

@spartanfx/react / Planner

Variable: Planner

const Planner: React.FC<IPlannerProps>

High-level timeline planner component with drag-and-drop support.

Remarks

• Initializes and sorts items on load and whenever props.items or color filters change.
• Automatically computes the visible month range from options.startDate and options.endDate.
• When containerWidth is not provided, the component measures the parent element and subtracts horizontal padding to determine the planner width.
• View navigation (week / month / year) updates onPlannerDatesChanged with computed date ranges based on the selected period.
• Drag-and-drop behavior is enabled by the React DnD provider. If options.callBacks.onItemChange is supplied, drops will emit a change payload (create/update/delete) for the consumer to persist.
• A contextual menu is conditionally populated based on which callbacks are provided in options.callBacks, and whether the context targets a range child item.

Examples

import * as React from "react";
import { Planner } from "./Planner";
import { ViewBy, PeriodCount } from "./types/plannerTypes";

export function MinimalPlanner() {
  return (
    <Planner
      items={[]}
      schema={{} as any}
      options={{
        startDate: new Date(2025, 0, 1),
        endDate: new Date(2025, 11, 31),
        callBacks: {},
      }}
      viewBy={ViewBy.month}
      periodCount={PeriodCount.one}
    />
  );
}

import * as React from "react";
import { Planner } from "./Planner";
import { ViewBy, PeriodCount, IPlannerItem } from "./types/plannerTypes";

const items: IPlannerItem[] = [
  {
    itemId: 1,
    id: 1,
    title: "Kickoff",
    startDate: new Date(2025, 0, 6),
    endDate: new Date(2025, 0, 10),
    elementType: "range" as any,
    rangeId: "A",
    rangeChildItems: [],
  },
];

export function AdvancedPlanner() {
  const [currentMonth, setCurrentMonth] = React.useState(0);

  return (
    <Planner
      className="myPlanner"
      items={items}
      schema={{} as any}
      grouped
      allowDragDrop
      allowViewByWeek
      allowViewByYear
      allowPeriodCountSelection
      maxPeriodCount={PeriodCount.three}
      currentMonth={currentMonth}
      onChangeCurrentMonth={setCurrentMonth}
      onPlannerDatesChanged={(start, end) => {
        console.log("Planner range changed:", start, end);
      }}
      options={{
        startDate: new Date(2025, 0, 1),
        endDate: new Date(2025, 11, 31),
        callBacks: {
          onItemChange: (change) => console.log("Item change:", change),
          onMoveItemClick: (item) => console.log("Move item:", item),
          onDuplicateItemClick: (item) => console.log("Duplicate item:", item),
          onReAssignItemClick: (item) => console.log("Reassign item:", item),
          onAddNewClick: () => console.log("Add new"),
        },
      }}
      viewBy={ViewBy.month}
      periodCount={PeriodCount.one}
      showLegend
      colorMapping={{} as any}
    />
  );
}

Param

Configuration and data for the planner surface.

Returns

The planner UI, including optional legend, drag-and-drop provider, and contextual menu.