shadcn.io is not affiliated with official shadcn/ui
Reading Plan Calendar Block for Svelte
A queue of four books with the pages left, a slider for pages a day that works out every finish date in turn from the fixed date, Move up and Move down buttons that re-order the queue and shift the dates, a seven-day streak and a month of reading days.
Installation
Overview
Tell a reader when each book will be done with this reading plan for Svelte with Ark UI. A hairline frame with a plus mark on each corner starts with a Slider for pages a day, from 10 to 80, and a sentence that says when all four books are done. Under it a queue of four books shows the pages still to go, a Progress bar of how much is read and the day each will be finished: the first after its own pages, the second after those and its own, and so on, counted from the fixed "now" of 14 October, so a date reads "Finish Mon 19 Oct". Move up and Move down buttons re-order the queue, focus stays on the button you pressed, and every later date moves with it. Seven dots show the last week's reading, a month in the side cell marks the reading days and each finish, and a polite status line says what moved. It's built from Slider, Progress, Button and Guides, with a CSS entrance only. For reading trackers, course reading lists and any queue where each item's date depends on what comes before it.
FAQ
How do I add my books?
Edit BOOK_LINES. Each line is id | title | pages to go | pages in the book. The finish dates, the bars and the month marks are worked out from the order and the pace; the streak is STREAK, seven flags ending at the fixed "now".
How is a finish date worked out?
finishOf adds up the pages to go of every book up to and including this one, divides by the pages a day and rounds up to whole days, then counts from today, so reading starts on the fixed "now". Moving a book changes the totals before it, so the dates move.
How do I re-order the queue with the keyboard?
Tab to a book's Move up or Move down button and press Enter or Space. The button at the top or the bottom of the queue is marked unavailable, says so when pressed and keeps focus. After a move, focus stays on the same button of the same book.
Why is it always 14 October?
Nothing in the block reads the clock. AS_OF is the one moment the block treats as now. To follow the real date, set it from your own clock and keep the rest.