shadcn.io is not affiliated with official shadcn/ui
Digest Schedule Account Block for Ark UI
A schedule for the security digest email: seven day buttons, an hour select, a weekly, every 2 weeks or monthly choice, and the next three send dates worked out from the choice.
Installation
Overview
Let people pick when a summary email arrives, with this digest schedule for React with Ark UI. A hairline frame with a plus mark on each corner holds three bands. The first has a Toggle Group of seven day buttons, Mon to Sun, any number of them but at least one; on a phone the row scrolls sideways. The second has an hour Select and a Segment Group of Weekly, Every 2 weeks and Monthly, with a sentence that writes the choice out ("Monday at 08:00, every second week."). The third lists the next three send dates, such as "Mon 19 Oct, 08:00", worked out from one fixed day and the choice, so every change moves them. A fixed line says critical alerts never wait for the digest. The Shine Button saves, an outline Button discards and a status line counts the changes. It's built from Toggle Group, Select, Segment Group, Button, Shine Button and Guides, with a CSS entrance only. For notification settings, a weekly report or any app that sends a summary.
FAQ
How are the next three dates worked out?
From the AS_OF day, a fixed constant, never the clock: starting the day after it, the first three days that match. Weekly matches the chosen weekdays every week. Every 2 weeks does the same in alternate weeks counted from the Monday in ANCHOR. Monthly matches the first date of each chosen weekday in a month, so Monday gives the first Monday of November, then of December. Replace AS_OF with today's date when you wire it up.
Which time zone are the hours in?
The one in ZONE, written under the hour select ("Lisbon time"). The block does no daylight-saving arithmetic: the hour is shown as the hour on the clock in that zone, which is what a real scheduler would send. Pair it with the time zone block if people can change it.
What stays local?
Everything. Save copies the draft over the saved copy in this page and says "Saved 2 changes in this demo". To make it real, send days, hour and frequency from save and let your server compute the dates it will actually use; show its answer in the three cells instead of the local calculation.
Why can't I clear every day?
A digest with no day never arrives, so pressing the last pressed day does nothing but say "Keep at least one day." in the status line. To let people turn the digest off, add a switch above the days and hide the rest of the schedule when it's off.
Is it accessible?
The day buttons are named with the full weekday ("Monday") while showing the short one, and the group is named by its heading. The pressed state is a solid fill plus the pressed attribute. The three dates are a list of time elements, and the status line is a polite live region present from load. The frequency control is a labelled radio group with the arrow keys.