[PLUGIN] ⏳ TimeBlocks Free & PRO - The Ultimate Interactive Resource Timeline (Drag & Drop, Anti-Overlap, Auto-Height)

Showcase Plugins
1

Hey Bubblers! :waving_hand:

If you are building a SaaS, CRM, booking system, or project management tool, you know how hard it is to build a proper Resource Timeline (a Gantt-style calendar where tasks are mapped to specific people, rooms, or equipment).

Standard calendars just don’t cut it. You end up fighting with clunky RG structures, messy drag-and-drop mechanics, and weird scrolling issues.

That’s why I built TimeBlocks! :brick::stopwatch: It’s a beautifully optimized, lightweight, and incredibly fluid Vis.js timeline component built specifically for Bubble’s responsive engine.

To give back to the community, I’m launching two versions:

:gem_stone: TimeBlocks Free (The Dashboard Edition) Perfect for read-only dashboards and overviews.

  • :triangular_ruler: Elastic Auto-Height: No more double scrollbars. The timeline dynamically adapts its height to fit your content perfectly.

  • :artist_palette: Smart Status Engine: Stop saving HEX colors to your DB for every task. Just pass a list of “Statuses” and “Colors”, and the plugin automatically paints the blocks and creates beautiful badges!

  • :mobile_phone: 100% Responsive and clean UI.

:crown: TimeBlocks PRO (The Interactive Powerhouse) For those building true management tools, the PRO version brings industry-standard UX:

  • :raised_hand: Fluid Drag & Drop & Resize: Move tasks between employees or stretch time visually. Sends exact new dates and rows directly to your workflows.

  • :brick: Anti-Overlap Engine (Collision Detection): A simple Yes/No toggle. If turned ON, users are physically prevented from double-booking! Tasks will bounce back if dropped on an occupied slot.

  • :brain: Smart Click UX: Standard Bubble setups often open popups accidentally when you try to drag an element. TimeBlocks PRO fixes this: 1-Click to grab/resize, Double-Click to trigger the “Task Clicked” event and open your details popup!

  • :chart_increasing: Dynamic Stacking: If tasks overlap, the timeline smoothly stretches vertically to accommodate them without breaking your page layout.

:link: Links:

I’ve worked really hard on making the DOM loading bulletproof and the UX as close to native apps (like Google Calendar/Calendly) as possible.

Let me know what you guys think! I’d love to hear your feedback and see what kind of scheduling tools you build with this. Cheers! :clinking_glasses::rocket:

2

Hey, this looks really solid! The anti-overlap/collision detection toggle is exactly the kind of thing that’s painful to build manually in Bubble.

Quick question — does the PRO version support loading data dynamically (e.g. via API/backend workflows) or does it require all the data to be passed upfront on page load?

3

Hey! Thanks for the kind words! Glad you liked the anti-overlap feature, it was indeed one of the main focuses to get right.

To answer your question: Yes, it 100% supports loading data dynamically!

The plugin is built to be fully reactive to Bubble’s dynamic expressions. You can feed the Data Source using a standard Bubble Database Search, an external API (via the API Connector), or Custom States.

Under the hood, the PRO version uses vis.DataSet combined with a smart “Data Hash” detection system. This means that if you load data progressively, paginate, or fetch new items via backend workflows/APIs, the plugin instantly detects the data changes and updates the timeline seamlessly, without breaking the UI or needing a page refresh.

Let me know if you have any other questions or specific use cases in mind!