Timeline

Below is an example that allows you to render your custom Timeline component using Plaby's style components.

import {
  useEpg,
  Epg,
  Layout,
 CurrentTime,
  Timeline,
  TimelineWrapper,
  TimelineBox,
  TimelineTime,
  TimelineDivider,
  TimelineDividers,
  useTimeline,
} from "planby";


export function CustomTimeline(props: Timeline) {
  const {
    time,
    dividers,
    timelineHeight,
    timelineDividers,
    getTime,
    getTimelineProps,
    getCurrentTimeProps,
  } = useTimeline(props);

  const { isToday, isBaseTimeFormat, isCurrentTime, isTimelineVisible } = props;

  const { hourWidth } = props;

  const renderTime = (item: string | number, index: number) => {
    const { isNewDay, time } = getTime(item);
    const position = { left: hourWidth * index, width: hourWidth };
    const isVisible = isTimelineVisible(position);
    if (!isVisible) return null;
    return (
      <TimelineBox
        key={index}
        isToday={isToday}
        isCurrentTime={isCurrentTime}
        timelineHeight={timelineHeight}
        {...position}
      >
        <TimelineTime isNewDay={isNewDay} isBaseTimeFormat={isBaseTimeFormat}>
          {time}
        </TimelineTime>
        <TimelineDividers>{renderDividers(isNewDay)}</TimelineDividers>
      </TimelineBox>
    );
  };

  const renderDividers = (isNewDay: boolean) =>
    dividers.map((_, index) => (
      <TimelineDivider
        key={index}
        isNewDay={isNewDay}
        width={hourWidth / timelineDividers}
        left={index * (hourWidth / timelineDividers)}
      />
    ));

  return (
    <TimelineWrapper {...getTimelineProps()}>
      {isCurrentTime && isToday && <CurrentTime {...getCurrentTimeProps()} />}
      {time.map((item, index) => renderTime(item, index))}
    </TimelineWrapper>
  );
}

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()}
           renderTimeline={(props) => <CustomTimeline {...props} />}
          />
      </Epg>
    </div>
  </div>
);
}

export default App;