calendarkit-pro 1.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Zesor
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,331 @@
+# CalendarKit Pro
+
+A professional, feature-rich React calendar component with drag-and-drop, recurring events, timezone support, resource scheduling, and internationalization.
+
+[![npm version](https://badge.fury.io/js/calendarkit-pro.svg)](https://www.npmjs.com/package/calendarkit-pro)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+## Features
+
+- **5 Views** - Month, Week, Day, Agenda, and Resource views
+- **Drag & Drop** - Move events with smooth animations and grid snapping
+- **Event Resize** - Drag event edges to adjust duration
+- **Recurring Events** - Daily, weekly, monthly, yearly with RRule support
+- **Timezone Support** - Full IANA timezone handling
+- **i18n Ready** - Built-in English/French, fully customizable
+- **Resource Scheduling** - Schedule across rooms, people, or equipment
+- **Dark Mode** - Built-in theme toggle
+- **ICS Import/Export** - RFC 5545 compliant
+- **Mobile Friendly** - Touch gestures and responsive layout
+- **TypeScript** - Full type definitions included
+- **High Performance** - Handles 10,000+ events
+
+## Installation
+
+```bash
+npm install calendarkit-pro
+```
+
+## Requirements
+
+CalendarKit Pro requires **TailwindCSS**. Add the package to your Tailwind config:
+
+```js
+// tailwind.config.js
+module.exports = {
+  content: [
+    // ... your paths
+    './node_modules/calendarkit-pro/**/*.{js,mjs}',
+  ],
+}
+```
+
+## Quick Start
+
+```tsx
+import { Scheduler } from 'calendarkit-pro';
+import type { CalendarEvent, ViewType } from 'calendarkit-pro';
+import { useState } from 'react';
+
+function MyCalendar() {
+  const [events, setEvents] = useState<CalendarEvent[]>([]);
+  const [view, setView] = useState<ViewType>('week');
+  const [date, setDate] = useState(new Date());
+
+  return (
+    <Scheduler
+      events={events}
+      view={view}
+      onViewChange={setView}
+      date={date}
+      onDateChange={setDate}
+      onEventCreate={(event) => {
+        setEvents([...events, { ...event, id: crypto.randomUUID() } as CalendarEvent]);
+      }}
+      onEventUpdate={(event) => {
+        setEvents(events.map(e => e.id === event.id ? event : e));
+      }}
+      onEventDelete={(id) => {
+        setEvents(events.filter(e => e.id !== id));
+      }}
+    />
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `events` | `CalendarEvent[]` | Array of events to display |
+| `view` | `ViewType` | Current view: `'month'` \| `'week'` \| `'day'` \| `'agenda'` \| `'resource'` |
+| `date` | `Date` | Currently focused date |
+| `onViewChange` | `(view: ViewType) => void` | View change callback |
+| `onDateChange` | `(date: Date) => void` | Date change callback |
+| `onEventCreate` | `(event: Partial<CalendarEvent>) => void` | Event creation callback |
+| `onEventUpdate` | `(event: CalendarEvent) => void` | Event update callback |
+| `onEventDelete` | `(eventId: string) => void` | Event deletion callback |
+| `onEventResize` | `(event, start, end) => void` | Event resize callback |
+| `calendars` | `Calendar[]` | Multiple calendar support |
+| `resources` | `Resource[]` | Resources for resource view |
+| `eventTypes` | `EventType[]` | Pre-defined event types |
+| `timezone` | `string` | IANA timezone (e.g., `'America/New_York'`) |
+| `onTimezoneChange` | `(tz: string) => void` | Timezone change callback |
+| `language` | `'en'` \| `'fr'` | UI language |
+| `translations` | `Partial<CalendarTranslations>` | Custom translations |
+| `locale` | `Locale` | date-fns locale for formatting |
+| `isDarkMode` | `boolean` | Enable dark mode |
+| `onThemeToggle` | `() => void` | Dark mode toggle callback |
+| `theme` | `CalendarTheme` | Custom theme colors |
+| `readOnly` | `boolean` | Disable editing |
+| `isLoading` | `boolean` | Show loading skeletons |
+| `hideViewSwitcher` | `boolean` | Hide view switcher |
+| `renderEventForm` | `(props) => ReactNode` | Custom event form |
+
+## Types
+
+### CalendarEvent
+
+```typescript
+interface CalendarEvent {
+  id: string;
+  title: string;
+  start: Date;
+  end: Date;
+  description?: string;
+  color?: string;
+  allDay?: boolean;
+  calendarId?: string;
+  resourceId?: string;
+  type?: string;
+  guests?: string[];
+  attachments?: EventAttachment[];
+  reminders?: EventReminder[];
+  recurrence?: {
+    freq: 'DAILY' | 'WEEKLY' | 'MONTHLY' | 'YEARLY';
+    interval?: number;
+    count?: number;
+    until?: Date;
+    byweekday?: number[];
+  };
+}
+```
+
+### Resource
+
+```typescript
+interface Resource {
+  id: string;
+  label: string;
+  color?: string;
+  avatar?: string;
+}
+```
+
+### CalendarTheme
+
+```typescript
+interface CalendarTheme {
+  colors?: {
+    primary?: string;
+    secondary?: string;
+    background?: string;
+    foreground?: string;
+    border?: string;
+    muted?: string;
+    accent?: string;
+  };
+  fontFamily?: string;
+  borderRadius?: string;
+}
+```
+
+## Views
+
+### Month View
+Full month grid with event indicators. Click a date to switch to day view.
+
+### Week View
+7-day view with hourly time slots. Drag events to reschedule, resize from bottom edge.
+
+### Day View
+Single day with 15-minute time slots. Ideal for detailed scheduling.
+
+### Agenda View
+Chronological list of upcoming events for 30 days. Shows event details and metadata.
+
+### Resource View
+Horizontal timeline for scheduling across resources (rooms, people, equipment).
+
+## Recurring Events
+
+```tsx
+const recurringEvent: CalendarEvent = {
+  id: '1',
+  title: 'Weekly Standup',
+  start: new Date(),
+  end: new Date(Date.now() + 3600000),
+  recurrence: {
+    freq: 'WEEKLY',
+    interval: 1,
+    count: 10, // or use 'until' for end date
+  },
+};
+```
+
+## Timezone Support
+
+```tsx
+<Scheduler
+  timezone="Europe/Paris"
+  onTimezoneChange={(tz) => console.log('Timezone:', tz)}
+/>
+```
+
+## Internationalization
+
+```tsx
+import { fr } from 'date-fns/locale';
+
+const frenchTranslations = {
+  today: "Aujourd'hui",
+  month: 'Mois',
+  week: 'Semaine',
+  day: 'Jour',
+  agenda: 'Agenda',
+  createEvent: 'Créer un événement',
+  // ... more translations
+};
+
+<Scheduler
+  language="fr"
+  locale={fr}
+  translations={frenchTranslations}
+/>
+```
+
+## Theming
+
+```tsx
+<Scheduler
+  isDarkMode={darkMode}
+  onThemeToggle={() => setDarkMode(!darkMode)}
+  theme={{
+    colors: {
+      primary: '#3b82f6',
+      background: '#ffffff',
+      foreground: '#1a1a1a',
+    },
+    fontFamily: 'Inter, sans-serif',
+    borderRadius: '12px',
+  }}
+/>
+```
+
+## Resource Scheduling
+
+```tsx
+const resources: Resource[] = [
+  { id: 'room-a', label: 'Conference Room A', color: '#3b82f6' },
+  { id: 'room-b', label: 'Conference Room B', color: '#10b981' },
+];
+
+<Scheduler
+  view="resource"
+  resources={resources}
+  events={events}
+/>
+```
+
+## Multiple Calendars
+
+```tsx
+const calendars = [
+  { id: 'work', label: 'Work', color: '#3b82f6', active: true },
+  { id: 'personal', label: 'Personal', color: '#10b981', active: true },
+];
+
+<Scheduler
+  calendars={calendars}
+  onCalendarToggle={(id, active) => {
+    // Toggle calendar visibility
+  }}
+/>
+```
+
+## Custom Event Form
+
+```tsx
+<Scheduler
+  renderEventForm={({ isOpen, onClose, event, onSave, onDelete }) => (
+    <MyCustomForm
+      open={isOpen}
+      onClose={onClose}
+      event={event}
+      onSave={onSave}
+      onDelete={onDelete}
+    />
+  )}
+/>
+```
+
+## Exports
+
+```typescript
+// Components
+export { Scheduler } from 'calendarkit-pro';
+
+// Types
+export type {
+  CalendarEvent,
+  CalendarProps,
+  CalendarTheme,
+  CalendarTranslations,
+  ViewType,
+  EventType,
+  Resource,
+  EventReminder,
+  EventAttachment,
+  ThemeColors,
+} from 'calendarkit-pro';
+
+// Utilities
+export { cn } from 'calendarkit-pro';
+```
+
+## Browser Support
+
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
+
+## License
+
+MIT License - see [LICENSE](LICENSE) for details.
+
+## Links
+
+- [GitHub](https://github.com/Zesor/calendarkit-pro)
+- [Issues](https://github.com/Zesor/calendarkit-pro/issues)
+- [CalendarKit](https://calendarkit.io)

package/dist/index.d.mts

@@ -0,0 +1,161 @@
+import React$1 from 'react';
+import { Locale } from 'date-fns';
+import { ClassValue } from 'clsx';
+
+type ViewType = 'month' | 'week' | 'day' | 'agenda' | 'resource';
+interface EventAttachment {
+    id: string;
+    name: string;
+    url?: string;
+    type: 'file' | 'link' | 'image';
+    size?: string;
+}
+interface EventReminder {
+    id: string;
+    type: 'notification' | 'email';
+    time: number;
+    label?: string;
+}
+interface CalendarEvent {
+    id: string;
+    title: string;
+    start: Date;
+    end: Date;
+    description?: string;
+    color?: string;
+    allDay?: boolean;
+    calendarId?: string;
+    resourceId?: string;
+    type?: string;
+    icon?: string;
+    attachments?: EventAttachment[];
+    guests?: string[];
+    reminders?: EventReminder[];
+    recurrence?: {
+        freq: 'DAILY' | 'WEEKLY' | 'MONTHLY' | 'YEARLY';
+        interval?: number;
+        count?: number;
+        until?: Date;
+        byweekday?: number[];
+    };
+    [key: string]: any;
+}
+interface EventType {
+    id: string;
+    label: string;
+    color?: string;
+    icon?: React.ReactNode;
+}
+interface Resource {
+    id: string;
+    label: string;
+    color?: string;
+    avatar?: string;
+}
+interface ThemeColors {
+    primary?: string;
+    secondary?: string;
+    background?: string;
+    foreground?: string;
+    border?: string;
+    muted?: string;
+    accent?: string;
+}
+interface CalendarTheme {
+    colors?: ThemeColors;
+    fontFamily?: string;
+    borderRadius?: string;
+}
+interface CalendarTranslations {
+    today: string;
+    month: string;
+    week: string;
+    day: string;
+    agenda: string;
+    resource: string;
+    createEvent: string;
+    editEvent: string;
+    delete: string;
+    save: string;
+    cancel: string;
+    title: string;
+    start: string;
+    end: string;
+    allDay: string;
+    description: string;
+    repeat: string;
+    noRepeat: string;
+    selectCalendar: string;
+    selectType: string;
+    daily: string;
+    weekly: string;
+    monthly: string;
+    yearly: string;
+    event: string;
+    task: string;
+    appointmentSchedule: string;
+    new: string;
+    dateAndTime: string;
+    timezone: string;
+    whosJoining: string;
+    suggestedTimes: string;
+    viewSuggestions: string;
+    whereWillItBe: string;
+    location: string;
+    descriptionAndAttachments: string;
+    dragAndDrop: string;
+    guests: string;
+    addAttachment: string;
+    moreOptions: string;
+    doesNotRepeat: string;
+    locationHelpText: string;
+}
+interface CalendarProps {
+    events?: CalendarEvent[];
+    translations?: Partial<CalendarTranslations>;
+    view?: ViewType;
+    onViewChange?: (view: ViewType) => void;
+    date?: Date;
+    onDateChange?: (date: Date) => void;
+    onEventClick?: (event: CalendarEvent) => void;
+    onEventDrop?: (event: CalendarEvent, start: Date, end: Date) => void;
+    onEventResize?: (event: CalendarEvent, start: Date, end: Date) => void;
+    onEventCreate?: (event: Partial<CalendarEvent>) => void;
+    onEventUpdate?: (event: CalendarEvent) => void;
+    onEventDelete?: (eventId: string) => void;
+    theme?: CalendarTheme;
+    locale?: Locale;
+    timezone?: string;
+    onTimezoneChange?: (timezone: string) => void;
+    className?: string;
+    readOnly?: boolean;
+    calendars?: {
+        id: string;
+        label: string;
+        color?: string;
+        active?: boolean;
+    }[];
+    resources?: Resource[];
+    eventTypes?: EventType[];
+    onCalendarToggle?: (calendarId: string, active: boolean) => void;
+    isLoading?: boolean;
+    isDarkMode?: boolean;
+    onThemeToggle?: () => void;
+    hideViewSwitcher?: boolean;
+    language?: 'en' | 'fr';
+    onLanguageChange?: (lang: 'en' | 'fr') => void;
+    renderEventForm?: (props: {
+        isOpen: boolean;
+        onClose: () => void;
+        event?: CalendarEvent | null;
+        initialDate?: Date;
+        onSave: (event: Partial<CalendarEvent>) => void;
+        onDelete?: (eventId: string) => void;
+    }) => React.ReactNode;
+}
+
+declare function cn(...inputs: ClassValue[]): string;
+
+declare const Scheduler: React$1.FC<CalendarProps>;
+
+export { type CalendarEvent, type CalendarProps, type CalendarTheme, type CalendarTranslations, type EventAttachment, type EventReminder, type EventType, type Resource, Scheduler, type ThemeColors, type ViewType, cn };

package/dist/index.d.ts

@@ -0,0 +1,161 @@
+import React$1 from 'react';
+import { Locale } from 'date-fns';
+import { ClassValue } from 'clsx';
+
+type ViewType = 'month' | 'week' | 'day' | 'agenda' | 'resource';
+interface EventAttachment {
+    id: string;
+    name: string;
+    url?: string;
+    type: 'file' | 'link' | 'image';
+    size?: string;
+}
+interface EventReminder {
+    id: string;
+    type: 'notification' | 'email';
+    time: number;
+    label?: string;
+}
+interface CalendarEvent {
+    id: string;
+    title: string;
+    start: Date;
+    end: Date;
+    description?: string;
+    color?: string;
+    allDay?: boolean;
+    calendarId?: string;
+    resourceId?: string;
+    type?: string;
+    icon?: string;
+    attachments?: EventAttachment[];
+    guests?: string[];
+    reminders?: EventReminder[];
+    recurrence?: {
+        freq: 'DAILY' | 'WEEKLY' | 'MONTHLY' | 'YEARLY';
+        interval?: number;
+        count?: number;
+        until?: Date;
+        byweekday?: number[];
+    };
+    [key: string]: any;
+}
+interface EventType {
+    id: string;
+    label: string;
+    color?: string;
+    icon?: React.ReactNode;
+}
+interface Resource {
+    id: string;
+    label: string;
+    color?: string;
+    avatar?: string;
+}
+interface ThemeColors {
+    primary?: string;
+    secondary?: string;
+    background?: string;
+    foreground?: string;
+    border?: string;
+    muted?: string;
+    accent?: string;
+}
+interface CalendarTheme {
+    colors?: ThemeColors;
+    fontFamily?: string;
+    borderRadius?: string;
+}
+interface CalendarTranslations {
+    today: string;
+    month: string;
+    week: string;
+    day: string;
+    agenda: string;
+    resource: string;
+    createEvent: string;
+    editEvent: string;
+    delete: string;
+    save: string;
+    cancel: string;
+    title: string;
+    start: string;
+    end: string;
+    allDay: string;
+    description: string;
+    repeat: string;
+    noRepeat: string;
+    selectCalendar: string;
+    selectType: string;
+    daily: string;
+    weekly: string;
+    monthly: string;
+    yearly: string;
+    event: string;
+    task: string;
+    appointmentSchedule: string;
+    new: string;
+    dateAndTime: string;
+    timezone: string;
+    whosJoining: string;
+    suggestedTimes: string;
+    viewSuggestions: string;
+    whereWillItBe: string;
+    location: string;
+    descriptionAndAttachments: string;
+    dragAndDrop: string;
+    guests: string;
+    addAttachment: string;
+    moreOptions: string;
+    doesNotRepeat: string;
+    locationHelpText: string;
+}
+interface CalendarProps {
+    events?: CalendarEvent[];
+    translations?: Partial<CalendarTranslations>;
+    view?: ViewType;
+    onViewChange?: (view: ViewType) => void;
+    date?: Date;
+    onDateChange?: (date: Date) => void;
+    onEventClick?: (event: CalendarEvent) => void;
+    onEventDrop?: (event: CalendarEvent, start: Date, end: Date) => void;
+    onEventResize?: (event: CalendarEvent, start: Date, end: Date) => void;
+    onEventCreate?: (event: Partial<CalendarEvent>) => void;
+    onEventUpdate?: (event: CalendarEvent) => void;
+    onEventDelete?: (eventId: string) => void;
+    theme?: CalendarTheme;
+    locale?: Locale;
+    timezone?: string;
+    onTimezoneChange?: (timezone: string) => void;
+    className?: string;
+    readOnly?: boolean;
+    calendars?: {
+        id: string;
+        label: string;
+        color?: string;
+        active?: boolean;
+    }[];
+    resources?: Resource[];
+    eventTypes?: EventType[];
+    onCalendarToggle?: (calendarId: string, active: boolean) => void;
+    isLoading?: boolean;
+    isDarkMode?: boolean;
+    onThemeToggle?: () => void;
+    hideViewSwitcher?: boolean;
+    language?: 'en' | 'fr';
+    onLanguageChange?: (lang: 'en' | 'fr') => void;
+    renderEventForm?: (props: {
+        isOpen: boolean;
+        onClose: () => void;
+        event?: CalendarEvent | null;
+        initialDate?: Date;
+        onSave: (event: Partial<CalendarEvent>) => void;
+        onDelete?: (eventId: string) => void;
+    }) => React.ReactNode;
+}
+
+declare function cn(...inputs: ClassValue[]): string;
+
+declare const Scheduler: React$1.FC<CalendarProps>;
+
+export { type CalendarEvent, type CalendarProps, type CalendarTheme, type CalendarTranslations, type EventAttachment, type EventReminder, type EventType, type Resource, Scheduler, type ThemeColors, type ViewType, cn };