useEpg hook
Description how to use the useEpg hook in Planby.
Options
Available options in useEpg
info
Without declaring the width and length properties, the component takes the dimensions of the parent element.
| Property | Type | Status | Description |
|---|---|---|---|
channels | array | required | Array with channels data |
epg | array | required | Array with EPG data |
width | number | optional | EPG width |
height | number | optional | EPG height |
sidebarWidth | number | optional | Width of the sidebar with channels |
timelineHeight | number | optional | Height of the timeline |
itemHeight | number | optional | Height of channels and programs in the EPG. Default value is 80 |
dayWidth | number | optional | Width of the day. Default value is 7200. Calculation to set up day width with own hour width value e.g., 24h * 300px (your custom hour width) = 7200px -> dayWidth |
startDate | string | optional | Date format 2024/02/02 or 2024-02-02T00:00:00. You can set your own start time, e.g., 2024-02-02T10:00:00, 2024-02-02T14:00:00, etc. Full clock hours only |
endDate | string | optional | Date format 2024-02-02T00:00:00, 2024-02-02T20:00:00, etc. Must be within the same 24-hour period as startDate. Full clock hours only. Scroll through multiple days and timeline mode is available only in PRO plan. |
timelineDividers | number | optional | Set own dividers to Timeline and Grid bg. Default value is 4. |
hoursInDays | array | optional | Set start time and end time of each day in multiple days feature if your data for each day has some time spaces between items in the day. |
initialScrollPositions | object | optional | Set initial scroll position in Layout, e.g., initialScrollPositions: { top: 500, left: 800 } |
liveRefreshTime | number | optional | Live refresh time of the events. Default value is 120 sec. |
isBaseTimeFormat | boolean | optional | Convert to 12-hour format, e.g., 2:00am, 4:00pm, etc. Default value is false. |
isCurrentTime | boolean | optional | Show current time in Timeline. Default value is false. |
isInitialScrollToNow | boolean | optional | Scroll to the current live element. |
isVerticalMode | boolean | optional | Show Timeline in vertical view. Default value is false. |
isResize | boolean | optional | Possibility to resize the element. |
isSidebar | boolean | optional | Show/hide sidebar |
isTimeline | boolean | optional | Show/hide timeline |
isLine | boolean | optional | Show/hide line |
isRTL | boolean | optional | Change direction to RTL or LTR. Default value is false. |
theme | object | optional | Object with theme schema |
timezone | object | optional | Convert and display data from UTC format to your own time zone |
areas | array | optional | Area gives possibilities to add field ranges to the Timeline layout. |
mode | object | optional | Type values: day/week/month. Style values: default/modern Define the mode and style of the timeline. Default mode is day and style is default |
overlap | object | optional | Enable the element overlaps in the layout. Mode values: stack/layer, layerOverlapLevel: number |
dnd - drag and drop | object | optional | Drag and move the element in the layout. Mode values: row/multi-rows |
snap - dnd snapping | object | optional | Activate the snap option to facilitate Drag and Drop (DnD) or resize operations, ensuring alignment with specified snap values. Example value: snap:{x: 50, y: 75} |
grid layout | object | optional | Background grid on the layout. Mode hoverHighlight values: true/false, onGridItemClick: function with all the properties on clicked item grid, onGridItemDrop: function with all the properties on drop item grid |
channelMapKey | string | optional | The Channel uuid attribute can be controlled by prop. Key map gives a possibilities to use specific prop from own data instead of needing to map to uuid in own data |
programChannelMapKey | string | optional | The Programs channelUuid attributes can be controlled by prop. Key map gives a possibilities to use a specific prop from own data instead of needing to map to channelUuid in your data |
globalStyles | string | optional | Inject custom global styles and font. Font weight: 400,500,600. Default font is "Inter" |
mobile | object | optional | Mobile layout view for channels and elements |
Instance Properties
Properties returned from useEpg
| Property | Type | Description |
|---|---|---|
scrollY | number | Current scroll y value |
scrollX | number | Current scroll x value |
onScrollLeft | function(value: number,fetchZoneEnabled:boolean) | Default value is 300 ,fetchZoneEnabled: false . fetchZoneEnabled with value false will be enabled after scroll end. |
onScrollRight | function(value: number,fetchZoneEnabled:boolean) | Default value is 300, fetchZoneEnabled: false . fetchZoneEnabled with value false will be enabled after scroll end. |
onScrollToNow | function() | Scroll to current time/live programs |
onScrollTop | function(value: number,fetchZoneEnabled:boolean) | Default value is 300 |
onScrollTo | function(left: number, top:number,fetchZoneEnabled:boolean) | Default value: left:0, top: 0, fetchZoneEnabled: false, animated: false. fetchZoneEnabled with value false will be enabled after scroll end. |
getLayoutData | function() | Generate and get all the layout data |
getDropItemData | function() | Get converted item data after external drop into grid action |
updateElement | function(elementToUpdate: object, index?:number) | Update single element data. |