React Scheduler: Rendering JSX Components in Row Headers

Overview

• Add custom DOM elements to the row headers.

• React JSX components are detected automatically.

• Other Scheduler row header customization options (raw HTML, active areas)

• Includes a trial version of DayPilot Pro for JavaScript (see also License below)

License

Licensed for testing and evaluation purposes. Please see the license agreement included in the sample project. You can use the source code of the tutorial if you are a licensed user of DayPilot Pro for JavaScript. Buy a license.

Rendering JSX Component in React Scheduler Header

Custom HTML

The standard way of customizing the React Scheduler row headers is to use onBeforeRowHeaderRender event handler.

This event handler lets you change the row properties and/or set the HTML. However, it only works with HTML strings.

onBeforeRowHeaderRender: function(args) {
  args.row.html = "<span style='font-weight: bold'>" + args.row.name + "</span">;
}

Active Areas

If you want to avoid raw HTML, you can also use active areas - special objects that let you insert a rectangle at a specified position, and define special behavior (it can open a context menu, a modal dialog, or run custom JavaScript function):

onBeforeRowHeaderRender: function(args) {
  args.row.areas = [
    {
      right: 3,
      top: 3,
      height: 12,
      width: 12,
      icon: "icon-info",
      style: "cursor: pointer",
      onClick: function(args) {
        var row = args.source;
        DayPilot.Modal.alert(row.name);
      }
    }
  ]
},

React JSX Component

In order to access the row header DOM element, the Scheduler introduces onBeforeRowHeaderDomAdd event handler that is called whenever the row header element is created and added to the DOM.

You can use it to define a custom DOM element that will be inserted in the row header cell:

onBeforeRowHeaderDomAdd: function(args) {
  args.target = "Cell";

  var cell = document.createElement("div");
  cell.innerText = args.row.name;

  args.element = cell;
},

You can also use args.element to specify custom JSX:

onBeforeRowHeaderDomAdd: function(args) {
  args.target = "Cell";
  args.element = <span style={{fontWeight: "bold"}}>{args.row.name}</span>;
},

It will work with custom React components as well:

onBeforeRowHeaderDomAdd: function(args) {
  args.target = "Cell";
  args.element = <SchedulerRow row={args.row} />;
},

SchedulerRow.js:

import React from 'react';

export class SchedulerRow extends React.Component {
  render() {
    return <div style={{fontWeight: "bold"}}>{this.props.row.name}</div>;
  }
}

Full Source Code

Scheduler.js (Scheduler Component)

import React, {Component} from 'react';
import {DayPilot, DayPilotScheduler} from "daypilot-pro-react";
import {SchedulerRow} from './SchedulerRow';

class Scheduler extends Component {

  constructor(props) {
    super(props);

    this.state = {
      timeHeaders: [{"groupBy": "Month"}, {"groupBy": "Day", "format": "d"}],
      scale: "Day",
      days: 61,
      startDate: "2021-08-01",
      timeRangeSelectedHandling: "Enabled",
      rowHeaderWidth: 100,
      onTimeRangeSelected: function (args) {
        var dp = this;
        DayPilot.Modal.prompt("Create a new event:", "Event 1").then(function (modal) {
          dp.clearSelection();
          if (!modal.result) {
            return;
          }
          dp.events.add({
            start: args.start,
            end: args.end,
            id: DayPilot.guid(),
            resource: args.resource,
            text: modal.result
          });
        });
      },
      treeEnabled: true,
      onBeforeRowHeaderRender: function (args) {
        args.row.areas = [
          {
            right: 3,
            top: 3,
            height: 12,
            width: 12,
            icon: "icon-info",
            style: "cursor: pointer",
            onClick: function (args) {
              var row = args.source;
              DayPilot.Modal.alert(row.name);
            }
          }
        ]
      },
      onBeforeRowHeaderDomAdd: function (args) {
        args.target = "Cell";
        args.element = <SchedulerRow row={args.row}/>;
      },
    };
  }

  componentDidMount() {

    // load resource and event data
    this.setState({
      resources: [
        {name: "Resource A", id: "A"},
        {name: "Resource B", id: "B"},
        {name: "Resource C", id: "C"},
        {name: "Resource D", id: "D"},
        {name: "Resource E", id: "E"},
        {name: "Resource F", id: "F"},
        {name: "Resource G", id: "G"}
      ],
      events: [
        {
          id: 1,
          text: "Event 1",
          start: "2021-08-02T00:00:00",
          end: "2021-08-05T00:00:00",
          resource: "A"
        },
        {
          id: 2,
          text: "Event 2",
          start: "2021-08-03T00:00:00",
          end: "2021-08-10T00:00:00",
          resource: "C",
          barColor: "#38761d",
          barBackColor: "#93c47d"
        },
        {
          id: 3,
          text: "Event 3",
          start: "2021-08-02T00:00:00",
          end: "2021-08-08T00:00:00",
          resource: "D",
          barColor: "#f1c232",
          barBackColor: "#f1c232"
        },
        {
          id: 4,
          text: "Event 3",
          start: "2021-08-02T00:00:00",
          end: "2021-08-08T00:00:00",
          resource: "E",
          barColor: "#cc0000",
          barBackColor: "#ea9999"
        }
      ]
    });

    window["dp"] = this.scheduler;

  }

  render() {
    var {...config} = this.state;
    return (
      <div>
        <DayPilotScheduler
          {...config}
          ref={component => {
            this.scheduler = component && component.control;
          }}
        />
      </div>
    );
  }
}

export default Scheduler;