<arc-calendar> Overview
Guidelines
When to use
- Set `min` and `max` to constrain the selectable range when your use case has date boundaries
- Use `arc-navigate` to lazy-load events or availability data when the user changes months
- Pair Calendar with a text input or DatePicker wrapper for combined typed and visual date entry
- Pre-set `month` and `year` to the month containing the initial `value` so the selection is visible on load
- Provide sufficient container width (280px minimum) so the grid cells are comfortably clickable
When not to use
- Do not use Calendar for time selection -- it handles dates only
- Do not set `min` greater than `max` -- the component will disable all days
- Do not use Calendar for date range selection (two dates) -- it supports single date selection only
- Do not override the monospace font on day cells -- it ensures uniform column alignment
- Avoid placing Calendar in extremely narrow containers below 280px -- the grid cells become too small for touch targets
Features
- Standard 7-column month grid with Sun-Sat headers in monospace uppercase
- Previous and next month navigation buttons in the header
- Today highlighting with an inset border ring for orientation
- Selected date highlighted with solid accent-primary background and bold weight
- Min/max date constraints via ISO date strings that disable out-of-range days
- Arrow key navigation through the grid with automatic month transitions at boundaries
- Outside-month day cells shown at 30% opacity to fill the 6-row grid consistently
- Two events: `arc-change` on date selection and `arc-navigate` on month/year changes
Preview
Usage
This component requires JavaScript. No pure HTML/CSS version is available — use the Web Component directly or a framework wrapper.
<arc-calendar></arc-calendar>import { Calendar } from '@arclux/arc-ui-react';
<Calendar></Calendar><script setup>
import { Calendar } from '@arclux/arc-ui-vue';
</script>
<template>
<Calendar></Calendar>
</template><script>
import { Calendar } from '@arclux/arc-ui-svelte';
</script>
<Calendar></Calendar>import { Component } from '@angular/core';
import { Calendar } from '@arclux/arc-ui-angular';
@Component({
imports: [Calendar],
template: `
<Calendar></Calendar>
`,
})
export class MyComponent {}import { Calendar } from '@arclux/arc-ui-solid';
<Calendar></Calendar>import { Calendar } from '@arclux/arc-ui-preact';
<Calendar></Calendar>API
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | '' | The selected date as an ISO string (YYYY-MM-DD). Empty string means no date is selected. |
min | string | '' | Minimum selectable date as an ISO string. Days before this date are disabled. |
max | string | '' | Maximum selectable date as an ISO string. Days after this date are disabled. |
month | number | — | The currently displayed month (0-based, 0=January). Defaults to the current month. |
year | number | — | The currently displayed year. Defaults to the current year. |
Events
| Event | Description |
|---|---|
arc-change | Fired when a date is selected. `event.detail.value` contains the ISO date string (YYYY-MM-DD). |
arc-navigate | Fired when the visible month or year changes via the navigation buttons. |