Render Grid Cell

Below is an example that allows you to render your custom single Grid cell component using Planby's style components.

import {
  GridCell as IGridCell,
  GridItem,
  GridDivider,
} from "@nessprim/planby-pro";

export function GridCell(props: IGridCell) {
  const {
    isDayMode,
    isHoverHighlight,
    item,
    timelineDividerArray,
    gridDividerProps,
    gridItemClickProps,
  } = props;

  const { onItemClick, ...dividerProps } = gridDividerProps.props;
  const { left, ...styles } = gridDividerProps.styles;
  return (
    <GridItem
      isDayMode={isDayMode}
      isHoverHighlight={isHoverHighlight as boolean}
       data-item={JSON.stringify({ item, index })} --- Add data-item attribute when you would like to use drag select option
      {...item.position}
      {...gridItemClickProps}
    >
      {isDayMode &&
        timelineDividerArray.map((_, index) => (
          <GridDivider
            key={index}
            {...styles}
            {...dividerProps}
            left={left(index)}
            onClick={onItemClick(item, index)}
          >
            <div
              style={{
                width: "100%",
                height: "100%",
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
                color: "#a0aec0",
                opacity: 0.2,
                fontSize: 10,
              }}
            >
              {index + 1}
            </div>
          </GridDivider>
        ))}
    </GridItem>
  );
}

function App() {

  ...

 const {
  getEpgProps,
  getLayoutProps,
} = useEpg({
  epg,
  channels,
  startDate: '2024/02/02', // or 2024-02-02T00:00:00
});

return (
  <div>
    <div style={{ height: '600px', width: '1200px' }}>
      <Epg {...getEpgProps()}>
        <Layout
            {...getLayoutProps()}
       renderGridCell={({ id, ...rest }) => (
              <GridCell key={id} {...rest} />
            )}
          />
      </Epg>
    </div>
  </div>
);
}

export default App;