{"id":46736912,"url":"https://github.com/rbren/calendar-widget","last_synced_at":"2026-03-09T16:54:32.116Z","repository":{"id":341881715,"uuid":"1171882364","full_name":"rbren/calendar-widget","owner":"rbren","description":null,"archived":false,"fork":false,"pushed_at":"2026-03-03T21:53:04.000Z","size":820,"stargazers_count":0,"open_issues_count":5,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-03-03T21:57:41.547Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rbren.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-03-03T17:58:57.000Z","updated_at":"2026-03-03T21:53:23.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/rbren/calendar-widget","commit_stats":null,"previous_names":["rbren/calendar-widget"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/rbren/calendar-widget","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rbren%2Fcalendar-widget","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rbren%2Fcalendar-widget/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rbren%2Fcalendar-widget/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rbren%2Fcalendar-widget/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rbren","download_url":"https://codeload.github.com/rbren/calendar-widget/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rbren%2Fcalendar-widget/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30303162,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-09T14:33:48.460Z","status":"ssl_error","status_checked_at":"2026-03-09T14:33:48.027Z","response_time":61,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-03-09T16:54:31.347Z","updated_at":"2026-03-09T16:54:32.104Z","avatar_url":"https://github.com/rbren.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @calendar-widget/core\n\n[![CI](https://github.com/rbren/calendar-widget/actions/workflows/ci.yml/badge.svg)](https://github.com/rbren/calendar-widget/actions/workflows/ci.yml)\n[![npm version](https://img.shields.io/npm/v/@calendar-widget/core)](https://www.npmjs.com/package/@calendar-widget/core)\n[![license](https://img.shields.io/npm/l/@calendar-widget/core)](./LICENSE)\n\nA lightweight, accessible React calendar widget with single date and date range selection, quick month/year navigation, full keyboard navigation, localization support, and flexible theming via CSS custom properties.\n\n## Features\n\n- **Date selection** — Single date or date range selection with optional min/max constraints and disabled dates\n- **Range mode** — Two-click range picking with live hover preview\n- **Quick navigation** — Click the month/year heading to drill up into month and year picker views\n- **Today button** — One-click return to the current month\n- **Week numbers** — Optional ISO week number column\n- **Custom day rendering** — Replace or augment day cell content with the `renderDay` prop\n- **Lifecycle callbacks** — `onMonthChange` and `onDayFocus` for reacting to navigation and focus changes\n- **Accessible** — Full keyboard navigation (WAI-ARIA grid pattern), descriptive `aria-label` on every cell, and ARIA attributes throughout\n- **Localizable** — Uses `Intl.DateTimeFormat` for locale-aware month, day, and accessible label formatting\n- **Configurable** — Set the first day of the week to any day (Sunday–Saturday)\n- **Themeable** — Customize colors, sizing, and fonts with CSS custom properties\n- **Lightweight** — Zero runtime dependencies (React is a peer dependency)\n\n## Installation\n\n```bash\nnpm install @calendar-widget/core\n```\n\n**Peer dependencies:** React 18+ and ReactDOM 18+ (`^18.0.0 || ^19.0.0`).\n\n## Quick Start\n\n```tsx\nimport { useState } from 'react';\nimport { CalendarWidget } from '@calendar-widget/core';\nimport '@calendar-widget/core/style.css';\n\nfunction App() {\n  const [date, setDate] = useState\u003cDate | null\u003e(null);\n\n  return (\n    \u003cCalendarWidget\n      value={date}\n      onChange={setDate}\n    /\u003e\n  );\n}\n```\n\n### Range Selection\n\n```tsx\nimport { useState } from 'react';\nimport { CalendarWidget, DateRange } from '@calendar-widget/core';\nimport '@calendar-widget/core/style.css';\n\nfunction App() {\n  const [range, setRange] = useState\u003cDateRange | null\u003e(null);\n\n  return (\n    \u003cCalendarWidget\n      mode=\"range\"\n      value={range}\n      onChange={setRange}\n    /\u003e\n  );\n}\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `mode` | `'single' \\| 'range'` | `'single'` | Selection mode |\n| `value` | `Date \\| DateRange \\| Date[] \\| null` | — | Currently selected date(s) or range |\n| `onChange` | `(value: Date \\| DateRange \\| null) =\u003e void` | — | Called when the user selects a date or completes a range |\n| `locale` | `string` | Browser default | Locale for `Intl` formatting (e.g. `\"fr-FR\"`) |\n| `minDate` | `Date` | — | Earliest selectable date |\n| `maxDate` | `Date` | — | Latest selectable date |\n| `disabledDates` | `Date[]` | `[]` | Specific dates to disable |\n| `weekStartsOn` | `0–6` | `0` (Sunday) | First day of the week |\n| `showWeekNumbers` | `boolean` | `false` | Display ISO week numbers in the first column |\n| `quickNavigation` | `boolean` | `true` | Enable drill-up month/year picker on heading click |\n| `showTodayButton` | `boolean` | `true` | Show a \"Today\" button below the header |\n| `todayButtonLabel` | `string` | `\"Today\"` | Custom label for the today button (useful for i18n) |\n| `renderDay` | `(dayNumber: ReactNode, info: DayRenderInfo) =\u003e ReactNode` | — | Custom render function for day cell content |\n| `onMonthChange` | `(month: Date) =\u003e void` | — | Called when the displayed month changes via navigation |\n| `onDayFocus` | `(date: Date) =\u003e void` | — | Called when keyboard focus moves to a new day cell |\n| `className` | `string` | — | Additional CSS class on the root element |\n\nSee the [full API reference](docs/api/CalendarWidget.md) for details on every prop.\n\n## Theming\n\nOverride CSS custom properties on the widget root to change the look:\n\n```css\n.my-calendar {\n  --cw-color-primary: #8b5cf6;\n  --cw-color-bg: #fafafa;\n  --cw-cell-size: 40px;\n  --cw-border-radius: 50%;\n}\n```\n\n```tsx\n\u003cCalendarWidget className=\"my-calendar\" value={date} onChange={setDate} /\u003e\n```\n\n### CSS Custom Properties\n\n| Property | Default | Description |\n|----------|---------|-------------|\n| `--cw-font-family` | `system-ui, sans-serif` | Font family |\n| `--cw-font-size` | `14px` | Base font size |\n| `--cw-color-primary` | `#2563eb` | Primary accent color |\n| `--cw-color-bg` | `#ffffff` | Background color |\n| `--cw-color-text` | `#1f2937` | Default text color |\n| `--cw-color-text-muted` | `#9ca3af` | Muted text (outside days, weekday headers) |\n| `--cw-color-hover` | `#eff6ff` | Day cell hover background |\n| `--cw-color-selected` | `var(--cw-color-primary)` | Selected day background |\n| `--cw-color-selected-text` | `#ffffff` | Selected day text color |\n| `--cw-color-today-ring` | `var(--cw-color-primary)` | Ring color for today's date |\n| `--cw-color-disabled` | `#e5e7eb` | Disabled day text color |\n| `--cw-color-range-bg` | `#dbeafe` | Background for days within a selected range |\n| `--cw-color-range-preview-bg` | `rgba(219, 234, 254, 0.5)` | Background for the hover preview range |\n| `--cw-border-radius` | `6px` | Day cell border radius |\n| `--cw-cell-size` | `36px` | Day cell width and height |\n\nSee [docs/features/styling.md](docs/features/styling.md) for more details.\n\n## Keyboard Navigation\n\n| Key | Action |\n|-----|--------|\n| `←` `→` | Previous / next day |\n| `↑` `↓` | Previous / next week |\n| `Home` / `End` | First / last day of current week |\n| `PageUp` / `PageDown` | Same day in previous / next month |\n| `Enter` / `Space` | Select the focused date |\n\nIn the month and year picker views, arrow keys move between cells, `Enter`/`Space` confirms, and `Escape` returns to the previous view.\n\n## Accessibility\n\nThis widget targets WCAG 2.1 Level AA compliance. The calendar grid uses the WAI-ARIA grid pattern with `role=\"grid\"`, descriptive `aria-label` attributes on every day cell (e.g. \"Saturday, March 15, 2026 (today, selected)\"), and a roving tabindex for keyboard navigation. The month/year heading button provides an accessible label describing the drill-up action (e.g. \"Choose month and year, currently March 2026\"). See the [Keyboard Navigation](#keyboard-navigation) table above for supported shortcuts.\n\n## Development\n\n```bash\n# Clone the repository\ngit clone https://github.com/rbren/calendar-widget.git\ncd calendar-widget\n\n# Install dependencies\nnpm install\n\n# Start the dev server\nnpm run dev\n\n# Run tests\nnpm test\n\n# Run tests in watch mode\nnpm run test:watch\n\n# Lint and format\nnpm run lint\nnpm run format\n\n# Type-check\nnpm run typecheck\n\n# Build for production\nnpm run build\n```\n\n## Documentation\n\n- [API Reference](docs/api/)\n- [Feature Guides](docs/features/)\n- [Release Notes](docs/releases/)\n- [Demos](docs/demos/)\n\n## License\n\n[MIT](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frbren%2Fcalendar-widget","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frbren%2Fcalendar-widget","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frbren%2Fcalendar-widget/lists"}