{"_id":"@atiqisrak/shadcn-weekly-calendar","name":"@atiqisrak/shadcn-weekly-calendar","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.2":{"name":"@atiqisrak/shadcn-weekly-calendar","version":"1.0.2","description":"A beautiful weekly calendar component for shadcn/ui with zoom functionality and event management","main":"public/weekly-calendar.json","scripts":{"build:registry":"npx ts-node scripts/build.ts","build":"npm run build:registry","prepublishOnly":"npm run build","start":"npm run build:registry"},"keywords":["shadcn","shadcn-ui","calendar","weekly-calendar","react","typescript","component","ui"],"author":{"name":"Atiq Israk"},"license":"MIT","peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0","lucide-react":"^0.263.1","class-variance-authority":"^0.7.0","clsx":"^2.0.0","tailwind-merge":"^1.14.0"},"devDependencies":{"@types/react":"^18.0.0","@types/react-dom":"^18.0.0","@types/node":"^20.0.0","typescript":"^5.0.0","ts-node":"^10.9.0"},"repository":{"type":"git","url":"git+https://github.com/atiqisrak/shadcn-weekly-calendar.git"},"bugs":{"url":"https://github.com/atiqisrak/shadcn-weekly-calendar/issues"},"homepage":"https://github.com/atiqisrak/shadcn-weekly-calendar#readme","publishConfig":{"access":"public"},"_id":"@atiqisrak/shadcn-weekly-calendar@1.0.2","gitHead":"053bf895ab91f03c8f5bf4dc08ac1f8ebdb17d4e","_nodeVersion":"20.11.0","_npmVersion":"10.2.4","dist":{"integrity":"sha512-jlR56vno5Xdiam8jGSs6fY5WbPXzGepKDsZSR6noErWy06PszpZZ59QgGFDk+edlI8jqhHGJ+bINc05iPdqUPA==","shasum":"2738eb41154ca235bb82ff34b5e57a1cce960455","tarball":"https://registry.npmjs.org/@atiqisrak/shadcn-weekly-calendar/-/shadcn-weekly-calendar-1.0.2.tgz","fileCount":6,"unpackedSize":52892,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIC5DOCGIj/CSwvi6JNcBq/iNu2u2sF2wKG1XpU/MOymUAiEAivinW1em9jNvaXuGM3Pi6RoTBMXuG/c8IXEn2IobYCg="}]},"_npmUser":{"name":"atiqisrak","email":"atiqisrak@gmail.com"},"directories":{},"maintainers":[{"name":"atiqisrak","email":"atiqisrak@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/shadcn-weekly-calendar_1.0.2_1755168982193_0.8751500037317559"},"_hasShrinkwrap":false}},"time":{"created":"2025-08-14T10:56:22.108Z","1.0.2":"2025-08-14T10:56:22.373Z","modified":"2025-08-14T10:56:22.995Z"},"maintainers":[{"name":"atiqisrak","email":"atiqisrak@gmail.com"}],"description":"A beautiful weekly calendar component for shadcn/ui with zoom functionality and event management","homepage":"https://github.com/atiqisrak/shadcn-weekly-calendar#readme","keywords":["shadcn","shadcn-ui","calendar","weekly-calendar","react","typescript","component","ui"],"repository":{"type":"git","url":"git+https://github.com/atiqisrak/shadcn-weekly-calendar.git"},"author":{"name":"Atiq Israk"},"bugs":{"url":"https://github.com/atiqisrak/shadcn-weekly-calendar/issues"},"license":"MIT","readme":"# Weekly Calendar Component for shadcn/ui\n\nA beautiful, responsive weekly calendar component with zoom functionality, event management, and hover cards for detailed event information.\n\n## Features\n\n- 📅 **Weekly and Daily Views**: Switch between weekly overview and detailed daily view\n- 🔍 **Zoom Functionality**: Click on any day to zoom into a detailed daily view\n- 📱 **Mobile Responsive**: Optimized for all screen sizes\n- 🎯 **Event Hover Cards**: Detailed event information on hover\n- 👥 **Participant Avatars**: Display event participants with avatars\n- 🏷️ **Tags Support**: Organize events with custom tags\n- ⏰ **12-hour Time Format**: User-friendly time display\n- 🎨 **Beautiful Design**: Modern UI with smooth transitions\n\n## Installation\n\n### Option 1: Using NPM Registry (Recommended)\n\nFirst, ensure you have a shadcn/ui project set up. Then install the component:\n\n```bash\nnpx shadcn add https://raw.githubusercontent.com/atiqisrak/shadcn-weekly-calendar/main/public/weekly-calendar.json\n```\n\nOr if the package is published to NPM:\n\n```bash\nnpx shadcn add https://unpkg.com/@atiqisrak/shadcn-weekly-calendar@latest/public/weekly-calendar.json\n```\n\n### Option 2: Manual Installation\n\nIf you want to install manually:\n\n1. Install required dependencies:\n\n   ```bash\n   npm install lucide-react\n   npx shadcn add avatar button hover-card scroll-area\n   ```\n\n2. Copy the component file to your project:\n   ```bash\n   # Create the component file\n   mkdir -p components/ui\n   # Copy weekly-calendar.tsx to components/ui/weekly-calendar.tsx\n   ```\n\n### Option 3: Direct GitHub Installation\n\n```bash\nnpx shadcn add https://raw.githubusercontent.com/atiqisrak/shadcn-weekly-calendar/main/public/weekly-calendar.json\n```\n\nThis will automatically install the component and its dependencies:\n\n- `@/components/ui/avatar`\n- `@/components/ui/button`\n- `@/components/ui/hover-card`\n- `@/components/ui/scroll-area`\n- `lucide-react` icons\n\n## Usage\n\n```tsx\nimport {\n  WeeklyCalendar,\n  type WeeklyEvent,\n} from \"@/components/ui/weekly-calendar\";\n\nconst events: WeeklyEvent[] = [\n  {\n    id: \"1\",\n    title: \"Weekly Team Meeting\",\n    description: \"Discuss project progress and upcoming milestones\",\n    start: \"2024-01-15T10:00:00\",\n    end: \"2024-01-15T11:00:00\",\n    status: \"confirmed\",\n    participants: [\n      { id: \"1\", name: \"John Doe\", image: \"/avatars/john.jpg\" },\n      { id: \"2\", name: \"Jane Smith\", image: \"/avatars/jane.jpg\" },\n    ],\n    tags: [\"meeting\", \"team\", \"weekly\"],\n  },\n];\n\nexport default function Calendar() {\n  return <WeeklyCalendar events={events} height=\"600px\" />;\n}\n```\n\n## Props\n\n### WeeklyCalendar\n\n| Prop     | Type            | Description                      |\n| -------- | --------------- | -------------------------------- |\n| `events` | `WeeklyEvent[]` | Array of events to display       |\n| `height` | `string`        | Height of the calendar container |\n\n### WeeklyEvent\n\n| Property       | Type            | Required | Description             |\n| -------------- | --------------- | -------- | ----------------------- |\n| `id`           | `string`        | ✅       | Unique identifier       |\n| `title`        | `string`        | ✅       | Event title             |\n| `start`        | `string`        | ✅       | Start time (ISO string) |\n| `end`          | `string`        | ✅       | End time (ISO string)   |\n| `description`  | `string`        | ❌       | Event description       |\n| `participants` | `Participant[]` | ❌       | Event participants      |\n| `status`       | `string`        | ❌       | Event status            |\n| `tags`         | `string[]`      | ❌       | Event tags              |\n\n### Participant\n\n| Property | Type     | Required | Description       |\n| -------- | -------- | -------- | ----------------- |\n| `id`     | `string` | ✅       | Unique identifier |\n| `name`   | `string` | ✅       | Participant name  |\n| `image`  | `string` | ❌       | Avatar image URL  |\n\n## Features\n\n### Navigation\n\n- **Month Navigation**: Navigate between months\n- **Week Navigation**: Navigate between weeks\n- **Day Navigation**: When zoomed in, navigate between days\n\n### Zoom Functionality\n\n- Click on any day header to zoom into detailed daily view\n- Click the zoom out button to return to weekly view\n- Automatic scrolling to 8 AM on zoom\n\n### Event Display\n\n- Events spanning multiple days are properly displayed\n- Hover cards show detailed event information\n- Participant avatars with fallback initials\n- Color-coded events based on type\n\n## Styling\n\nThe component uses Tailwind CSS and follows shadcn/ui design patterns. It includes:\n\n- Light/dark mode support\n- Responsive design\n- Smooth transitions and hover effects\n- Modern card-based layout\n\n## License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-46ec952464ecf7dbc013c675cbe5abeb"}