Render Mobile Timeline

Below is an example that allows you to render your custom mobile timeline slots component using Planby's style components.

// Import interfaces
import { MobileTimeline as IMobileTimeline } from "@nessprim/planby-pro";
import {
  MobileTimelineTime,
  MobileTimelineWeekMonthDate,
} from "@nessprim/planby-pro";
import {
  getDayWeekMonthName,
  getFormattedWeekMonthDate,
} from "@nessprim/planby-pro";

export function MobileTimeSlot({
  isBaseTimeFormat,
  isRTL,
  mode,
  slot,
}: IMobileTimeline) {
  const { data, position } = slot;
  const isDayMode = mode.type === "day";
  const isModernStyle = mode.style === "modern";
  const formattedWeekMonth = getFormattedWeekMonthDate({
    isBaseTimeFormat,
    date: data.time,
    mode,
  });
  return (
    <MobileTimelineTime
      key={data.time}
      isRTL={isRTL}
      isNewDay={data.isNewDay}
      position={position}
    >
      {isDayMode ? (
        <span>{data.time}</span>
      ) : (
        <MobileTimelineWeekMonthDate
          isRTL={isRTL}
          isModernStyle={isModernStyle}
        >
          {isModernStyle && <span>{getDayWeekMonthName(data.time, mode)}</span>}
          <span>{formattedWeekMonth}</span>
        </MobileTimelineWeekMonthDate>
      )}
    </MobileTimelineTime>
  );
}


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()}
            renderMobileTimeline={(props) => (
               <MobileTimeSlot key={props.slot.data.time} {...props} />
            )}
          />
      </Epg>
    </div>
  </div>
);
}

export default App;