{"_id":"@constmelvin/calendar-planner","_rev":"4-36f5aebdf0bc5ee5ef1b76d43d42e4fe","name":"@constmelvin/calendar-planner","dist-tags":{"latest":"1.0.4"},"versions":{"1.0.0":{"name":"@constmelvin/calendar-planner","version":"1.0.0","keywords":["react","calendar","planner","cli"],"author":{"name":"Melvin"},"license":"MIT","_id":"@constmelvin/calendar-planner@1.0.0","maintainers":[{"name":"constmelvin","email":"domingojm872@gmail.com"}],"bin":{"calendar-planner":"dist/cli.js"},"dist":{"shasum":"b405dfb9e9b9d6f8748b2a6298f11c6f353bf10f","tarball":"https://registry.npmjs.org/@constmelvin/calendar-planner/-/calendar-planner-1.0.0.tgz","fileCount":7,"integrity":"sha512-uwG67sd+rbwe0N6evn4qhohCsnQQx7qzBd43Fc/le1mSVFLgwdiUK/NVZMacdHJpFQ8OzHFrVf9BcHoyhpJxzQ==","signatures":[{"sig":"MEQCICJ4ncVQ5NGQWACfTjaj1LgCNtChumpNRn2WmKbcwC+0AiARJiw2ARoybscoxiAppaCwJIdOwGa6vdfuhti5CqGIDw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":35987},"scripts":{"dev":"tsup --watch","build":"tsup"},"_npmUser":{"name":"constmelvin","email":"domingojm872@gmail.com"},"_npmVersion":"11.11.1","description":"CLI to install the Calendar Planner React component directly to your src/components directory.","directories":{},"_nodeVersion":"22.12.0","_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.2.3","typescript":"^5.5.3","@types/node":"^20.0.0"},"_npmOperationalInternal":{"tmp":"tmp/calendar-planner_1.0.0_1784375128063_0.9858729773670847","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@constmelvin/calendar-planner","version":"1.0.1","keywords":["react","calendar","planner","cli"],"author":{"name":"Melvin"},"license":"MIT","_id":"@constmelvin/calendar-planner@1.0.1","maintainers":[{"name":"constmelvin","email":"domingojm872@gmail.com"}],"bin":{"calendar-planner":"dist/cli.js"},"dist":{"shasum":"1774f7a3879dc1649ab05ac7a10a74ee3286745a","tarball":"https://registry.npmjs.org/@constmelvin/calendar-planner/-/calendar-planner-1.0.1.tgz","fileCount":26,"integrity":"sha512-VBlrDOl5X4eWc6724w92l8eVJU+iyuKxIvLpP8DwSOYfkfZqtgc77eQ5E4jS3kieHZfU0RI/k+I009xjrK1PsQ==","signatures":[{"sig":"MEQCID7xz4ysqQzsiA1/hdOpW0y6j8wceCI/iBpueN8p86LDAiBExmAxo4LkIcjWE65H1TMIl61OlsV2Hp99Jc+b9WTCfA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":174968},"gitHead":"23598d8a2eade810996c2fb8ebde63f69e9a5efd","scripts":{"dev":"tsup --watch","build":"tsup"},"_npmUser":{"name":"constmelvin","email":"domingojm872@gmail.com"},"_npmVersion":"11.11.1","description":"CLI to install the Calendar Planner React component directly to your src/components directory.","directories":{},"_nodeVersion":"22.12.0","_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.2.3","typescript":"^5.5.3","@types/node":"^20.0.0"},"_npmOperationalInternal":{"tmp":"tmp/calendar-planner_1.0.1_1784386125552_0.6487494676463146","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@constmelvin/calendar-planner","version":"1.0.2","keywords":["react","calendar","planner","cli"],"author":{"name":"Melvin"},"license":"MIT","_id":"@constmelvin/calendar-planner@1.0.2","maintainers":[{"name":"constmelvin","email":"domingojm872@gmail.com"}],"bin":{"calendar-planner":"dist/cli.js"},"dist":{"shasum":"d563badbc2c966e7d152ab0ee4ebbab5895234f8","tarball":"https://registry.npmjs.org/@constmelvin/calendar-planner/-/calendar-planner-1.0.2.tgz","fileCount":26,"integrity":"sha512-nQvuoEp0zIjNYVYvofUn1s/nJ+IlN7+AZsghf8A5WUTiVF0BlXjM5ruFVza3OkV073tF/HG7ar/Y4t5lpW0cvA==","signatures":[{"sig":"MEQCIC6yIKM1ag98/OZcwbqKVfmpbUlGDNEgndUzgzCFN91YAiB5Qg7Znu9oYTdqqWyKkUIRhY6wx6LHnkmAL6QG7hNrPA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":175174},"gitHead":"23598d8a2eade810996c2fb8ebde63f69e9a5efd","scripts":{"dev":"tsup --watch","build":"tsup"},"_npmUser":{"name":"constmelvin","email":"domingojm872@gmail.com"},"_npmVersion":"11.11.1","description":"CLI to install the Calendar Planner React component directly to your src/components directory.","directories":{},"_nodeVersion":"22.12.0","_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.2.3","typescript":"^5.5.3","@types/node":"^20.0.0"},"_npmOperationalInternal":{"tmp":"tmp/calendar-planner_1.0.2_1784386699991_0.9106159772527014","host":"s3://npm-registry-packages-npm-production"}},"1.0.4":{"name":"@constmelvin/calendar-planner","version":"1.0.4","description":"CLI to install the Calendar Planner React component directly to your src/components directory.","bin":{"calendar-planner":"dist/cli.js"},"scripts":{"build":"tsup","dev":"tsup --watch"},"keywords":["react","calendar","planner","cli"],"author":{"name":"Melvin"},"license":"MIT","devDependencies":{"@types/node":"^20.0.0","tsup":"^8.2.3","typescript":"^5.5.3"},"gitHead":"be674b80c0d94259f2a5c1617eb8c727dc887304","_id":"@constmelvin/calendar-planner@1.0.4","_nodeVersion":"22.12.0","_npmVersion":"11.11.1","dist":{"integrity":"sha512-PPC6nHaIF1eV/UIwUJYT1eRClbUFSH3smrkfabf+ze7pqkGLHYcvPca6kN0KiMRYqDOvbNy5BExtmJdXy3Cv0w==","shasum":"6746b47529a260aa25776d698446a1e5e9b50df2","tarball":"https://registry.npmjs.org/@constmelvin/calendar-planner/-/calendar-planner-1.0.4.tgz","fileCount":26,"unpackedSize":175196,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCc6OZd/80/9GzH8Lql9bffibgyz/9xxINI/fOMYONUVQIhAOKahneuBrHW48ymMa1eod0PYODpI+LZpYlqBe95ivcb"}]},"_npmUser":{"name":"constmelvin","email":"domingojm872@gmail.com"},"directories":{},"maintainers":[{"name":"constmelvin","email":"domingojm872@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/calendar-planner_1.0.4_1784387433611_0.6432343296814185"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-18T11:45:27.917Z","modified":"2026-07-18T15:10:33.924Z","1.0.0":"2026-07-18T11:45:28.297Z","1.0.1":"2026-07-18T14:48:45.694Z","1.0.2":"2026-07-18T14:58:20.146Z","1.0.4":"2026-07-18T15:10:33.766Z"},"author":{"name":"Melvin"},"license":"MIT","keywords":["react","calendar","planner","cli"],"description":"CLI to install the Calendar Planner React component directly to your src/components directory.","maintainers":[{"name":"constmelvin","email":"domingojm872@gmail.com"}],"readme":"# Calendar Planner\n\nA beautiful, responsive, and fully customizable calendar planner component for React, designed with Tailwind CSS.\n\nInstead of installing it as a standard NPM dependency, this is a CLI tool that injects the component directly into your project (similar to Shadcn UI). This gives you full ownership of the code so you can modify it however you like!\n\n## Installation\n\nRun this command inside your React project (make sure you have a `src/components` folder):\n\n```bash\nnpx @constmelvin/calendar-planner\n```\n\nThis will automatically copy `calendar-planner.tsx` directly into your `src/components` folder.\n\n## Requirements\n\nThis component requires **Tailwind CSS**.\n\n### 1. Configure Tailwind CSS Variables\n\nThe component uses Shadcn UI-style semantic CSS variables. You must add these variables to your global CSS file (usually `src/index.css` or `src/globals.css`).\n\nIf you are using **Tailwind CSS v4**, add this to your CSS file:\n\n```css\n@import \"tailwindcss\";\n\n@theme {\n  --color-background: var(--background);\n  --color-foreground: var(--foreground);\n  --color-card: var(--card);\n  --color-card-foreground: var(--card-foreground);\n  --color-border: var(--border);\n  --color-primary: var(--primary);\n  --color-primary-foreground: var(--primary-foreground);\n  --color-muted: var(--muted);\n  --color-muted-foreground: var(--muted-foreground);\n}\n\n:root {\n  --background: #ffffff;\n  --foreground: #09090b;\n  --card: #ffffff;\n  --card-foreground: #09090b;\n  --border: #e4e4e7;\n  --primary: #18181b;\n  --primary-foreground: #fafafa;\n  --muted: #f4f4f5;\n  --muted-foreground: #71717a;\n}\n\n@media (prefers-color-scheme: dark) {\n  :root {\n    --background: #09090b;\n    --foreground: #fafafa;\n    --card: #09090b;\n    --card-foreground: #fafafa;\n    --border: #27272a;\n    --primary: #fafafa;\n    --primary-foreground: #18181b;\n    --muted: #27272a;\n    --muted-foreground: #a1a1aa;\n  }\n}\n```\n\n_(If you are using Tailwind v3, add these variables to `:root` and configure them inside your `tailwind.config.js` under `theme.extend.colors`)._\n\n## Usage\n\nOnce installed, you can import and use the `CalendarPlanner` component anywhere in your app:\n\n```tsx\nimport { useState } from \"react\";\nimport CalendarPlanner from \"./components/calendar-planner\";\nimport type { CalendarEvent } from \"./components/calendar-planner\";\n\nfunction App() {\n  const [events, setEvents] = useState<CalendarEvent[]>([\n    {\n      id: 1,\n      title: \"Team Sync\",\n      date: \"2024-10-15\",\n      time: \"10:00\",\n      desc: \"Discuss upcoming milestones\",\n      color: \"indigo\", // Options: \"indigo\", \"emerald\", \"amber\", \"rose\", \"violet\", \"sky\"\n    },\n  ]);\n\n  return (\n    <div className=\"p-10 max-w-5xl mx-auto min-h-screen\">\n      <CalendarPlanner\n        events={events}\n        onEventClick={(ev) => console.log(\"Edit event clicked:\", ev)}\n        onDateClick={(date) => console.log(\"Empty date clicked:\", date)}\n      />\n    </div>\n  );\n}\n\nexport default App;\n```\n\n## Customization\n\nBecause the code lives inside your `src/components` folder, you can open `calendar-planner.tsx` and change anything you want! Add new colors, modify the layouts, or change how events are rendered.\n","readmeFilename":"README.md"}