React JSX Components in Scheduler Grid Cells

Overview

• You can add React JSX components to Scheduler grid cells.

• You can also use raw HTML and active areas to display custom content in the grid cells.

• The sample project includes the open-source DayPilot Lite for JavaScript scheduling library.

Use the Cell content selector in the sample to compare HTML, active areas, simple JSX, and weekend JSX. The Scheduler displays the current month. Select an empty cell or drag across a time range to create an event; you can also move and resize events. Changes remain in memory for the current page session.

Render custom content in React Scheduler cells

The React Scheduler component lets you customize the grid cell appearance and content. You can use this feature to add useful functionality to your scheduling application.

Some examples (related tutorials may use DayPilot Pro features):

• Display summary data for columns and rows

• Highlight holidays

• Show maintenance data

You can change the background color, add a custom CSS class and insert custom elements (text, HTML, icons).

How to customize React Scheduler cells using active areas

The basic option is to use custom HTML as the cell content. The html mode in src/scheduler/Scheduler.jsx assigns it in onBeforeCellRender:

const onBeforeCellRender = (args) => {
  if (contentMode === "html") {
    args.cell.properties.html = "<div class='cell-html'>HTML</div>";
  }
  // ...
};

In addition to specifying the raw HTML, the Scheduler component also supports active areas - rectangular objects that will be displayed at the specified position within a cell.

You can add active areas using the onBeforeCellRender event handler:

const onBeforeCellRender = (args) => {
  // ...
  if (contentMode === "areas") {
    args.cell.properties.areas = [
      {
        right: 10,
        top: 10,
        left: 10,
        bottom: 10,
        fontColor: "#ddd",
        symbol: "icons/daypilot.svg#figure"
      }
    ];
  }
};

The active areas have several advantages over raw HTML:

• Built-in support for icons of different types (font icons, SVG, images). The sample loads the figure symbol from public/icons/daypilot.svg.

• The position can be specified using pixel offsets from the cell borders, as in this example.

• Active areas are supported during image export in DayPilot Pro. Image export is not included in the Lite sample.

Customize the cell content using React JSX components

In some cases, it might be more convenient to define custom grid cell content using JSX. This is possible using the onBeforeCellDomAdd event handler. Assign a React element to args.element; the Scheduler mounts it in the cell. In the sample, select JSX to render a simple text element:

const onBeforeCellDomAdd = (args) => {
  if (contentMode === "jsx") {
    args.element = <div className="cell-jsx">jsx</div>;
  }
  // ...
};

Note:

• The onBeforeCellDomAdd event runs when a cell DOM element is created. It can run repeatedly as cells are removed and rendered again. By default, onBeforeCellRender caches cell properties until an update invalidates them. Avoid heavy calculations in either handler, especially in onBeforeCellDomAdd.

Pass both handlers to DayPilotScheduler as props. The contentMode conditions let the sample selector choose which rendering method is active:

<DayPilotScheduler
  // ...
  onBeforeCellRender={onBeforeCellRender}
  onBeforeCellDomAdd={onBeforeCellDomAdd}
  // ...
/>

How to highlight weekends using JSX

The following example adds an “X” icon and a top bar to weekend cells using custom React JSX. Select Weekend JSX to see this mode:

const onBeforeCellDomAdd = (args) => {
  // ...
  if (contentMode === "weekends") {
    const dayOfWeek = args.cell.start.getDayOfWeek();
    const weekend = dayOfWeek === 0 || dayOfWeek === 6;
    if (weekend) {
      const color = "#cc412533";
      const barStyle = {
        position: "absolute",
        left: 0,
        right: 0,
        top: 0,
        height: "6px",
        backgroundColor: color
      };
      const xStyle = {
        color: color,
        fontSize: "14px",
        position: "absolute",
        textAlign: "center",
        top: 15,
        left: 0,
        right: 0
      };
      args.element = (
        <div className="weekend-marker" aria-label="Weekend">
          <div style={barStyle}></div>
          <div style={xStyle}>✖</div>
        </div>
      );
    }
  }
};

The handler reads the cell start date and checks for Sunday (0) or Saturday (6). It assigns content only for those days, leaving weekday cells unchanged. Both elements use absolute positioning within the cell: the bar spans its width, and the X is centered below it.

Cleanup when the cell component is destroyed

The React component assigned to args.element will be destroyed automatically when the cell is removed from the Scheduler.

If you need to release resources associated with the cell, use onBeforeCellDomRemove. It receives the cell and the element previously assigned to args.element before the component is destroyed. For subscriptions or timers owned by a custom React component, use that component’s effect cleanup function. The sample’s static JSX elements do not need additional cleanup.

Cell rendering performance

The React Scheduler renders and removes grid cells as needed:

• To improve performance, the React Scheduler renders grid cells progressively during scrolling. Hidden cell DOM elements can be removed when the rendering cache is swept and rendered again when needed. A short timeline may fit entirely in the cache.

• The cells are also updated when the row height changes or if an event is added, removed, or updated.

Because the cells are rendered during scrolling, it is necessary to keep the rendering as fast as possible. Keep that in mind when using the onBeforeCellDomAdd event:

• The onBeforeCellDomAdd event is called more often than onBeforeCellRender.

• Using React JSX is more expensive than raw HTML or active areas.

• Avoid any costly calculations or long operations in onBeforeCellDomAdd.

• By default, cells are rendered in real time. If you can’t avoid expensive operations in onBeforeCellDomAdd, you can debounce the rendering (see more in scrolling performance). It will introduce a delay but it will make scrolling more responsive.

• If possible, use precalculated values and only look up the values in the event handler. Keep durable application data outside the cell component, because scrolling or an update can destroy and recreate it.