shadcn.io is not affiliated with official shadcn/ui
Sports Fixtures Calendar Block for Solid
A league's upcoming fixtures with the home side first, its last six results, and a table worked out from all fifteen results, with a My club select that marks a club's rows and says Home, Away, Win, Draw or Loss.
Installation
Overview
Show a season at a glance, with these sports fixtures for Solid with Ark UI. It is a screen of Terracemoor, a supporters' fixtures app, in a hairline frame with a plus mark on each corner, for six fictional clubs in the Mill Valley League. Three Tabs hold the next six fixtures by date with kick-off, the home side first and the ground; the last six results with the score; and the league table, worked out from all fifteen results played so far (played, won, drawn, lost, goals for and against, goal difference and points, with ties split by goal difference, then goals for, then the club's name). A My club Native Select in the header marks that club's rows with a star and the words "My club", says Home or Away on its fixtures and Win, Draw or Loss on its results, and tints its row in the table. It is Wednesday 14 October 2026 and the last round was played on Saturday 10 October. On a phone the table drops goals for and goals against. For clubs, leagues, schools and any app with a season.
FAQ
How do I fill it with my league?
Edit CLUBS, RESULT_LINES and FIXTURE_LINES. A result is a line date|home|home goals|away goals|away and a fixture is date|kick-off|home|away, using the clubs' ids. List results in date order; the Results tab shows the last six and the table is worked out from every line, so add each new result and the table follows.
How is the table worked out?
Each result gives three points for a win and one for a draw. Clubs are sorted by points, then by goal difference, then by goals for, then by name, so two clubs on the same points never swap by chance. The table is never typed, which is why it always agrees with the results; the caption says how many matches it counts.
What does My club do?
It marks the chosen club's rows in all three tabs with a star and the words "My club", and adds a Home, Away, Win, Draw or Loss badge on its fixtures and results. "No club" removes the marks. The choice is kept in the page only; in your app store it per user.
Why is it always 14 October?
Nothing in the block reads the clock. AS_OF is the one moment the block treats as now, so the header's dates and the split between played and upcoming are the same on any day. In your app split your matches into played and upcoming by comparing their kick-off with the current time.
Is it accessible from the keyboard?
Yes. The tabs take the arrow keys, each list is a named list, and the table is a real table with a caption, column abbreviations that carry their full names (Played, Won, Goal difference) and the club names as row headers. A polite status message says which tab you moved to and which club you picked.
How does it look on a phone?
The tabs share the width. The table keeps the place, the club, played, won, drawn, lost, goal difference and points, and drops goals for and against so it needs no sideways scrolling; the scroll region stays focusable in case a long club name needs it. Every tab keeps the same height, so switching does not move the page.