Timeframes

Timeframes allow additional time related elements placed in the chart timelineHeader section underneath the month and day elements. 0 or more additional lines can be created, each with 0 or more individual non-overlapping timeframe elements.

The timeframes prop accepts an array of arrays with individual timeframe objects.

export type Timeframe = {
  from: Date;
  to: Date;
  renderElement: RenderElement;
};

This example defines three rows of additional timeframes with several timeframe elements in each

        timeframes={[
          [
            {
              from: new Date(2024, 1, 5),
              to: new Date(2024, 1, 6),
              renderElement: () => <>R1,E1</>,
            },
            {
              from: new Date(2024, 1, 8),
              to: new Date(2024, 1, 9),
              renderElement: () => <>R1,E2</>,
            },
          ],
          [
            {
              from: new Date(2024, 1, 5),
              to: new Date(2024, 1, 8),
              renderElement: () => <>R2,E1</>,
            },
          ],
          [
            {
              from: new Date(2024, 1, 9),
              to: new Date(2024, 1, 10),
              renderElement: () => <>R3,E1</>,
            },
            {
              from: new Date(2024, 1, 11),
              to: new Date(2024, 1, 12),
              renderElement: () => <>R3,E2</>,
            },
          ],
        ]}