Skip to main content

Planner

Planner lays out records on a time grid grouped into rows (e.g. by resource or category). Instead of reshaping your data first, you describe it with a schema that maps raw fields to the planner's concepts (id, title, start/end date, group). It supports drag-and-drop, and week/month/year views.

When to use​

  • Resource scheduling, booking calendars, roadmap/Gantt-style views.
  • Any dated records you want grouped into rows on a time axis.

Import​

import { Planner } from '@spartanfx/react';

Basic usage​

Planner needs three props: items (raw records), a schema mapping fields, and options (at minimum a startDate).

<Planner
  items={bookings} // Array<Record<string, unknown>>
  schema={{
    idField: { fieldName: 'Id' },
    titleField: { fieldName: 'Title' },
    startDateField: { fieldName: 'Start' },
    endDateField: { fieldName: 'End' },
    groupField: { fieldName: 'Resource' },
  }}
  options={{ startDate: new Date() }}
  allowDragDrop
  allowViewByWeek
/>
Deriving values

Each schema field can transform the raw value with onGetData(item, fieldName) — useful when a value needs parsing or computing rather than reading a column directly. See IPlannerSchema and IPlannerOptions.

With an adapter​

For SharePoint or Dataverse, source the data from an adapter hook and pass it in:

import { Planner } from '@spartanfx/react';
import { useSharePointPlanner } from '@spartanfx/react/spfx';

function Schedule({ sp }) {
  const planner = useSharePointPlanner({ sp, listTitle: 'Bookings' });
  return <Planner {...planner} />;
}

Code Apps equivalents: useCASharePointPlanner, useCADataversePlanner.

Key props​

PropTypeNotes
items (required)Record<string, unknown>[]Raw records before schema mapping.
schema (required)IPlannerSchemaMaps raw fields → planner item (id, title, dates, group, …).
options (required)IPlannerOptionsView config; startDate is required.
allowDragDropbooleanEnable drag-and-drop.
allowViewByWeek / allowViewByYearbooleanPermit week / year views.
categoriesstring[]Explicit, ordered group rows to always show.

See the full generated reference: Planner API ↗.

See also​