shadcn.io is not affiliated with official shadcn/ui
Weather Forecast Calendar Block for Solid
A typed seven-day forecast checked against an outdoor event's needs, with the best day marked, the reasons the others fail and a Plan it button, labelled as sample data.
Installation
Overview
Pick the best day for an outdoor plan with this weather forecast calendar for Solid with Ark UI. A hairline frame with a plus mark on each corner holds a seven-day forecast for 14 to 20 October 2026, labelled as sample data typed for this demo rather than a live forecast. A Select chooses the event: a garden party, a bike ride or football on the green, each with typed needs such as "15 degrees or more, wind under 20 km/h and rain under 30%". Every day is checked against them and the best one is named, "Best: Sat 17 Oct", marked in its cell with a Badge and a button to plan the event for that day. The other days say what fails, "Cool, Windy, Wet", and the chosen day's three checks are listed under the week with the exact numbers. The week is seven hairline cells from the medium breakpoint and seven rows on a phone, each a button with a glyph, a high and a low, and the verdict. Plan it only sets a line in the demo and sends nothing. The bands are ruled by Guides. It's built from Select, Button, Badge and Guides, with a CSS entrance only. For event planners, outdoor booking apps and any app that scores days against what a plan needs.
FAQ
How do I use a real forecast?
The block ships with DAYS, a typed table of seven days, each with a cond (Showers, Cloudy, Part cloud or Sunny), a high, a low, a wind speed and a rain chance. Replace it with the result of a request to your weather provider, mapped to the same fields. The checks, the verdicts and the best day are all worked out from those.
How is the best day chosen?
A day fits when it clears all three needs: high at or above the minimum, wind under the limit and rain chance under the limit. Among the days that fit, the one with the most room is best: each margin counts up to one, and the three are added. If no day fits the heading says so and the button is inactive.
How do I add an event type?
Add an entry to NEEDS with a label, a minHigh in degrees, a maxWind in km/h and a maxRain in percent. The Select, the line of needs and the verdicts follow.
What does Plan it do?
It sets a line below the week ("Garden party planned for Sat 17 Oct in this demo. No invite is sent.") and turns the button into Clear plan. Nothing is booked or sent. Changing the event clears the plan.