Calendar
Locked Past
A month with a locked past: an unavailable day does not stay silent on click, it shows a written reason for the refusal under the grid.
What you can change
- the reference date through today and the preselected one through defaultValue
- the explanation text through reason
- the lines under the grid through selectedText and deniedText, and the locked day label through unavailableText
A link for your AI agent: preview, code and instructions.
Preview
Use it with AI
- 1. Copy the link.
- 2. Write to your agent in your own words and drop the link into the sentence.
- 3. The agent opens the link and installs the component from the registry.
put this on the home page as the hero:
https://vibeui.ru/c/calendar-013?lang=en&theme=dark
Not sure where to paste it? Step-by-step guide
Show the full instructions
What the link says, spelled out. Use it when your agent cannot open links — paste this text instead.
Loading…
For developers
The install command lives in the “Component source” block below — a signed link that stays valid for 24 hours.
Technical notes
A client component: useState holds the selected date and the text of the last refusal. Past days are marked aria-disabled rather than with the disabled attribute — such a button stays in the tab order and accepts a press, so instead of a dead click the reason is shown. The "has it passed" comparison is done with ISO strings rather than Date objects: a YYYY-MM-DD string comparison is correct and does not depend on the time zone. The reference day arrives as the today prop as a string rather than from new Date() — otherwise the server and the client render would drift apart. A closed day is struck through, not merely dimmed: dimness alone does not tell it apart from a day of a neighbouring month. The status line lives with role=status and aria-live, so the reason is read out right after the press.
Tags
- calendar
- disabled
- booking
- a11y
Component source
The same file your agent installs. Here in case you would rather copy it by hand.
Loading…