Areas

Areas fields gives possibilities to add info ranges to the Timeline layout.

Area schema

Property	Type	Status
startDate	string	required
endDate	string	optional
styles	CSSProperties	required
onClick	function	optional
annotations	object	optional

Annotations schema

Property	Type	Status
textStart	string	optional
textEnd	string	optional
styles	CSSProperties	required

Example Areas in Week mode:

const areas = [
  {
    startDate: "2023-05-05T00:00:00",
    endDate: "2023-05-08T00:00:00",
    styles: {
      background: "#00800012",
      borderLeft: "2px dotted #38A169",
      borderRight: "2px dotted #38A169",
    },
    onClick: () => alert("Click on area"),
    annotations: {
      styles: {
        background: "#38A169",
        color: "white",
      },
      textStart: "Testing Start",
      textEnd: "Testing End",
    },
  },
  {
    startDate: "2023-05-14T00:00:00",
    endDate: "2023-05-17T00:00:00",
    styles: {
      borderLeft: "2px dotted #D69E2E",
      borderRight: "2px dotted #D69E2E",
    },
    annotations: {
      styles: {
        background: "#D69E2E",
        color: "white",
      },
      textStart: "Testing2 Start",
      textEnd: "Testing2 End",
    },
  },
  {
    startDate: "2023-05-11T00:00:00",
    styles: {
      borderLeft: "2px dotted #C53030",
    },
    annotations: {
      styles: {
        background: "#C53030",
        color: "white",
      },
      textStart: "Release",
    },
  },
];

const { getEpgProps, getLayoutProps } = useEpg({
  channels,
  epg,
  startDate:"2023-05-01T00:00:00",
  endDate: "2023-05-30T00:00:00",
  mode: { type: "week", style: "modern" },
  areas,
    ...
  });

Example Areas in Month mode:

const areas = [
  {
    startDate: "2023-06-01T00:00:00",
    endDate: "2023-08-31T00:00:00",
    styles: {
      background: "#00800012",
      borderLeft: "2px dotted #38A169",
      borderRight: "2px dotted #38A169",
    },
    annotations: {
      styles: {
        background: "#38A169",
        color: "white",
      },
      textStart: "Pre-release",
      textEnd: "Pre-release End",
    },
  },
];

const { getEpgProps, getLayoutProps } = useEpg({
  channels,
  epg,
  startDate:"2023-01-01T00:00:00",
  endDate: "2023-12-31T00:00:00",
  mode: { type: "month", style: "modern" },
  areas,
    ...
  });