Quick start

Quickly get started with Planby PRO by following the steps below.

Usage

Create a new file in your project and import the Planby component.

info

Without declaring the width and length properties, the component takes the dimensions of the parent element.

import { useEpg, Epg, Layout } from '@nessprim/planby-pro';

const channels = React.useMemo(
  () => [
    {
      logo: 'https://via.placeholder.com',
      uuid: '10339a4b-7c48-40ab-abad-f3bcaf95d9fa',
      ...
    },
  ],
  []
);

const epg = React.useMemo(
  () => [
    {
      channelUuid: '30f5ff1c-1346-480a-8047-a999dd908c1e',
      description:
        'Ut anim nisi consequat minim deserunt...',
      id: 'b67ccaa3-3dd2-4121-8256-33dbddc7f0e6',
      image: 'https://via.placeholder.com',
      since: "2024-02-02T23:50:00",
      till: "2024-02-02T00:55:00",
      title: 'Title',
      ...
    },
  ],
  []
);

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

return (
  <div>
   {/* Without declaring the width and length properties, the component takes the dimensions of the parent element. */}
    <div style={{ height: '600px', width: '1200px' }}>
      <Epg {...getEpgProps()}>
        <Layout
          {...getLayoutProps()}
        />
      </Epg>
    </div>
  </div>
);

Example - Custom dimensions

Use the custom dimensions to set the width and height of the Layout.

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

return (
  <div>
     <Epg {...getEpgProps()}>
        <Layout
          {...getLayoutProps()}
        />
      </Epg>
  </div>
);

Example - Time range

Use the startDate and endDate to set the time range of the schedule.

const {
  getEpgProps,
  getLayoutProps,
  ...
} = useEpg({
  epg,
  channels,
  startDate: '2024-02-02T10:00:00',
  endDate: '2024-02-02T20:00:00',
  width: 1200,
  height: 600
});

return (
  <div>
     <Epg {...getEpgProps()}>
        <Layout
          {...getLayoutProps()}
        />
      </Epg>
  </div>
);

Example - Week mode

Use the week mode to display the schedule in week mode.

const epg = React.useMemo(
  () => [
    {
      channelUuid: '30f5ff1c-1346-480a-8047-a999dd908c1e',
      description:
        'Ut anim nisi consequat minim deserunt...',
      id: 'b67ccaa3-3dd2-4121-8256-33dbddc7f0e6',
      image: 'https://via.placeholder.com',
      since: "2024-05-01T00:00:00",
      till: "2024-05-03T24:00:00",
      title: 'Title',
      ...
    },
  ],
  []
);

const {
  getEpgProps,
  getLayoutProps,
  ...
} = useEpg({
  epg,
  channels,
  startDate: '2024-05-01T00:00:00', // Required day with time 00:00:00
  endDate: '2024-05-25T00:00:00', // Required day with time 00:00:00
  mode: {type: 'week', style: 'modern'}
  ...
});

...

Example - Month mode

Use the month mode to display the schedule in month mode.

const epg = React.useMemo(
  () => [
    {
      channelUuid: '30f5ff1c-1346-480a-8047-a999dd908c1e',
      description:
        'Ut anim nisi consequat minim deserunt...',
      id: 'b67ccaa3-3dd2-4121-8256-33dbddc7f0e6',
      image: 'https://via.placeholder.com',
      since: "2024-05-01T00:00:00",
      till: "2024-08-31T24:00:00",
      title: 'Title',
      ...
    },
  ],
  []
);

const {
  getEpgProps,
  getLayoutProps,
  ...
} = useEpg({
  epg,
  channels,
  startDate: '2024-05-01T00:00:00', // First day of the month with required time 00:00:00
  endDate: '2024-11-30T00:00:00', // Last day of the month with required time 00:00:00
  mode: {type: 'month', style: 'modern'}
  ...
});

...