calendarkit-prov2 2.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Sayzera
+
+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,272 @@
+# CalendarKit Pro v2
+
+Professional React calendar component with drag-and-drop, recurring events, timezone support, resource scheduling, custom views, sidebar menus, and 15+ languages.
+
+**Author:** [Sayzera](https://github.com/Sayzera)
+
+[![npm version](https://badge.fury.io/js/calendarkit-prov2.svg)](https://www.npmjs.com/package/calendarkit-prov2)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![GitHub](https://img.shields.io/github/stars/Sayzera/calendarkit-prov2?style=social)](https://github.com/Sayzera/calendarkit-prov2)
+
+## Install
+
+```bash
+npm install calendarkit-prov2
+```
+
+### Peer dependencies
+
+- `react` ^18 or ^19
+- `react-dom` ^18 or ^19
+- **Tailwind CSS v3+** (required for styling)
+
+---
+
+## Quick start
+
+### 1. Tailwind — scan the package
+
+```js
+// tailwind.config.js
+module.exports = {
+  content: [
+    './src/**/*.{js,ts,jsx,tsx}',
+    './node_modules/calendarkit-prov2/dist/**/*.{js,mjs}',
+  ],
+  darkMode: 'class',
+  theme: {
+    extend: {
+      colors: {
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+        },
+        border: 'hsl(var(--border))',
+        ring: 'hsl(var(--ring))',
+      },
+    },
+  },
+};
+```
+
+### 2. Import theme CSS
+
+```tsx
+// app/layout.tsx or main.tsx
+import 'calendarkit-prov2/calendarkit.css';
+```
+
+### 3. Use the component
+
+```tsx
+'use client';
+
+import { ProScheduler } from 'calendarkit-prov2';
+import type { CalendarEvent, ViewType } from 'calendarkit-prov2';
+import { useState } from 'react';
+import { fr } from 'date-fns/locale';
+
+export default function AdvancedCalendar() {
+  const [events, setEvents] = useState<CalendarEvent[]>([]);
+  const [view, setView] = useState<ViewType>('week');
+  const [date, setDate] = useState(new Date());
+  const [isDark, setIsDark] = useState(false);
+  const [language, setLanguage] = useState<'en' | 'fr' | 'tr'>('en');
+  const [timezone, setTimezone] = useState('America/New_York');
+
+  const calendars = [
+    { id: 'work', label: 'Work', color: '#3b82f6', active: true },
+    { id: 'personal', label: 'Personal', color: '#10b981', active: true },
+  ];
+
+  return (
+    <div className={isDark ? 'dark' : ''}>
+      <div className="h-[700px] border rounded-lg overflow-hidden">
+        <ProScheduler
+          events={events}
+          view={view}
+          onViewChange={setView}
+          date={date}
+          onDateChange={setDate}
+          calendars={calendars}
+          timezone={timezone}
+          onTimezoneChange={setTimezone}
+          language={language}
+          onLanguageChange={setLanguage}
+          locale={language === 'fr' ? fr : undefined}
+          isDarkMode={isDark}
+          onThemeToggle={() => setIsDark(!isDark)}
+          onEventCreate={(event) => {
+            setEvents((prev) => [
+              ...prev,
+              { ...event, id: crypto.randomUUID() } as CalendarEvent,
+            ]);
+          }}
+          onEventUpdate={(updated) => {
+            setEvents((prev) => prev.map((e) => (e.id === updated.id ? updated : e)));
+          }}
+          onEventDelete={(id) => {
+            setEvents((prev) => prev.filter((e) => e.id !== id));
+          }}
+          onEventDrop={(event, newStart, newEnd) => {
+            setEvents((prev) =>
+              prev.map((e) =>
+                e.id === event.id ? { ...e, start: newStart, end: newEnd } : e
+              )
+            );
+          }}
+        />
+      </div>
+    </div>
+  );
+}
+```
+
+> **Migration from v1 (`@calendarkit/react`):** Replace the import path with `calendarkit-prov2`. The component name `ProScheduler` and most props stay the same. `Scheduler` is also exported as an alias.
+
+---
+
+## Exports
+
+```tsx
+import {
+  ProScheduler,
+  Scheduler,
+  cn,
+  getTranslations,
+  LANGUAGE_META,
+  LOCALES,
+} from 'calendarkit-prov2';
+
+import type {
+  CalendarEvent,
+  ProSchedulerProps,
+  ViewType,
+  Resource,
+  EventType,
+  CustomView,
+  SidebarMenuItem,
+  CalendarTheme,
+  LanguageCode,
+} from 'calendarkit-prov2';
+```
+
+---
+
+## Props
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `events` | `CalendarEvent[]` | Events to display |
+| `view` | `ViewType` | `'month' \| 'week' \| 'day' \| 'agenda' \| 'resource'` |
+| `date` | `Date` | Focused date |
+| `onViewChange` | `(view) => void` | View change handler |
+| `onDateChange` | `(date) => void` | Date change handler |
+| `onEventCreate` | `(event) => void` | New event |
+| `onEventUpdate` | `(event) => void` | Update event |
+| `onEventDelete` | `(id) => void` | Delete event |
+| `onEventDrop` | `(event, start, end) => void` | Drag and drop handler |
+| `onEventResize` | `(event, start, end) => void` | Resize handler |
+| `calendars` | `Calendar[]` | Multi-calendar filter |
+| `resources` | `Resource[]` | Resource view columns |
+| `eventTypes` | `EventType[]` | Event type presets |
+| `timezone` | `string` | IANA timezone |
+| `onTimezoneChange` | `(tz) => void` | Timezone change |
+| `language` | `LanguageCode` | UI language (15+ locales, default `tr`) |
+| `onLanguageChange` | `(lang) => void` | Language change |
+| `locale` | `Locale` | date-fns locale |
+| `isDarkMode` | `boolean` | Dark mode state |
+| `onThemeToggle` | `() => void` | Theme toggle |
+| `theme` | `CalendarTheme` | Custom colors / radius |
+| `customViews` | `CustomView[]` | Extra header views |
+| `sidebarMenus` | `SidebarMenuItem[]` | Custom sidebar pages |
+| `readOnly` | `boolean` | Disable editing |
+| `isLoading` | `boolean` | Skeleton state |
+| `renderEventForm` | `(props) => ReactNode` | Custom event modal |
+| `renderHeader` | `(props) => ReactNode` | Custom header |
+
+---
+
+## Publish to npm (Access Token)
+
+Repository: [github.com/Sayzera/calendarkit-prov2](https://github.com/Sayzera/calendarkit-prov2)
+
+npm publish requires an **Access Token** (for CI/CD or local automation). You do not need 2FA OTP on every publish when using a token with publish permission.
+
+### Step 1 — Create npm Access Token
+
+1. Go to [npmjs.com](https://www.npmjs.com) → **Account** → **Access Tokens**
+2. **Generate New Token** → **Granular Access Token**
+3. Configure:
+   - **Token name:** `calendarkit-prov2-publish`
+   - **Expiration:** your choice (90 days / 1 year)
+   - **Packages:** select `calendarkit-prov2` (or all packages you own)
+   - **Permissions:** **Read and write**
+4. Enable **Bypass 2FA for publish** if the option is shown (required for automated publish)
+5. Copy the token (`npm_...`) — it is shown only once
+
+### Step 2 — Publish from your machine (PowerShell)
+
+```powershell
+# Set token for this session only (do not commit the token)
+$env:NPM_TOKEN = "npm_YOUR_TOKEN_HERE"
+
+npm run build:lib
+npm publish --access public
+```
+
+The project `.npmrc` reads `NPM_TOKEN` from the environment automatically.
+
+### Step 3 — Publish via GitHub Actions (recommended)
+
+1. GitHub repo → **Settings** → **Secrets and variables** → **Actions**
+2. **New repository secret**
+   - Name: `NPM_TOKEN`
+   - Value: your `npm_...` token
+3. Bump version and push a tag:
+
+```bash
+npm version patch
+git push origin main --tags
+```
+
+Or run manually: **Actions** → **Publish to npm** → **Run workflow**
+
+The workflow file: `.github/workflows/publish-npm.yml`
+
+### What gets published
+
+`build:lib` produces:
+
+- `dist/index.js` (CommonJS)
+- `dist/index.mjs` (ESM)
+- `dist/index.d.ts` / `dist/index.d.mts` (TypeScript types)
+- `dist/calendarkit.css` (theme tokens)
+
+---
+
+## Links
+
+- [GitHub Repository](https://github.com/Sayzera/calendarkit-prov2)
+- [npm Package](https://www.npmjs.com/package/calendarkit-prov2)
+- [Issues](https://github.com/Sayzera/calendarkit-prov2/issues)
+
+---
+
+## License
+
+MIT — see [LICENSE](LICENSE). Copyright (c) 2026 [Sayzera](https://github.com/Sayzera).

package/dist/calendarkit.css

@@ -0,0 +1,64 @@
+/**
+ * CalendarKit Pro v2 — theme tokens
+ * Import once in your app entry (e.g. layout.tsx / main.tsx):
+ *   import 'calendarkit-prov2/calendarkit.css';
+ */
+:root {
+  --background: 0 0% 100%;
+  --foreground: 222.2 84% 4.9%;
+  --primary: 221.2 83.2% 53.3%;
+  --primary-foreground: 210 40% 98%;
+  --secondary: 210 40% 96.1%;
+  --secondary-foreground: 222.2 47.4% 11.2%;
+  --muted: 210 40% 96.1%;
+  --muted-foreground: 215.4 16.3% 46.9%;
+  --accent: 210 40% 96.1%;
+  --accent-foreground: 222.2 47.4% 11.2%;
+  --border: 214.3 31.8% 91.4%;
+  --ring: 221.2 83.2% 53.3%;
+  --card: 0 0% 100%;
+  --card-foreground: 222.2 84% 4.9%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 222.2 84% 4.9%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 210 40% 98%;
+  --success: 142 76% 36%;
+  --success-foreground: 0 0% 100%;
+  --warning: 38 92% 50%;
+  --warning-foreground: 0 0% 100%;
+}
+
+.dark {
+  --background: 224 71% 4%;
+  --foreground: 213 31% 91%;
+  --primary: 217.2 91.2% 59.8%;
+  --primary-foreground: 222.2 47.4% 11.2%;
+  --secondary: 222 47% 11%;
+  --secondary-foreground: 210 40% 98%;
+  --muted: 223 47% 11%;
+  --muted-foreground: 218 11% 65%;
+  --accent: 216 34% 17%;
+  --accent-foreground: 210 40% 98%;
+  --border: 216 34% 17%;
+  --ring: 224.3 76.3% 48%;
+  --card: 224 71% 6%;
+  --card-foreground: 213 31% 91%;
+  --popover: 224 71% 6%;
+  --popover-foreground: 213 31% 91%;
+  --destructive: 0 63% 31%;
+  --destructive-foreground: 210 40% 98%;
+  --success: 142 69% 31%;
+  --success-foreground: 0 0% 100%;
+  --warning: 32 95% 44%;
+  --warning-foreground: 0 0% 100%;
+}
+
+/* Time indicator pulse used in Day/Week views */
+@keyframes time-pulse {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.7; transform: scale(1.1); }
+}
+
+.time-indicator-dot {
+  animation: time-pulse 2s ease-in-out infinite;
+}

package/dist/index.d.mts

@@ -0,0 +1,320 @@
+import React from 'react';
+import { Locale } from 'date-fns';
+import { ClassValue } from 'clsx';
+
+type LanguageCode = 'tr' | 'en' | 'fr' | 'de' | 'es' | 'it' | 'pt' | 'ar' | 'zh' | 'ja' | 'ko' | 'ru' | 'nl' | 'pl' | 'sv';
+declare const LANGUAGE_META: Record<LanguageCode, {
+    native: string;
+    english: string;
+    flag: string;
+    rtl?: boolean;
+}>;
+declare const LOCALES: Record<LanguageCode, CalendarTranslations>;
+/**
+ * Returns the full translation object for a given language code,
+ * merged with any custom override translations.
+ */
+declare function getTranslations(language?: LanguageCode, overrides?: Partial<CalendarTranslations>): CalendarTranslations;
+
+type ViewType = 'month' | 'week' | 'day' | 'agenda' | 'resource';
+/**
+ * A fully custom view that extends the built-in views (month/week/day/agenda).
+ * - Appears as a button in the header's view switcher (after built-in views)
+ * - Also listed vertically in the sidebar's İşlemler section
+ * - When active, its component replaces the main calendar area
+ */
+interface CustomView {
+    /** Unique identifier — must not collide with built-in ViewType values. */
+    id: string;
+    /** Short label shown in the header button and sidebar list. */
+    label: string;
+    /** Optional icon for the header button and sidebar row. */
+    icon?: React.ReactNode;
+    /** The React node rendered in the main content area when this view is selected. */
+    component: React.ReactNode;
+}
+/**
+ * A single custom navigation item shown in the Scheduler sidebar.
+ * Clicking it replaces the main calendar area with the provided component.
+ */
+interface SidebarMenuItem {
+    /** Unique key used to track which menu is active. */
+    id: string;
+    /** Display label shown in the sidebar. */
+    label: string;
+    /** Optional icon rendered before the label. Any React node (e.g. a Lucide icon). */
+    icon?: React.ReactNode;
+    /** The component rendered in the main area when this menu item is selected. */
+    component: React.ReactNode;
+}
+
+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;
+}
+/** Full set of translation strings used across all components. */
+interface CalendarTranslations {
+    today: string;
+    month: string;
+    week: string;
+    day: string;
+    agenda: string;
+    resource: string;
+    create: string;
+    createEvent: string;
+    editEvent: string;
+    newEvent: string;
+    saveChanges: string;
+    delete: string;
+    save: string;
+    cancel: string;
+    edit: string;
+    duplicate: string;
+    close: string;
+    moreOptions: string;
+    addAttachment: string;
+    addReminder: string;
+    title: string;
+    addTitle: string;
+    start: string;
+    end: string;
+    allDay: string;
+    description: string;
+    descriptionAndAttachments: string;
+    addDescription: string;
+    location: string;
+    addLocation: string;
+    locationHelpText: string;
+    notes: string;
+    repeat: string;
+    noRepeat: string;
+    doesNotRepeat: string;
+    daily: string;
+    weekly: string;
+    monthly: string;
+    yearly: string;
+    repeatFor: string;
+    times: string;
+    until: string;
+    endRepeat: string;
+    never: string;
+    afterOccurrences: string;
+    onDate: string;
+    selectCalendar: string;
+    selectType: string;
+    calendar: string;
+    calendars: string;
+    event: string;
+    task: string;
+    appointmentSchedule: string;
+    new: string;
+    guests: string;
+    addGuests: string;
+    guest: string;
+    guestCount: string;
+    guestsCount: string;
+    guestAdded: string;
+    guestsAdded: string;
+    whosJoining: string;
+    suggestedTimes: string;
+    viewSuggestions: string;
+    whereWillItBe: string;
+    dateAndTime: string;
+    reminders: string;
+    dragAndDrop: string;
+    attachments: string;
+    reminderAtTime: string;
+    reminder5min: string;
+    reminder10min: string;
+    reminder15min: string;
+    reminder30min: string;
+    reminder1hour: string;
+    reminder2hours: string;
+    reminder1day: string;
+    reminder2days: string;
+    reminder1week: string;
+    tomorrow: string;
+    eventCount: string;
+    eventsCount: string;
+    timezone: string;
+    localTime: string;
+    search: string;
+    allTypes: string;
+    noTitle: string;
+    copy: string;
+    clickToOpenInMaps: string;
+}
+interface CalendarProps {
+    events?: CalendarEvent[];
+    /** Partial override translations merged on top of the selected language. */
+    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;
+    /**
+     * Hour (0–23) the Day and Week views initially scroll to on mount.
+     * Defaults to 8 (08:00 AM).
+     */
+    initialScrollHour?: number;
+    /**
+     * When true, the time axis is reversed: 23:00 appears at the top,
+     * 00:00 at the bottom. Defaults to false.
+     */
+    reverseTime?: boolean;
+    /** BCP 47 language code. Defaults to 'tr' (Turkish). */
+    language?: LanguageCode;
+    onLanguageChange?: (lang: LanguageCode) => void;
+    /**
+     * Replace the default event form/modal with a fully custom component.
+     * Receives open state, the event being edited, and save/delete handlers.
+     */
+    renderEventForm?: (props: {
+        isOpen: boolean;
+        onClose: () => void;
+        event?: CalendarEvent | null;
+        initialDate?: Date;
+        onSave: (event: Partial<CalendarEvent>) => void;
+        onDelete?: (eventId: string) => void;
+    }) => React.ReactNode;
+    /**
+     * Replace the default CalendarHeader bar with a fully custom component.
+     * All navigation state and handlers are forwarded so you have full control.
+     */
+    renderHeader?: (props: {
+        currentDate: Date;
+        view: ViewType;
+        onPrev: () => void;
+        onNext: () => void;
+        onToday: () => void;
+        onViewChange: (view: ViewType) => void;
+        translations: CalendarTranslations;
+        language: LanguageCode;
+        onLanguageChange?: (lang: LanguageCode) => void;
+        isDarkMode?: boolean;
+        onThemeToggle?: () => void;
+    }) => React.ReactNode;
+    /**
+     * Replace the default MiniCalendar in the sidebar with a custom component.
+     * Receives the currently selected date and date/view change handlers.
+     */
+    renderMiniCalendar?: (props: {
+        currentDate: Date;
+        onDateChange: (date: Date) => void;
+        onViewChange?: (view: ViewType) => void;
+    }) => React.ReactNode;
+    /**
+     * Replace the default empty-state shown in the Agenda view with a custom component.
+     * Receives the current view type and the create-event handler.
+     */
+    renderEmptyState?: (props: {
+        view: ViewType;
+        onCreateEvent?: () => void;
+    }) => React.ReactNode;
+    /**
+     * Custom navigation items rendered in the sidebar.
+     * Clicking an item replaces the main calendar area with its `component`.
+     * The calendar itself is always accessible via the view switcher in the header.
+     */
+    sidebarMenus?: SidebarMenuItem[];
+    /**
+     * Additional views that extend the built-in ones (month / week / day / agenda).
+     * Each custom view:
+     *   • Gets a button in the header's view switcher (after the built-in ones)
+     *   • Is also listed vertically inside the sidebar's İşlemler section
+     *   • Renders its `component` in the main content area when selected
+     */
+    customViews?: CustomView[];
+}
+
+declare function cn(...inputs: ClassValue[]): string;
+
+declare const Scheduler: React.FC<CalendarProps>;
+/** Primary export — backward-compatible alias for v1 `@calendarkit/react` consumers. */
+declare const ProScheduler: React.FC<CalendarProps>;
+
+export { type CalendarEvent, type CalendarProps, type CalendarTheme, type CalendarTranslations, type CustomView, type EventAttachment, type EventReminder, type EventType, LANGUAGE_META, LOCALES, type LanguageCode, ProScheduler, type CalendarProps as ProSchedulerProps, type Resource, Scheduler, type SidebarMenuItem, type ThemeColors, type ViewType, cn, getTranslations };