shadcn.io is not affiliated with official shadcn/ui
Task Deadlines Calendar Block for Vue
Ten team tasks in four derived buckets, a priority filter, progress bars with assignee initials, Snooze to tomorrow that re-sorts a task, a count of what needs attention today and a month.
Installation
Overview
Show a team what is slipping with this task deadlines calendar for Vue with Ark UI. A hairline frame with a plus mark on each corner sorts ten tasks into four bands worked out from a fixed Wednesday, 14 October 2026: Overdue, Today, This week (up to Sunday) and Later. The header counts the tasks that need attention today, the overdue and due-today ones. A ToggleGroup filters by priority, and each row has the assignee's initials in an Avatar, a Progress bar and a ghost "Snooze to tomorrow" Button that moves the task a day: its bucket and its date re-derive and a status line says "moved to This week". Priority is a shape and a word, never a color, and a drawn month marks each due date with the shape of its priority. The list is a held scroll region, so filtering never changes the height. The bands are ruled by Guides. For team planners, standup boards and any app that keeps work from going overdue.
FAQ
How do I use my own tasks?
Edit TASKS: each has a name, a priority of High, Medium or Low, initials, a percent done and an ISO due date. The buckets, the day words and the attention count are worked out from them and from AS_OF.
Why is today always 14 October?
Nothing in the block reads the clock. AS_OF is the one moment it treats as now, and every day count, bucket and ring comes from it, so the block looks the same on any day and in a screenshot. To follow the real date, set AS_OF from your own clock or server and keep the rest as it is.
How are the buckets decided?
Before today is Overdue, today is Today, any day up to the coming Sunday is This week and the rest is Later. Snoozing moves the date a day, so a task can cross into a new bucket; the status line says which.
What happens when I filter by priority?
Only the tasks of that priority stay in each band, and a band with none says "Nothing here". The panel keeps its height because the list sits in a fixed scroll region.
What does the month beside the list do?
It is a drawn month, not a picker. Each date in the list is marked on it with a shape from the legend, and the marks move when the list changes. Previous and next step through the months the data covers. It is hidden from screen readers; a sentence under it says how many dates are marked, and the list holds every fact.