{"id":26382770,"url":"https://github.com/dirheimerb/headless-calendar","last_synced_at":"2025-06-25T06:40:29.240Z","repository":{"id":282024824,"uuid":"870913583","full_name":"dirheimerb/headless-calendar","owner":"dirheimerb","description":null,"archived":false,"fork":false,"pushed_at":"2025-03-12T11:06:16.000Z","size":7397,"stargazers_count":0,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-12T12:20:31.958Z","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":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dirheimerb.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2024-10-10T22:40:12.000Z","updated_at":"2025-03-12T11:06:20.000Z","dependencies_parsed_at":"2025-03-12T12:32:20.243Z","dependency_job_id":null,"html_url":"https://github.com/dirheimerb/headless-calendar","commit_stats":null,"previous_names":["dirheimerb/headless-calendar"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/dirheimerb/headless-calendar","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dirheimerb%2Fheadless-calendar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dirheimerb%2Fheadless-calendar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dirheimerb%2Fheadless-calendar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dirheimerb%2Fheadless-calendar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dirheimerb","download_url":"https://codeload.github.com/dirheimerb/headless-calendar/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dirheimerb%2Fheadless-calendar/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261821604,"owners_count":23214943,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":"2025-03-17T06:18:55.033Z","updated_at":"2025-06-25T06:40:29.214Z","avatar_url":"https://github.com/dirheimerb.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg\n  src=\"./assets/logo.svg\"\n  alt=\"Headless calendar for react\"\n  width=\"100\"\n/\u003e\n\n# Headless calendar for react\n\nA zero dependency library for react, with unstyled and controlled components to build your own agenda. Simple to use while allowing fully customization (markup is all yours!)\n\n🔧 Flexible\n\n✅ Controlled\n\n🚀 Performant\n\n🤯 Unstyled\n\n↔️ Support for dragging and resizing events\n\n\u003cbr\u003e\n\n## [📖 All examples and documentation here!](https://react-headless-calendar.vercel.app/)\n\n\u003cbr\u003e\n\n## 🚧🚧 This repo is under heavy development 🚧🚧\n\n\u003cbr\u003e\n\nUse your markup and custom logic to achieve virtually anything!\n\n![full-example](./assets/full-example.gif)\n\nA bit of [framer-motion](https://www.framer.com/motion/) was used to make the navigation look smooth - [See code](https://github.com/lucassaid/react-headless-agenda/blob/main/stories/full-examples/LimitIsTheSky.stories.tsx)\n\n\u003cbr\u003e\n\nYou can easily adapt it for mobile!\n\u003cbr\u003e\n\n![vertical_example](./assets/vertical_example.gif)\n\n\u003cbr\u003e\n\n# Installation\n\n```bash\nnpm i react-headless-calendar\n```\n\n```bash\nyarn add react-headless-calendar\n```\n\n```bash\npnpm add react-headless-calendar\n```\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n# Usage\n\nAll examples use [date-fns](https://www.npmjs.com/package/date-fns) but you can use the library of your choice to manipulate dates.\n\n## `\u003cAgenda\u003e`\n\nOur parent component. Just provide a start day, and some events.\n\n```tsx\nimport { startOfWeek, addHours }  from 'date-fns'\n\n// only `start` and `end` are required!\nconst events = [\n  {\n    id: 'event1',\n    someTitle: 'Hey there!',\n    start: new Date(),\n    end: addHours(new Date(), 5),\n  }\n]\n\n\u003cAgenda\n  startDate={startOfWeek(new Date())}\n  events={events}\n/\u003e\n```\n\nThis is a controlled component. The agenda will NOT have an \"inner\" state in sync with `events` or `startDate`. Instead, it will fire an event for you to update your state when needed.\n\n\u003cbr\u003e\n\n## `\u003cDays\u003e`\n\nIt lets you render whatever you need to, for each day. For example, let's render its name and number:\n\n![days header](./assets/days_header.png)\n\n```tsx\nimport { format } from 'date-fns';\n\n\u003cdiv className=\"flex\"\u003e\n\t\u003cDays\u003e\n\t\t{({ date }) =\u003e (\n\t\t\t\u003cdiv key={date.toString()} className=\"flex-1\"\u003e\n\t\t\t\t{format(date, 'ccc d')}\n\t\t\t\u003c/div\u003e\n\t\t)}\n\t\u003c/Days\u003e\n\u003c/div\u003e;\n```\n\n\u003cbr\u003e\n\nNow the fun part, render your events!\n\n![day](./assets/day.png)\n\n```tsx\n// `events` is an array containing only the events for the current day\n\u003cDays\u003e\n\t{({ date, containerRef, events }) =\u003e (\n\t\t\u003cdiv key={date.toString()} ref={containerRef} className=\"relative h-full\"\u003e\n\t\t\t{events.map(({ event, top, bottom }) =\u003e (\n\t\t\t\t\u003cdiv className=\"absolute w-full rounded-lg p-4\" style={{ top, bottom }}\u003e\n\t\t\t\t\t{event.someTitle}\n\t\t\t\t\u003c/div\u003e\n\t\t\t))}\n\t\t\u003c/div\u003e\n\t)}\n\u003c/Days\u003e\n```\n\n\u003cbr\u003e\n\u003cbr\u003e\n\nThat's it! You also have `\u003cTime\u003e`, `\u003cNeedle\u003e`, and `\u003cCrosshair\u003e`, but you'll learn them as you go.\n\n---\n\nPR's are welcome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdirheimerb%2Fheadless-calendar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdirheimerb%2Fheadless-calendar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdirheimerb%2Fheadless-calendar/lists"}