TimeGrid

TimeGrid is an EPG (Electronic Program Guide) component that displays a scrollable, time-based grid of TV channels and their programs

import { TimeGrid } from "@roku-sdk/components";

TimeGrid(props: ITimeGridProps): JSX.Element

Description

TimeGrid is an EPG (Electronic Program Guide) component that displays a scrollable, time-based grid of TV channels and their programs.

Each row represents a channel with a customizable info column on the left. Programs are laid out horizontally according to their playStart and playDuration content metadata. A time bar and optional "now" indicator provide temporal context.

Parameters

Example

<timeGrid
    numRows={7}
    duration={7200}
    contentStartTime={startTime}
    leftEdgeTargetTime={now}
    channelInfoComponentName={channelItem}
    content={epgContent}
    onProgramSelected={(index) => handleSelection(index)}
/>

Types

ITimeGridProps

Properties for the TimeGrid node.

TimeGrid is an EPG (Electronic Program Guide) component that displays a time-based grid of channels and programs. Each row represents a channel, and each cell within a row represents a program with its time slot.

The content tree structure is:

• Root ContentNode
  • Channel ContentNode per row (with title, hdPosterUrl for logo)
    • Program ContentNode per cell (with title, description, playStart, playDuration)

Program nodes use playStart (epoch seconds) and playDuration (seconds) to determine their horizontal position and width in the grid.

Example

<TimeGrid
    numRows={7}
    duration={7200}
    contentStartTime={startTime}
    leftEdgeTargetTime={now}
    channelInfoComponentName={channelItem}
    content={epgContent}
    onProgramSelected={(index) => console.log(`Selected program: ${index}`)}
/>

Extends IArrayGridProps, ITimeGridGeneralProps, ITimeGridChannelProps, ITimeGridChannelInfoProps, ITimeGridProgramGridProps, ITimeGridPastTimeScreenProps, ITimeGridTimeBarProps, ITimeGridNowBarProps, ITimeGridNowNextModeProps.

ITimeGridProgramFocusedDetails

Focused details for a program in the TimeGrid, combining the channel index and program index into a single object.

ITimeGridGeneralProps

General TimeGrid settings that configure the overall time range, scrollable extent, and overlay appearance.

ITimeGridGeneralProps.overlayBitmapUri

Bitmap URI for an overlay drawn on top of the entire time grid. Used by default to make bottom rows appear to fade out. In most cases, use a 9-patch image that specifies expandable regions.

The overlay is drawn at full grid width with its bottom aligned to the grid bottom. If overlayHeight is greater than 0, the image is stretched to that height.

ITimeGridChannelProps

Channel-level navigation, focus, and selection settings.

ITimeGridChannelProps.leftEdgeTargetTime

When explicitly set, triggers a horizontal scrolling animation so that the specified time is displayed at the left edge of the program grid.

Also set by the firmware in response to remote control key presses that cause horizontal scrolling.

ITimeGridChannelInfoProps

Configuration for the channel information column displayed on the left (or right) side of the EPG that lists channel names/logos.

ITimeGridChannelInfoProps.channelInfoComponentName

Name of the compiled component used to render each channel info cell. The component's content field receives channel data.

If not specified, the default channel info is displayed (optional icon + label).

ITimeGridProgramGridProps

Configuration for program titles, cells, data loading, and program focus/selection events in the EPG grid.

ITimeGridPastTimeScreenProps

Configuration for the solid color background drawn behind all programs airing before the current time.

ITimeGridTimeBarProps

Configuration for the time bar displayed horizontally above the program cells.

ITimeGridNowBarProps

Configuration for the thin vertical bar displayed at the current time.

ITimeGridNowNextModeProps

Configuration for Now/Next mode, where the program grid only shows "Now" and "Next" columns listing current and subsequent programs.