Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Calendar blocks

Pro

Office Events Calendar Block for Svelte

Seven office events in day bands with a capacity bar, Going and Maybe buttons, a waitlist that takes over at capacity, places that free up when you leave and a count of your week.

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

Run an office events board with this office events calendar for Svelte with Ark UI. A hairline frame with a plus mark on each corner opens on a "My week" band that counts this week and next from a fixed 14 October 2026 ("2 going, 0 maybe, 0 waiting"), then lists the events in day bands. Each row has a date tile, the title, the time and place, a Progress bar with "12 of 20" and "8 places free", and two outline Buttons, Going and Maybe, that you press again to clear. When an event is full the Going button reads "Join the waitlist (3rd)", and a full event you are going to frees its place the moment you leave. Everything is worked out from the data: places, waitlist position, the day words and your week. The bands are ruled by Guides. It's built from Button, Progress and Guides, with a CSS entrance only. For intranets, team calendars and any app with limited places.

FAQ

How do I use my own events?

Edit EVENTS: each has an id, a title, an ISO date, a start time, a place, a cap (places), others (colleagues already going, not counting you) and waiting (colleagues already on the waitlist). DAYS lists the days that get a band, and START_REPLIES sets what you have answered when the page opens.

Why is today always 14 October?

Nothing in the block reads the clock. AS_OF is the one moment it treats as now, and every day count, derived date and ring comes from it, so the block looks the same on any day and in a screenshot. To follow the real date, set AS_OF from your own clock or server and keep the rest as it is.

How does the waitlist work?

If the colleagues already going fill every place, the Going button turns into "Join the waitlist" with your place in line, which is the number already waiting plus one. Joining is a reply of its own, and pressing it again leaves. If you are going to an event that is exactly full and you press Going again, your place is freed and the row says "1 place free".

How is My week counted?

By the Monday-to-Sunday week of the fixed "now" and the week after it. Each count is the number of events in that week with that reply: going, maybe or on a waitlist. Clearing a reply takes it out of the count at once.

Why are Going and Maybe plain buttons?

They are two toggle buttons in a labelled group, each with aria-pressed, so a reply can be cleared by pressing it again, which a radio group does not allow. The pressed one is solid foreground, never the primary color.

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

Everything. Replies only change state in the page and reset on reload; nobody is told and no place is held. To make it real, send each change from reply to your own API, and start replies and the others counts from what it returns.

All 100 calendar blocks