Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Calendar blocks

Pro

Block Schedule Calendar Block for Svelte

A time-budget planner: pick a brush, paint ten hour tiles from 08:00, and watch four budgets fill with the sum in words and a bar each.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Plan the hours of a day as a budget with this block schedule for Svelte with Ark UI. A ToggleGroup is the brush: Deep work, Meetings, Admin, Break or Clear, each with its own pattern and word. Press any of the ten hour tiles from 08:00 to 18:00 on Wednesday 14 October 2026 to paint it, and a standup and a client call are locked tiles that say so and cannot be painted over. At the start of the split four budgets of 4 h of deep work, 3 h of meetings, 1 h of admin and 1 h of break fill as you paint, each with a Progress bar and the sum in words, such as 3 of 4 h or 1 h over. A polite status line reports each change. The patterns are solid, hatched, dotted and outlined rather than colors, so the day reads in grayscale. It's built from ToggleGroup, Progress and Guides, with a CSS entrance only.

FAQ

How do I change the budgets and the hours?

Edit BRUSHES for the categories and their hours, and TILES for the hours. A tile has an hour, a start category and an optional lock naming the fixed event on it. The bars, the sums and the status text are worked out from the tiles.

What are the locked tiles?

Tiles with a lock hold a fixed event, like a standup or a client call. They are marked with a padlock and the event's name, they count toward the budget they belong to, and pressing one says why it cannot change instead of painting it.

What happens when a budget is over?

Painting is never blocked. The row says how many hours over you are in words and in a heavier weight, and its bar stays full. The summary at the foot names every category that is over.

Why are the brushes patterns and not colors?

A color alone can't be told apart by everyone and it vanishes in a printout. Each brush has a pattern and a word, and the hour tiles repeat both.

What stays local, and how do I wire it up?

Everything. Painting only changes state in the page, and a reload brings back the starting day. To make it real, save the marks array from paint and load it into the first state.

How does it look on a phone?

The brush row scrolls sideways if it needs to, the budgets come first and the ten hour tiles stack under them as full-width rows with a large press target.

All 100 calendar blocks