Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Monitoring blocks

Pro

On-Call Schedule Monitoring Block for Svelte

Coverage depth for the next 14 days hour by hour, a grid of how many people are on call with a now marker, a layer filter, a reading of who is on and next, and a list of gaps that jump to the hour.

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

Find the hours nobody is on call with this coverage grid for Svelte with Ark UI. It is Pagerota, an on-call coverage planner (made up), showing the next 14 days: days run down and hours across, and each cell is the number of people on call at that hour (2 when a primary and a secondary are, 1, or 0) as a filled, half-toned or outlined cell with the number inside. A line marks now. A Toggle Group narrows the depth to both layers, the primary or the secondary. The cells are one tab stop with arrow keys, Home and End; pressing one reads who is on and who is next in the two layers. Under the grid the gaps are listed and each one moves the cursor to its first hour. The header counts the gaps and names the longest, all worked out from the typed shifts. On a phone the grid scrolls sideways with the day names pinned. Guides draw the frame and its bands; the entrance is CSS only. For rota planning, coverage reviews and handover checks.

FAQ

How do I use my own rota?

Edit SHIFTS: each has a layer (primary or secondary), the initials of who is on, and the hours it starts and ends, counted from the first midnight (FIRST_DAY). An hour with no shift is a gap. The depth, the gaps, their lengths, the header sentence and the next person are all derived.

How do I use it with a keyboard?

The grid is one tab stop. Arrow keys move one hour or one day, Home and End go to the ends of the day, and Enter or Space reads the hour in the status line. The gap buttons are ordinary buttons.

What is real here and what is typed?

All of it is typed and nobody is paged. The initials are examples and nothing is swapped, saved or sent; in your app feed the shifts from your scheduling tool and keep the helpers that derive the cells and gaps.

Can I read it without colour?

Yes. Each cell holds its number, full cover is solid, one layer is half-toned and none is outlined, and every cell is a button named with its hour and the count.

How does it look on a phone?

The 24 hours keep a fixed cell width inside a named scroll region and the day names stay in view while it scrolls; the two readings stack and the gap list fills the width.

All 100 monitoring blocks