MARKETPLACE
PLUGINS
TIME BLOCKS (FREE)
Time Blocks (Free) logo

Time Blocks (Free)

Published April 2026
   β€’    Updated April 2026

Plugin details

Welcome to TimeBlocks Free! 🧱⏱️ If you are building a SaaS, CRM, or management tool, displaying tasks across different resources (employees, machines, rooms) is essential. TimeBlocks provides a beautiful, native-feeling, and highly optimized Vis.js timeline right inside your Bubble app.

This "Free" version is the ultimate Read-Only Dashboard component. It allows your users to scroll through time, visualize workloads, and see task statuses at a glance without accidentally editing the data.

✨ Key Features:

🎯 Smart Auto-Focus: Automatically centers the timeline on the current date and time upon loading.

πŸ“ Elastic Auto-Height: No more double-scrollbars or empty spaces! The timeline calculates its height dynamically based on the exact number of rows (groups) you feed it. Works flawlessly with Bubble's "Fit height to content".

🎨 Status Color Engine: Forget saving colors in the database for every task. Simply pass a list of Statuses (e.g., "Pending", "Done") and a matching list of Colors, and TimeBlocks will automatically paint and label the task blocks!

πŸ’… Bubble Native Styling: Supports custom border roundness for tasks and respects your main container's borders and shadows.

πŸ›‘οΈ Bulletproof Loading: Built-in DOM polling ensures the timeline only renders when Bubble is 100% ready, eliminating "empty box" glitches.

(Looking for Drag & Drop, Resizing, and Click events? Keep an eye out for our upcoming TimeBlocks PRO version!) πŸ‘‘

Demo Page: https://demo-app-56978.bubbleapps.io/version-test/timeblocks_free/1775979915738x420038951998488200

Editor Page: https://bubble.io/page?id=demo-app-56978&tab=Data&name=timeblocks_free

Free

For everyone

stars   β€’   0 ratings
1 installs  
This plugin does not collect or track your personal data.

Other actions

Platform

Web

Contributor details

NoCoddo logo
NoCoddo
Joined 2025   β€’   86 Plugins
View contributor profile

Instructions

Setting up TimeBlocks is fast and straightforward. Follow these steps to get your timeline up and running:
Step 1: Place the Element

Drag and drop the TimeBlocks Free element onto your Bubble page.

Go to the Layout tab and ensure "Fit height to content" is checked. (You can set a Min Height of 150px while working in the editor).

Step 2: Prepare your Database
Ensure you have a Data Type for your Tasks/Events. These tasks must have a start date, end date, and something to identify who they belong to (e.g., Employee Name or Employee ID).

Step 3: Feed the Groups (The Left Column)

In the plugin properties, fill the group_ids field using a dynamic expression. Example: Search for Tasks's Employee Name :unique elements.

Do the same for group_names so the timeline knows what text to display on the left.

Step 4: Feed the Items (The Task Blocks)

Pass your task data to the item lists (item_ids, item_titles, item_starts, item_ends).

⚠️ CRITICAL: Ensure that item_group_ids perfectly matches the data type you used in group_ids! This is how the plugin knows which row to place the task in.

Step 5: Setup the Color Engine (Optional but Recommended)

Feed the item_statuses list (e.g., Search for Tasks's Status).

In status_map_names, type a static list of your possible statuses (e.g., Pending, In Progress, Done).

In status_map_colors, type the corresponding HEX colors (e.g., #64748B, #3B82F6, #10B981). The plugin will do the rest!

Types

This plugin can be found under the following types:

Categories

This plugin can be found under the following categories:
Calendar   β€’   Productivity   β€’   Chart   β€’   Small Business   β€’   Visual Elements

Resources

Support contact
Tutorial

Rating and reviews

No reviews yet

This plugin has not received any reviews.
Bubble