Mini Calendar
A compact horizontal date strip with a month header and a CSS-only selectable row of weekday/day cells, today subtly marked — no JavaScript.
Preview
June 2026
Controls
Device view renders in an isolated frame so real responsive breakpoints apply. Switch to Full for overflowing popovers.
Installation
php artisan ui:add mini-calendar
Registry contract
Install confidence
php artisan ui:add mini-calendar
writes only the generated targets below. The CLI validates each file hash before writing and
prompts before replacing local changes unless --force is used.
- Version
- 1.0.0
- License
- open
- Stability
- stable
- Contract
- v2
- Foundation
- ≥ 1.0.0
| Type | Generated target |
|---|---|
| blade | resources/views/components/ui/mini-calendar.blade.php |
Registry dependencies
None.
Package dependencies
composer: jml/brok:^1.0
Guidance
Layout and content structureStructure content hierarchy and responsive relationships.
Use when
- Use to structure hierarchy, spacing, and responsiveness so content is easier to scan and navigate. Do not let layout primitives substitute for semantics, headings, or interaction rules users still need.
Avoid when
- Avoid using mini-calendar as a default simply because it is available in the library. Choose it only when its interaction cost, visibility, and behavior match the job to be done.
- Task length
- short
- Interaction cost
- low
- Interruptiveness
- none
- Input precision
- none
- Mobile / touch risk
- low
- Accessibility risk
- medium
- Needs background context
- No
- Comparison needed
- No
Preferred alternatives
- Semantic HTML with standard flow
Anti-patterns
- Using visual layout as a substitute for semantic structure
API
manifest knowledge + registry-derived coverageProps
| Prop | Type / values | Default | Description |
|---|---|---|---|
| month | string | June 2026 | Declared by @props in the registry Blade source. |
| days | mixed|null | null | Declared by @props in the registry Blade source. |
| name | string | mini-calendar | Declared by @props in the registry Blade source. |
Slots
Components use the default Blade slot unless a documented subcomponent is installed by the registry item.
Data slots
mini-calendar
Capabilities
Behavior
- Uses server-rendered Blade and semantic HTML.
- Declares registry capability flags: a11y, responsive, rtl, darkMode, localized.
Usage
<x-ui.mini-calendar month="June 2026" :days="[
['weekday' => 'Mo', 'day' => 8, 'today' => false, 'selected' => false],
['weekday' => 'Tu', 'day' => 9, 'today' => false, 'selected' => false],
['weekday' => 'We', 'day' => 10, 'today' => true, 'selected' => false],
['weekday' => 'Th', 'day' => 11, 'today' => false, 'selected' => true],
['weekday' => 'Fr', 'day' => 12, 'today' => false, 'selected' => false],
['weekday' => 'Sa', 'day' => 13, 'today' => false, 'selected' => false],
['weekday' => 'Su', 'day' => 14, 'today' => false, 'selected' => false],
]" />
Accessibility & localization
data-slot
Keyboard focus-visible
Localized labels
- Accessibility target: wcag-2.2-aa-target.
- Uses semantic HTML and a stable
data-slotattribute for styling/scripting hooks. - Focus-visible rings use the
ringtoken so keyboard focus is always visible. - Disabled and invalid states are conveyed to assistive tech, not by color alone.
- Targets WCAG 2.2 AA; verify contrast in light, dark, admin and customer surfaces above.
- Labels go through
__()and the component uses logical properties (ms-*,text-start,start-*) so it mirrors correctly — flip the preview to RTL to confirm.
Source
The exact, editable file ui:add writes
into your app — copy it or own the whole thing. Previews
render this same code; there are no preview-only components.
Changelog
Current version: v1.0.0. See the site changelog for the full release history.