{"_id":"@agencecinq/calendar","_rev":"5-f2f2d8c2b2dab1cb87a10b27cc204d8f","name":"@agencecinq/calendar","dist-tags":{"latest":"3.0.0"},"versions":{"1.0.0":{"name":"@agencecinq/calendar","version":"1.0.0","author":{"url":"https://agencecinq.com","name":"Jérémy Levron","email":"jeremy@agencecinq.com"},"license":"MIT","_id":"@agencecinq/calendar@1.0.0","maintainers":[{"name":"19h47","email":"jeremylevron@19h47.fr"}],"homepage":"https://github.com/agencecinq/shopify#readme","bugs":{"url":"https://github.com/agencecinq/shopify/issues"},"dist":{"shasum":"70b39e0c3bca876bb09c8519da490cf83090521d","tarball":"https://registry.npmjs.org/@agencecinq/calendar/-/calendar-1.0.0.tgz","fileCount":13,"integrity":"sha512-u5o/dAWivlanE6ETYJpj4ZQraIqOd0JetPtvHe28JIk8l36w98qB9PS6fy9QZswQVAinne6Odwcj8cL68ypHWQ==","signatures":[{"sig":"MEUCIQC3DojX95yIz5MeArCFNNIBzgvCm+vFYvIiYQUrUEfL7wIgXlTEhOaXwr6qixa49dXecGXUGQcKcfjtkM+QIozuKl8=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":27979},"main":"./dist/index.js","type":"module","_from":"file:agencecinq-calendar-1.0.0.tgz","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"scripts":{"dev":"vite build --watch","build":"vite build"},"_npmUser":{"name":"19h47","email":"jeremylevron@19h47.fr"},"_resolved":"/private/var/folders/vt/kpbgrh4d7k14zvxmcm01bfxh0000gn/T/304229fa186f17ed367dcfe758821107/agencecinq-calendar-1.0.0.tgz","_integrity":"sha512-u5o/dAWivlanE6ETYJpj4ZQraIqOd0JetPtvHe28JIk8l36w98qB9PS6fy9QZswQVAinne6Odwcj8cL68ypHWQ==","repository":{"url":"git+https://github.com/agencecinq/shopify.git","type":"git","directory":"packages/calendar"},"_npmVersion":"11.18.0","description":"Accessible date / range picker as a lightweight Web Component.","directories":{},"_nodeVersion":"22.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.1.4","vite-plugin-dts":"^5.0.3","@agencecinq/utils":"5.2.1"},"peerDependencies":{"@agencecinq/utils":"*"},"_npmOperationalInternal":{"tmp":"tmp/calendar_1.0.0_1784898645302_0.6293023017178403","host":"s3://npm-registry-packages-npm-production"}},"2.0.0":{"name":"@agencecinq/calendar","version":"2.0.0","author":{"url":"https://agencecinq.com","name":"Jérémy Levron","email":"jeremy@agencecinq.com"},"license":"MIT","_id":"@agencecinq/calendar@2.0.0","maintainers":[{"name":"19h47","email":"jeremylevron@19h47.fr"}],"homepage":"https://github.com/agencecinq/shopify#readme","bugs":{"url":"https://github.com/agencecinq/shopify/issues"},"dist":{"shasum":"57b51bc4ad58e58d0f8a4f7107116840bab08416","tarball":"https://registry.npmjs.org/@agencecinq/calendar/-/calendar-2.0.0.tgz","fileCount":13,"integrity":"sha512-9padCGFJXYd32NTRDwYhwbLLmewkzK7FEKhKRMtZmH/ElvFGGNm9QsXLsGiinabkFnujjYyYapOrmkK2ZarntA==","signatures":[{"sig":"MEYCIQCB2UnQ0nr0a8SeFMQVbyygAc/NQBMsS5Iib5AkOXYKUgIhAIS4oZmKLcIUZHVyJyDYO94UDeXUtGjH4n5KVXWxB8TJ","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":29500},"main":"./dist/index.js","type":"module","_from":"file:agencecinq-calendar-2.0.0.tgz","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"scripts":{"dev":"vite build --watch","build":"vite build"},"_npmUser":{"name":"19h47","email":"jeremylevron@19h47.fr"},"_resolved":"/private/var/folders/vt/kpbgrh4d7k14zvxmcm01bfxh0000gn/T/7e88dcf1e1187490e347539b3bf1e64b/agencecinq-calendar-2.0.0.tgz","_integrity":"sha512-9padCGFJXYd32NTRDwYhwbLLmewkzK7FEKhKRMtZmH/ElvFGGNm9QsXLsGiinabkFnujjYyYapOrmkK2ZarntA==","repository":{"url":"git+https://github.com/agencecinq/shopify.git","type":"git","directory":"packages/calendar"},"_npmVersion":"11.18.0","description":"Accessible date / range / multi-date picker as a lightweight Web Component.","directories":{},"_nodeVersion":"22.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.1.4","vite-plugin-dts":"^5.0.3","@agencecinq/utils":"5.2.1"},"peerDependencies":{"@agencecinq/utils":"*"},"_npmOperationalInternal":{"tmp":"tmp/calendar_2.0.0_1785827554496_0.8136318120255119","host":"s3://npm-registry-packages-npm-production"}},"2.0.1":{"name":"@agencecinq/calendar","version":"2.0.1","author":{"url":"https://agencecinq.com","name":"Jérémy Levron","email":"jeremy@agencecinq.com"},"license":"MIT","_id":"@agencecinq/calendar@2.0.1","maintainers":[{"name":"19h47","email":"jeremylevron@19h47.fr"}],"homepage":"https://github.com/agencecinq/shopify#readme","bugs":{"url":"https://github.com/agencecinq/shopify/issues"},"dist":{"shasum":"45bee2d27fb9a21d232e335e4e544070c7e4c87e","tarball":"https://registry.npmjs.org/@agencecinq/calendar/-/calendar-2.0.1.tgz","fileCount":13,"integrity":"sha512-sXLRKjxkEJM9msinuaw/YiR9FSuOt/5/XBq6dBb74Vqbvlk+bdPG26O9M9nvboR3inzYxs0AH7PCydJkEpHgVw==","signatures":[{"sig":"MEQCICY7G92Yzyq06iUIbzMqAqSRLyIW/eNqEediys/0Cuc0AiAdieO8pli3WMBQ96HM6/wK63Dx7xHTvaisb/OVjZs3mA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":29092},"main":"./dist/index.js","type":"module","_from":"file:agencecinq-calendar-2.0.1.tgz","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"scripts":{"dev":"vite build --watch","build":"vite build"},"_npmUser":{"name":"19h47","email":"jeremylevron@19h47.fr"},"_resolved":"/private/var/folders/vt/kpbgrh4d7k14zvxmcm01bfxh0000gn/T/39f2ec3e17543d0a2a74707313e46e76/agencecinq-calendar-2.0.1.tgz","_integrity":"sha512-sXLRKjxkEJM9msinuaw/YiR9FSuOt/5/XBq6dBb74Vqbvlk+bdPG26O9M9nvboR3inzYxs0AH7PCydJkEpHgVw==","repository":{"url":"git+https://github.com/agencecinq/shopify.git","type":"git","directory":"packages/calendar"},"_npmVersion":"11.18.0","description":"Accessible date / range / multi-date picker as a lightweight Web Component.","directories":{},"_nodeVersion":"22.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.2.0","vite-plugin-dts":"^5.0.3","@agencecinq/utils":"6.1.0"},"peerDependencies":{"@agencecinq/utils":"*"},"_npmOperationalInternal":{"tmp":"tmp/calendar_2.0.1_1786089025333_0.1948250559183744","host":"s3://npm-registry-packages-npm-production"}},"3.0.0":{"name":"@agencecinq/calendar","version":"3.0.0","author":{"url":"https://agencecinq.com","name":"Jérémy Levron","email":"jeremy@agencecinq.com"},"license":"MIT","_id":"@agencecinq/calendar@3.0.0","maintainers":[{"name":"19h47","email":"jeremylevron@19h47.fr"}],"homepage":"https://github.com/agencecinq/shopify#readme","bugs":{"url":"https://github.com/agencecinq/shopify/issues"},"dist":{"shasum":"af92c5d920e669f7c94c0a6caae00225e58ed10d","tarball":"https://registry.npmjs.org/@agencecinq/calendar/-/calendar-3.0.0.tgz","fileCount":13,"integrity":"sha512-fFAilo3ftBo34FyfVjDXDxM99aCYNT1D07junpzJ0McV3vufeRabP5n8LBktcoceLJH/8vjjSHcHG1WhNmA5VQ==","signatures":[{"sig":"MEYCIQCBHDe+0zpHYXD2QbjZyymaNabjtpysquHo4ec+N76plgIhALscApivxeOmJuviVosfY7IS/CQ4L/dHZHkMt6AfRq/Y","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":29344},"main":"./dist/index.js","type":"module","_from":"file:agencecinq-calendar-3.0.0.tgz","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"scripts":{"dev":"vite build --watch","build":"vite build"},"_npmUser":{"name":"19h47","email":"jeremylevron@19h47.fr"},"_resolved":"/private/var/folders/vt/kpbgrh4d7k14zvxmcm01bfxh0000gn/T/f77fc68889229c46c77f4066e853566c/agencecinq-calendar-3.0.0.tgz","_integrity":"sha512-fFAilo3ftBo34FyfVjDXDxM99aCYNT1D07junpzJ0McV3vufeRabP5n8LBktcoceLJH/8vjjSHcHG1WhNmA5VQ==","repository":{"url":"git+https://github.com/agencecinq/shopify.git","type":"git","directory":"packages/calendar"},"_npmVersion":"11.18.0","description":"Accessible date / range / multi-date picker as a lightweight Web Component.","directories":{},"_nodeVersion":"22.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.2.0","vite-plugin-dts":"^5.0.3","@agencecinq/utils":"6.1.0"},"peerDependencies":{"@agencecinq/utils":"*"},"_npmOperationalInternal":{"tmp":"tmp/calendar_3.0.0_1786249227264_0.13686361155562388","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2026-07-24T13:10:45.087Z","modified":"2026-09-15T13:10:33.089Z","1.0.0":"2026-07-24T13:10:45.500Z","2.0.0":"2026-08-04T07:12:34.629Z","2.0.1":"2026-08-07T07:50:25.479Z","3.0.0":"2026-08-09T04:20:27.412Z"},"bugs":{"url":"https://github.com/agencecinq/shopify/issues"},"author":{"url":"https://agencecinq.com","name":"Jérémy Levron","email":"jeremy@agencecinq.com"},"license":"MIT","homepage":"https://github.com/agencecinq/shopify#readme","repository":{"url":"git+https://github.com/agencecinq/shopify.git","type":"git","directory":"packages/calendar"},"description":"Accessible date / range / multi-date picker as a lightweight Web Component.","maintainers":[{"email":"jeremylevron@19h47.fr","name":"19h47"},{"email":"pauline@agencecinq.com","name":"paulinecinq"}],"readme":"# @agencecinq/calendar\n\n[![](https://img.shields.io/npm/v/@agencecinq/calendar)](https://www.npmjs.com/package/@agencecinq/calendar)\n\n> Accessible date / range picker as a lightweight Web Component (`<cinq-calendar>`).\n\nMarkup and CSS are yours — the package fills the grid and handles selection.\nAligned with the\n[WAI-ARIA Authoring Practices date picker grid](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/).\n\nInspired by [`@19h47/calendar`](https://github.com/19h47/19h47-calendar).\n\n## Installation\n\n```bash\npnpm add @agencecinq/calendar\n```\n\n## Markup\n\nRequired hooks:\n\n| Selector | Role |\n| -------- | ---- |\n| `<cinq-calendar>` | Host element |\n| `.js-previous` / `.js-next` | Month navigation (optional) |\n| `.js-title` | Month / year label; click advances to the next month (same as `.js-next`) |\n| `.js-days` | Weekday headers row |\n| `.js-body` | Day cells |\n| `.js-day` | Day button (generated) |\n\n```html\n<cinq-calendar locale=\"fr\" deselect>\n  <header>\n    <button type=\"button\" class=\"js-previous\" aria-label=\"Previous month\">Previous</button>\n    <button type=\"button\" class=\"js-title\" id=\"calendar-label\" aria-live=\"polite\"></button>\n    <button type=\"button\" class=\"js-next\" aria-label=\"Next month\">Next</button>\n  </header>\n  <table role=\"grid\" aria-labelledby=\"calendar-label\">\n    <thead>\n      <tr class=\"js-days\"></tr>\n    </thead>\n    <tbody class=\"js-body\"></tbody>\n  </table>\n</cinq-calendar>\n```\n\n## Usage\n\n```js\nimport \"@agencecinq/calendar\";\nimport { EVENTS } from \"@agencecinq/utils\";\n\nconst el = document.querySelector(\"cinq-calendar\");\n\nel.addEventListener(EVENTS.CALENDAR_CHANGE, ({ detail }) => {\n  // detail.values → string[] (`YYYY-MM-DD`)\n  console.log(detail.values);\n});\n```\n\nImporting the package registers the custom element. The calendar mounts on\n`connectedCallback` — no manual `init()` is required.\n\n> **HTML is the source of truth.** Provide `role=\"grid\"`, `aria-labelledby`,\n> `aria-live` on the title, and `aria-label` on nav buttons yourself.\n\n### Single date\n\n```html\n<cinq-calendar mode=\"single\" deselect>…</cinq-calendar>\n```\n\n### Date range\n\n```html\n<cinq-calendar mode=\"range\">…</cinq-calendar>\n```\n\n### Multiple dates\n\nToggle discrete days (no range painting). Click again to remove.\n\n```html\n<cinq-calendar mode=\"multiple\" allow-past>…</cinq-calendar>\n```\n\nThere is no built-in max. Cap the selection in your app (e.g. after\n`calendar:change`). Pass `emit: false` to `setPicked` so the trim does not\nfire a second `calendar:change`:\n\n```js\nconst MAX = 3;\n\nel.addEventListener(EVENTS.CALENDAR_CHANGE, () => {\n  if (el.picked.length <= MAX) return;\n\n  el.setPicked(el.picked.slice(0, MAX), false);\n  el.render();\n});\n```\n\n### Locale & week start\n\n`locale` drives labels via `Intl`. Week start defaults from the locale\n(`weekInfo`); pass `first-day` to override.\n\n```html\n<cinq-calendar locale=\"fr\">…</cinq-calendar>\n<!-- fr → week starts Monday -->\n\n<cinq-calendar locale=\"en\" first-day=\"1\">…</cinq-calendar>\n<!-- force Monday despite en -->\n```\n\nUpdate at runtime:\n\n```js\nimport { getWeekStart } from \"@agencecinq/calendar\";\n\nel.options.locale = \"ja\";\nel.options.firstDay = getWeekStart(\"ja\");\nel.render();\n```\n\n### Custom labels\n\n```js\nel.options.days = [\"Dim\", \"Lun\", \"Mar\", \"Mer\", \"Jeu\", \"Ven\", \"Sam\"];\nel.options.months = [\n  \"Janvier\", \"Février\", \"Mars\", \"Avril\", \"Mai\", \"Juin\",\n  \"Juillet\", \"Août\", \"Septembre\", \"Octobre\", \"Novembre\", \"Décembre\",\n];\nel.render();\n```\n\n### Cell hook\n\nOverride `renderInner` to enrich or rebuild each day cell. Keep `.js-day` and\n`data-day`.\n\n```js\nel.renderInner = (inner, date) => {\n  const button = inner.querySelector(\".js-day\");\n  if (!button) return;\n\n  button.classList.add(\"MyDay\");\n  button.innerHTML = `<time datetime=\"${date.toISOString().slice(0, 10)}\">${date.getDate()}</time>`;\n};\n```\n\n## Attributes\n\n| Attribute | Description |\n| --------- | ----------- |\n| `locale` / `data-locale` | BCP 47 locale for title and weekday/month labels |\n| `mode` | Selection mode: `single` (default), `range`, or `multiple` |\n| `deselect` | Allow clearing the selection in `mode=\"single\"` |\n| `allow-past` | Allow selecting past dates |\n| `first-day` | Week start (`0`=Sun … `6`=Sat); defaults from locale |\n| `button-class` | Extra classes on day buttons |\n| `name` | Forwarded in `calendar:change` detail |\n| `data-month` | Initial month (`0`–`11`) |\n| `data-year` | Initial year |\n| `data-picked` | JSON array of `YYYY-MM-DD` days to preselect |\n\n## Keyboard (focus in the grid)\n\n| Key | Action |\n| --- | ------ |\n| Arrow keys | Move by day / week (crosses months) |\n| Home / End | First / last day of the week |\n| Page Up / Page Down | Previous / next month |\n| Shift + Page Up / Down | Previous / next year |\n| Enter / Space | Select the focused day |\n\n## Events\n\nDispatched on the host `<cinq-calendar>` (bubble). Constants live on\n`@agencecinq/utils` `EVENTS`:\n\n| Event | Constant | Detail |\n| ----- | -------- | ------ |\n| `calendar:change` | `CALENDAR_CHANGE` | `{ values: string[], name?: string }` |\n\n## API\n\n| Method / property | Description |\n| ----------------- | ----------- |\n| `options` | Runtime options object |\n| `picked` | Selected days as `YYYY-MM-DD` |\n| `current` | Viewed `{ month, year, day }` |\n| `render()` | Rebuild the grid |\n| `move(delta)` | Navigate by months (`-1` = previous, `1` = next) |\n| `destroy()` | Detach listeners and clear the grid |\n| `renderInner(inner, date)` | Per-cell hook (override) |\n\nExported helpers: `getWeekStart`, `toDayString`, `fromDayString`.\n\n## Build setup\n\n```bash\npnpm -C packages/calendar build\n```\n\n## Acknowledgments\n\n- [`@19h47/calendar`](https://github.com/19h47/19h47-calendar) — original implementation\n- [WAI-ARIA APG — Date Picker Dialog](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/)\n- Litepicker\n","readmeFilename":"README.md"}