{"_id":"calendarkit-pro","name":"calendarkit-pro","dist-tags":{"latest":"1.1.0"},"versions":{"1.1.0":{"name":"calendarkit-pro","version":"1.1.0","description":"Professional React calendar with drag-drop, recurring events, timezone support, resource scheduling, and i18n","main":"dist/index.js","module":"dist/index.mjs","types":"dist/index.d.ts","exports":{".":{"import":{"types":"./dist/index.d.mts","default":"./dist/index.mjs"},"require":{"types":"./dist/index.d.ts","default":"./dist/index.js"}}},"sideEffects":false,"scripts":{"dev":"next dev","build":"next build","build:lib":"tsup","start":"next start","lint":"next lint","prepublishOnly":"npm run build:lib"},"keywords":["react","calendar","scheduler","drag-drop","recurring-events","timezone","i18n","resource-scheduling","datepicker","events","typescript","ui-component","calendarkit"],"author":{"name":"CalendarKit Team"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Zesor/calendarkit-pro.git"},"bugs":{"url":"https://github.com/Zesor/calendarkit-pro/issues"},"homepage":"https://calendarkit.io","peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"dependencies":{"@dnd-kit/core":"^6.3.1","@dnd-kit/modifiers":"^9.0.0","@dnd-kit/sortable":"^10.0.0","@dnd-kit/utilities":"^3.2.2","@tanstack/react-virtual":"^3.13.2","class-variance-authority":"^0.7.1","clsx":"^2.1.1","date-fns":"^4.1.0","date-fns-tz":"^3.2.0","framer-motion":"^11.15.0","lucide-react":"^0.469.0","rrule":"^2.8.1","tailwind-merge":"^2.6.0"},"devDependencies":{"@types/node":"^22.10.2","@types/react":"^19.0.0","@types/react-dom":"^19.0.0","autoprefixer":"^10.4.20","next":"^15.0.0","postcss":"^8.4.49","tailwindcss":"^3.4.17","tsup":"^8.3.5","typescript":"^5.7.2"},"gitHead":"e609ef43531119b5a3d91ef48c8d496a468ac464","_id":"calendarkit-pro@1.1.0","_nodeVersion":"24.12.0","_npmVersion":"11.6.2","dist":{"integrity":"sha512-Ylxozj1f9bCssL2+l0rmjdIVGZutFDFwIVF9w6tTY9/5PlJDoIH5UfIj/LJ2HvLHAkdaAldel6+H5DWou9i1lg==","shasum":"9f64a4bf64af5a70e57a1a8add90e8d744d938e7","tarball":"https://registry.npmjs.org/calendarkit-pro/-/calendarkit-pro-1.1.0.tgz","fileCount":9,"unpackedSize":930479,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDWYhUZ/97z7fnoGqNOdjWZghtL0UFWrtNgZmQD7d0j1QIhAPAg39gul/2S9Xzdso8tCZhijE+R+N/1DcIu+pYV9MUv"}]},"_npmUser":{"name":"zesor","email":"illyaschihi.pro@gmail.com"},"directories":{},"maintainers":[{"name":"zesor","email":"illyaschihi.pro@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/calendarkit-pro_1.1.0_1767814660776_0.7039053663472385"},"_hasShrinkwrap":false}},"time":{"created":"2026-01-07T19:37:40.775Z","1.1.0":"2026-01-07T19:37:40.988Z","modified":"2026-01-07T19:37:41.303Z"},"maintainers":[{"name":"zesor","email":"illyaschihi.pro@gmail.com"}],"description":"Professional React calendar with drag-drop, recurring events, timezone support, resource scheduling, and i18n","homepage":"https://calendarkit.io","keywords":["react","calendar","scheduler","drag-drop","recurring-events","timezone","i18n","resource-scheduling","datepicker","events","typescript","ui-component","calendarkit"],"repository":{"type":"git","url":"git+https://github.com/Zesor/calendarkit-pro.git"},"author":{"name":"CalendarKit Team"},"bugs":{"url":"https://github.com/Zesor/calendarkit-pro/issues"},"license":"MIT","readme":"# CalendarKit Pro\n\nA professional, feature-rich React calendar component with drag-and-drop, recurring events, timezone support, resource scheduling, and internationalization.\n\n[![npm version](https://badge.fury.io/js/calendarkit-pro.svg)](https://www.npmjs.com/package/calendarkit-pro)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\n## Features\n\n- **5 Views** - Month, Week, Day, Agenda, and Resource views\n- **Drag & Drop** - Move events with smooth animations and grid snapping\n- **Event Resize** - Drag event edges to adjust duration\n- **Recurring Events** - Daily, weekly, monthly, yearly with RRule support\n- **Timezone Support** - Full IANA timezone handling\n- **i18n Ready** - Built-in English/French, fully customizable\n- **Resource Scheduling** - Schedule across rooms, people, or equipment\n- **Dark Mode** - Built-in theme toggle\n- **ICS Import/Export** - RFC 5545 compliant\n- **Mobile Friendly** - Touch gestures and responsive layout\n- **TypeScript** - Full type definitions included\n- **High Performance** - Handles 10,000+ events\n\n## Installation\n\n```bash\nnpm install calendarkit-pro\n```\n\n## Requirements\n\nCalendarKit Pro requires **TailwindCSS**. Add the package to your Tailwind config:\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  content: [\n    // ... your paths\n    './node_modules/calendarkit-pro/**/*.{js,mjs}',\n  ],\n}\n```\n\n## Quick Start\n\n```tsx\nimport { Scheduler } from 'calendarkit-pro';\nimport type { CalendarEvent, ViewType } from 'calendarkit-pro';\nimport { useState } from 'react';\n\nfunction MyCalendar() {\n  const [events, setEvents] = useState<CalendarEvent[]>([]);\n  const [view, setView] = useState<ViewType>('week');\n  const [date, setDate] = useState(new Date());\n\n  return (\n    <Scheduler\n      events={events}\n      view={view}\n      onViewChange={setView}\n      date={date}\n      onDateChange={setDate}\n      onEventCreate={(event) => {\n        setEvents([...events, { ...event, id: crypto.randomUUID() } as CalendarEvent]);\n      }}\n      onEventUpdate={(event) => {\n        setEvents(events.map(e => e.id === event.id ? event : e));\n      }}\n      onEventDelete={(id) => {\n        setEvents(events.filter(e => e.id !== id));\n      }}\n    />\n  );\n}\n```\n\n## Props\n\n| Prop | Type | Description |\n|------|------|-------------|\n| `events` | `CalendarEvent[]` | Array of events to display |\n| `view` | `ViewType` | Current view: `'month'` \\| `'week'` \\| `'day'` \\| `'agenda'` \\| `'resource'` |\n| `date` | `Date` | Currently focused date |\n| `onViewChange` | `(view: ViewType) => void` | View change callback |\n| `onDateChange` | `(date: Date) => void` | Date change callback |\n| `onEventCreate` | `(event: Partial<CalendarEvent>) => void` | Event creation callback |\n| `onEventUpdate` | `(event: CalendarEvent) => void` | Event update callback |\n| `onEventDelete` | `(eventId: string) => void` | Event deletion callback |\n| `onEventResize` | `(event, start, end) => void` | Event resize callback |\n| `calendars` | `Calendar[]` | Multiple calendar support |\n| `resources` | `Resource[]` | Resources for resource view |\n| `eventTypes` | `EventType[]` | Pre-defined event types |\n| `timezone` | `string` | IANA timezone (e.g., `'America/New_York'`) |\n| `onTimezoneChange` | `(tz: string) => void` | Timezone change callback |\n| `language` | `'en'` \\| `'fr'` | UI language |\n| `translations` | `Partial<CalendarTranslations>` | Custom translations |\n| `locale` | `Locale` | date-fns locale for formatting |\n| `isDarkMode` | `boolean` | Enable dark mode |\n| `onThemeToggle` | `() => void` | Dark mode toggle callback |\n| `theme` | `CalendarTheme` | Custom theme colors |\n| `readOnly` | `boolean` | Disable editing |\n| `isLoading` | `boolean` | Show loading skeletons |\n| `hideViewSwitcher` | `boolean` | Hide view switcher |\n| `renderEventForm` | `(props) => ReactNode` | Custom event form |\n\n## Types\n\n### CalendarEvent\n\n```typescript\ninterface CalendarEvent {\n  id: string;\n  title: string;\n  start: Date;\n  end: Date;\n  description?: string;\n  color?: string;\n  allDay?: boolean;\n  calendarId?: string;\n  resourceId?: string;\n  type?: string;\n  guests?: string[];\n  attachments?: EventAttachment[];\n  reminders?: EventReminder[];\n  recurrence?: {\n    freq: 'DAILY' | 'WEEKLY' | 'MONTHLY' | 'YEARLY';\n    interval?: number;\n    count?: number;\n    until?: Date;\n    byweekday?: number[];\n  };\n}\n```\n\n### Resource\n\n```typescript\ninterface Resource {\n  id: string;\n  label: string;\n  color?: string;\n  avatar?: string;\n}\n```\n\n### CalendarTheme\n\n```typescript\ninterface CalendarTheme {\n  colors?: {\n    primary?: string;\n    secondary?: string;\n    background?: string;\n    foreground?: string;\n    border?: string;\n    muted?: string;\n    accent?: string;\n  };\n  fontFamily?: string;\n  borderRadius?: string;\n}\n```\n\n## Views\n\n### Month View\nFull month grid with event indicators. Click a date to switch to day view.\n\n### Week View\n7-day view with hourly time slots. Drag events to reschedule, resize from bottom edge.\n\n### Day View\nSingle day with 15-minute time slots. Ideal for detailed scheduling.\n\n### Agenda View\nChronological list of upcoming events for 30 days. Shows event details and metadata.\n\n### Resource View\nHorizontal timeline for scheduling across resources (rooms, people, equipment).\n\n## Recurring Events\n\n```tsx\nconst recurringEvent: CalendarEvent = {\n  id: '1',\n  title: 'Weekly Standup',\n  start: new Date(),\n  end: new Date(Date.now() + 3600000),\n  recurrence: {\n    freq: 'WEEKLY',\n    interval: 1,\n    count: 10, // or use 'until' for end date\n  },\n};\n```\n\n## Timezone Support\n\n```tsx\n<Scheduler\n  timezone=\"Europe/Paris\"\n  onTimezoneChange={(tz) => console.log('Timezone:', tz)}\n/>\n```\n\n## Internationalization\n\n```tsx\nimport { fr } from 'date-fns/locale';\n\nconst frenchTranslations = {\n  today: \"Aujourd'hui\",\n  month: 'Mois',\n  week: 'Semaine',\n  day: 'Jour',\n  agenda: 'Agenda',\n  createEvent: 'Créer un événement',\n  // ... more translations\n};\n\n<Scheduler\n  language=\"fr\"\n  locale={fr}\n  translations={frenchTranslations}\n/>\n```\n\n## Theming\n\n```tsx\n<Scheduler\n  isDarkMode={darkMode}\n  onThemeToggle={() => setDarkMode(!darkMode)}\n  theme={{\n    colors: {\n      primary: '#3b82f6',\n      background: '#ffffff',\n      foreground: '#1a1a1a',\n    },\n    fontFamily: 'Inter, sans-serif',\n    borderRadius: '12px',\n  }}\n/>\n```\n\n## Resource Scheduling\n\n```tsx\nconst resources: Resource[] = [\n  { id: 'room-a', label: 'Conference Room A', color: '#3b82f6' },\n  { id: 'room-b', label: 'Conference Room B', color: '#10b981' },\n];\n\n<Scheduler\n  view=\"resource\"\n  resources={resources}\n  events={events}\n/>\n```\n\n## Multiple Calendars\n\n```tsx\nconst calendars = [\n  { id: 'work', label: 'Work', color: '#3b82f6', active: true },\n  { id: 'personal', label: 'Personal', color: '#10b981', active: true },\n];\n\n<Scheduler\n  calendars={calendars}\n  onCalendarToggle={(id, active) => {\n    // Toggle calendar visibility\n  }}\n/>\n```\n\n## Custom Event Form\n\n```tsx\n<Scheduler\n  renderEventForm={({ isOpen, onClose, event, onSave, onDelete }) => (\n    <MyCustomForm\n      open={isOpen}\n      onClose={onClose}\n      event={event}\n      onSave={onSave}\n      onDelete={onDelete}\n    />\n  )}\n/>\n```\n\n## Exports\n\n```typescript\n// Components\nexport { Scheduler } from 'calendarkit-pro';\n\n// Types\nexport type {\n  CalendarEvent,\n  CalendarProps,\n  CalendarTheme,\n  CalendarTranslations,\n  ViewType,\n  EventType,\n  Resource,\n  EventReminder,\n  EventAttachment,\n  ThemeColors,\n} from 'calendarkit-pro';\n\n// Utilities\nexport { cn } from 'calendarkit-pro';\n```\n\n## Browser Support\n\n- Chrome (latest)\n- Firefox (latest)\n- Safari (latest)\n- Edge (latest)\n\n## License\n\nMIT License - see [LICENSE](LICENSE) for details.\n\n## Links\n\n- [GitHub](https://github.com/Zesor/calendarkit-pro)\n- [Issues](https://github.com/Zesor/calendarkit-pro/issues)\n- [CalendarKit](https://calendarkit.io)\n","readmeFilename":"README.md","_rev":"1-4932c8e8167aa100737ec724408d7660"}