Planby PRO

Product Introduction

1. Planby PRO is a React and React Native component library designed for building complex timelines, schedules, and event planners in web and mobile applications. It combines the functionality of a calendar, scheduler, and EPG (Electronic Program Guide) into a single customizable solution, supporting features like drag-and-drop operations, timezone management, and multi-day views. The component is optimized for high-performance rendering with virtualized views to handle large datasets efficiently.
2. The core value of Planby PRO lies in its ability to drastically reduce development time for teams implementing scheduling interfaces, offering pre-built functionality that would otherwise require months of custom coding. It provides enterprise-grade flexibility with out-of-the-box features like external drag-and-drop integration, grid layouts, and overlapping event management. Developers can focus on application-specific logic rather than rebuilding foundational timeline components.

Main Features

1. Drag-and-Drop Functionality: Supports internal and external drag-and-drop operations with configurable snapping intervals (e.g., 15/30/60-minute increments) and multi-row overlap modes (Layer or Stack). Enables seamless resizing of timeline items and integration with third-party UI libraries like React Beautiful DnD.
2. Timezone and Multi-Day Support: Automatically handles timezone conversions and displays schedules across multiple days (up to 5+ days in demos) with 12-hour or 24-hour format options. Includes real-time current time indicators and RTL (right-to-left) layout compatibility for global applications.
3. Virtualized Rendering: Uses a custom virtual view engine to render thousands of channels or events without performance degradation, demonstrated in demos with up to 200 channels and dynamic item heights (100px–200px adjustable). Supports horizontal and vertical layouts with customizable day widths (3,000px–8,000px range).

Problems Solved

1. Eliminates Complex Timeline Development: Addresses the pain point of building scalable scheduling interfaces from scratch, which typically requires months of work to handle edge cases like overlapping events, timezone conversions, and real-time updates. Planby PRO provides tested, production-ready solutions for these challenges.
2. Target User Groups: Primarily serves React developers in industries like OTT streaming (e.g., JW Player’s EPG), enterprise resource planning, conference management (e.g., Brella’s event schedules), and music festivals (e.g., Sound Storm’s lineup planning). Also targets product teams needing customizable timelines for healthcare, finance, or logistics apps.
3. Typical Use Cases: Implementing live TV EPGs with 24/7 streaming schedules, creating conference agendas with speaker sessions across multiple stages, designing music festival lineups with stage-specific timelines, and building project management dashboards with Gantt chart-like functionality.

Unique Advantages

1. Dual Calendar-Scheduler Hybrid: Unlike standalone libraries like react-big-calendar, Planby PRO merges calendar views with scheduler capabilities (e.g., grid layouts, item resizing) and EPG-specific features (e.g., channel sidebars, program metadata). This eliminates the need to stitch multiple libraries together.
2. Proprietary PRO Portal and Licensing: Offers a centralized portal for license management, team collaboration (minimum 3 developers for monthly plans), and access to exclusive documentation/code examples. Perpetual licenses include 1 year of updates, while enterprise tiers allow logo placement and custom integrations.
3. Proven Scalability and Customization: Demonstrated in production by JW Player’s OTT app and Sound Storm’s festival planning, with theme customization (default, red, teal, magenta, light themes) and CSS-in-JS support. The virtual view engine efficiently handles datasets exceeding 200 channels and 10,000+ events.

Frequently Asked Questions (FAQ)

1. How do I access Planby PRO features after purchase? After payment, you receive an activation email with a license key and a link to the Planby PRO Portal. The portal lets you manage team members, access PRO documentation, and integrate the component via npm private packages. License keys are validated during runtime for security.
2. Is React Native supported in the current version? React Native support is in beta, available via a separate Planby Native PRO package. It includes core timeline features and upcoming drag-and-drop functionality. Developers can request beta access through the website, with perpetual licenses including 1 year of updates post-stable release.
3. Can I customize the component’s appearance for my brand? Yes, Planby PRO supports full theme customization via CSS variables or styled-components, including sidebar widths (150px–250px), item heights (100px–200px), and day widths (3,000px–8,000px). Pre-built themes (red, teal, magenta) are included, and the API allows integration with design systems like Material-UI.