Getting StartedComponentsDesign TokensThemingTheme SynthesizerFrameworksAccessibilityUtilitiesServer RenderingBrowser SupportContributingChangelog App ShellAspect GridAuth ShellCenterClusterContainerDashboard GridDockFloat BarInsetMasonryPage HeaderPage LayoutResizableResponsive SwitcherSectionSettings LayoutSplit PaneStatus BarStickyToolbar Anchor NavBottom NavBreadcrumbBreadcrumb MenuCommand BarDrawerFooterLinkMenubarNavigation MenuPage IndicatorPaginationRailScroll IndicatorScroll SpyScroll To TopSidebarSkip LinkSpeed DialStepper NavTabsTop BarTree View AccordionAspect RatioAvatarAvatar GroupCalloutCardCarouselCollapsibleColor SwatchCTA BannerDividerEmpty StateFeature CardIconImageImage CompareImage HotspotsInfinite ScrollLightboxMarqueeQR CodeScroll AreaSeparatorSkeletonSpinnerStackVideoVirtual List Activity HeatmapAnimated NumberBadgeChartClockComparisonCountdown TimerData GridData TableDescription ListDiffEvent CalendarGaugeJSON TreeKanbanKey ValueLevel MeterListMeterSparklineStatStepperTableTagTimelineUptimeValue CardWaveform BlockquoteCode BlockGradient TextHighlightKbdKeyboard MapMarkdownNumber FormatProseTerminalTextTime AgoTruncateTypewriter ButtonButton GroupCalendarCheckboxChipColor PickerComboboxCopy ButtonDate PickerDate Range PickerFieldsetFile UploadFormHotkeyIcon ButtonImage CropperInline EditInputInput GroupKnobLabelMasked InputMulti SelectNumber InputOTP InputPassword InputPin InputRadio GroupRange SliderRatingSearchSegmented ControlSelectSignature PadSliderSortable ListSwitch GroupTag InputTextareaTheme ToggleTime PickerToggleTransfer ListTree Select AlertAnnouncementBannerCommand PaletteConfirmConnection StatusContext MenuConversationDialogDropdown MenuGuided TourHover CardInline MessageLoading OverlayModalNotification PanelPopoverProgressProgress ToastSheetSnackbarSpotlightToastTooltip
ARC UI ARC Radiant Components
v3.2 Docs Components Tokens Synthesizer
Getting StartedFrameworksServer Rendering Design TokensThemingTheme SynthesizerTypographyUtilities All ComponentsAccessibilityBrowser SupportChangelogContributingStats App ShellAspect GridAuth ShellCenterClusterContainerDashboard GridDockFloat BarInsetMasonryPage HeaderPage LayoutResizableResponsive SwitcherSectionSettings LayoutSplit PaneStatus BarStickyToolbar Anchor NavBottom NavBreadcrumbBreadcrumb MenuCommand BarDrawerFooterLinkMenubarNavigation MenuPage IndicatorPaginationRailScroll IndicatorScroll SpyScroll To TopSidebarSkip LinkSpeed DialStepper NavTabsTop BarTree View AccordionAspect RatioAvatarAvatar GroupCalloutCardCarouselCollapsibleColor SwatchCTA BannerDividerEmpty StateFeature CardIconImageImage CompareImage HotspotsInfinite ScrollLightboxMarqueeQR CodeScroll AreaSeparatorSkeletonSpinnerStackVideoVirtual List Activity HeatmapAnimated NumberBadgeChartClockComparisonCountdown TimerData GridData TableDescription ListDiffEvent CalendarGaugeJSON TreeKanbanKey ValueLevel MeterListMeterSparklineStatStepperTableTagTimelineUptimeValue CardWaveform BlockquoteCode BlockGradient TextHighlightKbdKeyboard MapMarkdownNumber FormatProseTerminalTextTime AgoTruncateTypewriter ButtonButton GroupCalendarCheckboxChipColor PickerComboboxCopy ButtonDate PickerDate Range PickerFieldsetFile UploadFormHotkeyIcon ButtonImage CropperInline EditInputInput GroupKnobLabelMasked InputMulti SelectNumber InputOTP InputPassword InputPin InputRadio GroupRange SliderRatingSearchSegmented ControlSelectSignature PadSliderSortable ListSwitch GroupTag InputTextareaTheme ToggleTime PickerToggleTransfer ListTree Select AlertAnnouncementBannerCommand PaletteConfirmConnection StatusContext MenuConversationDialogDropdown MenuGuided TourHover CardInline MessageLoading OverlayModalNotification PanelPopoverProgressProgress ToastSheetSnackbarSpotlightToastTooltip

Calendar

Interactive month-view calendar grid for date selection with min/max constraints, keyboard navigation, and today highlighting.

Components Calendar
input interactive
<arc-calendar>

Overview

Calendar renders a full month grid with day-of-week headers, previous/next month navigation, and selectable date cells. It is the core building block for date pickers and scheduling interfaces. The selected date is stored as an ISO string (YYYY-MM-DD) in the `value` prop, and the visible month is controlled independently via `month` (0-based) and `year`, allowing programmatic navigation without changing the selection. Days from the previous and next months fill the grid to maintain a consistent 6-row layout, but these "outside" days are displayed at reduced opacity. The current date receives an inset ring highlight (`--border-bright`), while the selected date gets a solid accent-primary background. Optional `min` and `max` ISO date strings constrain the selectable range — disabled dates are dimmed and non-interactive. Full keyboard navigation is supported: arrow keys move a focus ring through the grid (including automatic month transitions at boundaries), and Enter or Space confirms the selection. The component fires `arc-change` when a date is selected and `arc-month-change` when the visible month changes, enabling lazy-loading of events or availability data for the newly visible period.

Guidelines

When to use

  • Set `min` and `max` to constrain the selectable range when your use case has date boundaries
  • Use `arc-month-change` 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-month-change` 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';

export default function Example() {
  return (
    <Calendar />
  );
}
 
<script setup>
import { Calendar } from '@arclux/arc-ui-vue';
</script>

<template>
  <Calendar />
</template>
 
<script>
  import { Calendar } from '@arclux/arc-ui-svelte';
</script>

<Calendar />
 
import { Component } from '@angular/core';
import { Calendar } from '@arclux/arc-ui-angular';

@Component({
  imports: [Calendar],
  template: `
    <arc-calendar></arc-calendar>
  `,
})
export class MyComponent {}
 
import { Calendar } from '@arclux/arc-ui-solid';

export default function Example() {
  return (
    <Calendar />
  );
}
 
import { Calendar } from '@arclux/arc-ui-preact';

export default function Example() {
  return (
    <Calendar />
  );
}

API

locale string ''
BCP 47 tag used for month and weekday names. Defaults to the document's `lang`, then the browser's language.
first-day-of-week number 0
Which day the week starts on, 1 = Monday … 7 = Sunday. Defaults to the locale's own convention.
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

arc-month-change detail: { month: number, year: number }
Fired when the visible month or year changes via the navigation buttons.
arc-change
Fired when a date is selected. `event.detail.value` contains the ISO date string (YYYY-MM-DD).

See Also
ARC UI

Components that glow. One Lit source, seven native targets.

Docs

Project

Arclight

© 2026 Arclight Digital, LLC. All rights reserved.

Documentation generated with AI assistance and reviewed by humans. Found an issue? Open a GitHub issue.

Privacy Policy