Time Blocking Planner

WHAT IT DOES

Time Blocking Planner is a browser extension that provides a visual daily schedule broken into time blocks for task planning and time management. You can click on any time slot to add an activity with a name and optional note, and choose from a palette of colors to categorize your tasks. The planner displays a grid from 6:00 AM to 10:00 PM with 30-minute increments, showing all scheduled blocks with their colors and labels. A summary panel shows a compact list of all tasks for the day. You can navigate between days, clear a day's schedule, or export your plan as text. The tool is ideal for productivity enthusiasts, students, professionals, and anyone who wants to plan their day visually using the time-blocking method.

WHERE IT RUNS

Time Blocking Planner runs on any webpage, overlaying a floating panel that does not interfere with page content. It operates entirely in your browser as a lightweight userscript, using JavaScript's Date object for date calculations. It works on any page, whether static or dynamic, with no external dependencies. All planner data is stored locally using GM_setValue—no data is ever sent to any server.

HOW TO USE

After installation, open the floating panel by clicking the extension icon. The planner shows a grid with time labels on the left and empty slots for each 30-minute block. To add a task, click any time slot—a modal appears where you can enter a task name, optional note, and select a color. Click Save to add the block to your schedule. The block appears in the grid with the selected color and task name. To remove a block, click the ✕ button on the block. Use the navigation buttons (◀ Today ▶) to switch between days. The Summary section shows a compact list of all blocks for the current day. Use the Clear Day button to remove all blocks for the current day, and Export to copy your schedule as text to the clipboard. All data is saved automatically as you make changes.

REAL MECHANISM — WHY THIS WORKS

Most time-blocking tools are standalone apps or require a separate browser tab, disrupting workflow and focus. Time Blocking Planner uses a DOM-overlay architecture that provides a fully functional planner within your current page, keeping you in context. The tool stores all blocks as a JSON object keyed by date (YYYY-MM-DD), with each date containing a map of time slots (HH:MM) to block objects (name, note, color). When a user clicks a slot, the tool checks if a block already exists for that slot and opens the modal with pre-filled data. The grid rendering calculates the number of 30-minute slots between the start hour (6 AM) and end hour (10 PM), then iterates through each slot to generate time labels and block cells. Each cell checks the current date's data for a matching time key and renders the block if found. The summary extracts all blocks for the current date, sorts them by time, and displays them in a compact list. The export function formats the blocks as text lines for easy copying. This approach ensures a fast, responsive, and fully private time-blocking experience without requiring any external services or network access.

THE PANEL

The floating panel is fully draggable and remembers its position per site, snapping to the edges of the viewport when dragged near them. You can collapse the panel to a small icon to minimize screen distraction and expand it back with a single click. The panel is resizable from the bottom-right corner, giving you more space to view the planner grid and summary. Press the Escape key to close the panel instantly. The panel remains open across page navigation within the same domain, maintaining your current view state. All preferences—panel position and all planner data—are saved globally for a seamless experience.

PLEASE NOTE

Time Blocking Planner requires the free BotGentz extension to be installed and enabled, as it relies on the cross-extension messaging API provided by BotGentz for DOM access permissions. The planner uses a 30-minute block size by default and covers the hours from 6:00 AM to 10:00 PM. All data is stored locally in your browser using GM_setValue. No task names, schedule data, or usage information is ever sent to any server. The extension does not read, store, or transmit any personal information. It only stores and displays your schedule locally at your request.