shadcn.io is not affiliated with official shadcn/ui
Scheduled Reports Settings Block for Vue
A scheduled reports panel with a November calendar that dots every send day from each report's rule, a list of what goes out on the chosen day and an editor for frequency, day, time, recipients and format.
Installation
Overview
Let people see when their reports will land before they save a rule, with this scheduled reports panel for Vue with Ark UI. Inside a hairline frame with a plus mark on each corner, a strip of four reports chooses which one to edit, each button naming the report and its rule. Below it a month grid of November 2026 puts a dot on every day a report is sent, worked out from each report's own frequency, weekday or day of the month, and choosing a day lists the reports that go out that day with their time, number of recipients and format; a day with nothing shows a designed empty state in the same space. Beside the grid the chosen report is edited with a Segment Group for how often it goes (daily, weekly or monthly), a Native Select for the weekday or the day of the month and another for the hour in UTC, a Tags Input for the recipients as email addresses, and a second Segment Group for the format. Editing a rule redraws the dots at once, and a report left with no recipient is refused when you save. The last band counts unsaved changes in a status line beside a Shine Button to save them and an outline Button to discard them. On a phone the calendar and the day's list sit above the editor and the save bar stays pinned to the bottom of the screen. It's built from Segment Group, Native Select, Tags Input, Empty, Button, Shine Button and Guides, with the calendar a plain table. For an analytics, finance or operations product, or any setting where a schedule is easier to read as a month.
FAQ
How do I fill it with my own reports?
Edit the constants at the top. SAVED lists the reports with their name, frequency, weekday or day of the month, hour in UTC, recipients and format, MONTH is the month the calendar shows (a fixed month, never the clock) and OPEN_DAY is the day it opens on. In your app, load the reports from your server and compute the month from the visitor's date after the page mounts.
How are the dots worked out?
By one function over the rule: a daily report is sent every day, a weekly one on days whose weekday matches, and a monthly one on the chosen day of the month, or on the last day. Each day shows up to three dots, one per report, and its button is named with the date and the number of sends, so a screen reader hears "Mon, Nov 2, 1 send". The list under the grid uses the same function, so the dots and the list can never disagree.
How do I move around the calendar with a keyboard?
The grid has one tab stop, on the chosen day. The arrow keys move the focus a day or a week at a time inside the month, and Enter or Space chooses the focused day. Every day is a real button, so nothing is hidden from the keyboard. Days outside the month are blank cells.
What is refused when I save?
A report with no recipients. The report is chosen for you, the status line says a report has no recipient and focus moves to the recipients field. Recipients are checked as they are added: an address must look like an email address, can't repeat and can't go past five, and the status line says which rule turned it down. Tags add on Enter, a comma or a paste, and on leaving the field.
What happens when I press Save, and what stays local?
Nothing leaves the page and no report is sent. The block keeps the saved reports and the ones being edited, and counts how many settings differ across all four, so the status line can say "3 changes not saved yet." Save makes the edited copy the saved one and says it was saved in this demo; Discard puts the saved copies back. To make it real, send the edited rules to your scheduler in the save handler. Save and Discard are marked aria-disabled rather than disabled while nothing changed, so they keep their place and focus.