shadcn.io is not affiliated with official shadcn/ui
Downtime Schedule Changelog Block for Svelte
A week of maintenance windows on a 24-hour Gantt, seven day rows with a bar for each window, a planned or emergency word, and a time-zone Select that re-labels every time.
Installation
Overview
A maintenance schedule for Svelte with Ark UI, written for Quietwindow, a fictional maintenance-communications tool. A start-aligned header carries a title worked out from the windows (how many this week and how many hours in all) and a time-zone Select (UTC, UTC+01:00, UTC-05:00). Under it a framed Gantt has seven day rows, Monday to Sunday, on a 24-hour axis, with a bar for each window labelled with the service and the hours it spans. A planned window is a solid bar and an emergency one an outlined bar with a warning icon. Choosing a zone re-labels every time and slides the bars. Below the desktop width the axis gives way to a list of days. It's built from Select, Badge and Guides, with CSS transitions and your theme's tokens for every colour. For status pages, maintenance notices and customer communications. The schedule is example data.
FAQ
How do I change the windows?
Edit SLOTS at the top of the file. A window has a day (an index into the seven days), a start in minutes after midnight UTC, a duration in minutes, a service and a kind, Planned or Emergency. The hours in the title, the bars and the times are worked out from them. Keep each window between 05:00 and 22:30 UTC so it never crosses midnight in any of the three zones.
How does the time-zone Select work?
Each zone is a fixed offset in minutes, listed in ZONES: no clock, no daylight saving. Choosing one adds the offset to every start time, so the labels change and the bars slide along the axis, and a polite line says which zone is shown. To add a zone, add an offset, and check that no window crosses midnight in it.
How is an emergency told from a planned window?
By shape and by word: a planned window is a solid bar, an emergency one an outlined bar with a warning icon, and the list of windows that screen readers and phones get names each kind in text.
How does a screen reader get the Gantt?
The drawing is hidden and the list of days and windows, with the service, the hours in the chosen zone and the kind, is what is read. A day with no work says so.
How does it fit on a phone and in a right-to-left layout?
Below the desktop width the axis is replaced by that list, one block for each day with its windows. The axis itself always runs left to right. In a right-to-left layout the text and rows mirror, while versions, dates, percentages and signed changes, which are data, keep their order.