planby-pro-best-practices

What problem does it solve?

Planby PRO Best Practices prevents subtle layout and data errors when building EPGs, Gantt charts, and timeline UIs with the Planby PRO React library by prescribing correct positioning, data shapes, and integration patterns that avoid invisible rendering bugs and SSR hydration mismatches.

Core Features & Use Cases

• Positioning correctness: Enforce channel.position top/height to match itemHeight so programs align with channels.
• Native renderer guidance: Use native components such as ChannelBox and ProgramBox and the useProgram/useEpg hooks to preserve Planby's layout engine and drag/resize behaviors.
• Time and snap rules: Convert snap values from time to pixels, prefer ISO datetimes with explicit times to avoid timezone off-by-one errors, and use pixel-based snap.x values for drag/resize.
• SSR and styling: Wrap Planby components in client-only boundaries to avoid Emotion CSS-in-JS hydration issues in Next.js.
• Debugging checklist & API reference: Includes a clear checklist for missing programs, misaligned channels, and links to a comprehensive API reference.
• Use Case: Implementing a studio schedule where rooms map to channels, live programs must show current-time indicators, external drag-in from a sidebar creates new programs, and overlapping programs are handled by stack or layer modes.

Quick Start

Ask the assistant to implement a Planby PRO schedule using useEpg with channel positions that match itemHeight, ProgramBox-based renderers, a 50px horizontal snap, ISO date-time strings with explicit times, and a client-only wrapper to avoid Emotion SSR issues.