Timeblock Planner


A tool for laying out your time blocks for the day


To setup the timeblock planner

  • Add a Block - Click an empty space then drag to size
  • Remove a Blocks - Click the the "✖" button in the corner of a block
  • Rename a Block - Click on the block text and edit the content
  • Resize a Block - Click and drag the bottom of a block
  • Move a Block - Click and drag the block

To configure the schedule, use the relevant query params

  • "startTime" for the start hour for the schedule in 24 hour format, defaults to 7 (7am)
  • "endTime" for the end hour for the schedule in 24 hour format, defaults to 19 (7pm)

This is a micro-project, check the source to see the code and do what you want with it!


Did you find this helpful? Buy me a coffee - Ko-fi


Donovan LaDuke 2026 - MIT License