calendarkit-prov2 2.0.0 → 2.0.1

package/README.md

@@ -78,20 +78,12 @@ import 'calendarkit-prov2/calendarkit.css';
 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() {
+export default function MyCalendar() {
   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' : ''}>
@@ -102,12 +94,6 @@ export default function AdvancedCalendar() {
           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) => {
@@ -169,93 +155,161 @@ import type {
 
 ## 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 |
+| Prop | Type | Default | 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 handler |
+| `onEventUpdate` | `(event) => void` | — | Update event handler |
+| `onEventDelete` | `(id) => void` | — | Delete event handler |
+| `onEventDrop` | `(event, start, end) => void` | — | Drag and drop handler |
+| `onEventResize` | `(event, start, end) => void` | — | Resize handler |
+| `calendars` | `Calendar[]` | — | Multi-calendar filter list |
+| `resources` | `Resource[]` | — | Resource view columns |
+| `eventTypes` | `EventType[]` | — | Event type presets |
+| `timezone` | `string` | — | IANA timezone string |
+| `onTimezoneChange` | `(tz) => void` | — | Timezone change handler |
+| `language` | `LanguageCode` | `'tr'` | UI language (15+ locales) |
+| `onLanguageChange` | `(lang) => void` | — | Language change handler |
+| `hideLanguageSwitcher` | `boolean` | `false` | Hide the language dropdown from the header. The `language` prop still sets the active locale. |
+| `locale` | `Locale` | — | date-fns locale for date formatting |
+| `isDarkMode` | `boolean` | — | Dark mode state |
+| `onThemeToggle` | `() => void` | — | Theme toggle handler |
+| `theme` | `CalendarTheme` | — | Custom colors / border radius |
+| `customViews` | `CustomView[]` | — | Extra views shown in the header switcher |
+| `sidebarMenus` | `SidebarMenuItem[]` | — | Custom sidebar pages |
+| `readOnly` | `boolean` | `false` | Disable all editing interactions |
+| `isLoading` | `boolean` | `false` | Show skeleton loading state |
+| `hideViewSwitcher` | `boolean` | `false` | Hide the view switcher buttons from the header |
+| `initialScrollHour` | `number` | `8` | Hour (0–23) the Day/Week views scroll to on mount |
+| `reverseTime` | `boolean` | `false` | Reverse the time axis (23:00 at top, 00:00 at bottom) |
+| `renderEventForm` | `(props) => ReactNode` | — | Replace the default event modal with a custom component |
+| `renderHeader` | `(props) => ReactNode` | — | Replace the entire header with a custom component |
+| `renderMiniCalendar` | `(props) => ReactNode` | — | Replace the sidebar mini calendar |
+| `renderEmptyState` | `(props) => ReactNode` | — | Custom empty state for Agenda view |
 
 ---
 
-## Publish to npm (Access Token)
+## Header features
+
+### Event count badge
+
+The header automatically displays a **live event count badge** next to the view switcher. The count reflects only the events visible in the current view period:
 
-Repository: [github.com/Sayzera/calendarkit-prov2](https://github.com/Sayzera/calendarkit-prov2)
+| View | Counted range |
+|------|--------------|
+| Month | All events within the current month |
+| Week | All events within the current week (Mon–Sun) |
+| Day / Resource | Events on the current day |
+| Agenda | Events in the next 30 days |
 
-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.
+The badge updates automatically when you navigate or filter calendars.
 
-### Step 1 — Create npm Access Token
+### Create Event button
 
-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
+The **Create Event** button in the header displays only the `+` icon. Hovering over it reveals a tooltip with the label. On mobile, a floating action button (FAB) is shown instead.
 
-### Step 2 — Publish from your machine (PowerShell)
+### Language switcher
 
-```powershell
-# Set token for this session only (do not commit the token)
-$env:NPM_TOKEN = "npm_YOUR_TOKEN_HERE"
+Use `hideLanguageSwitcher` to lock the UI to a specific language without exposing the dropdown to end users:
 
-npm run build:lib
-npm publish --access public
+```tsx
+<ProScheduler
+  language="tr"
+  hideLanguageSwitcher
+  ...
+/>
 ```
 
-The project `.npmrc` reads `NPM_TOKEN` from the environment automatically.
+---
+
+## CalendarEvent model
+
+```ts
+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[]; // 0 = Monday, 6 = Sunday
+  };
+}
+```
 
-### 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:
+## Multi-calendar filtering
 
-```bash
-npm version patch
-git push origin main --tags
+```tsx
+const calendars = [
+  { id: 'work',     label: 'Work',     color: '#3b82f6', active: true },
+  { id: 'personal', label: 'Personal', color: '#10b981', active: true },
+];
+
+<ProScheduler
+  calendars={calendars}
+  onCalendarToggle={(id, active) => {
+    // update your calendar list
+  }}
+  ...
+/>
 ```
 
-Or run manually: **Actions** → **Publish to npm** → **Run workflow**
+Events with a matching `calendarId` are shown/hidden based on the `active` flag. Events without a `calendarId` are always shown.
+
+---
+
+## Custom views
+
+Add extra views to the header switcher:
+
+```tsx
+const customViews: CustomView[] = [
+  {
+    id: 'timeline',
+    label: 'Timeline',
+    icon: <MyIcon />,
+    component: <MyTimelineView />,
+  },
+];
 
-The workflow file: `.github/workflows/publish-npm.yml`
+<ProScheduler customViews={customViews} ... />
+```
+
+---
 
-### What gets published
+## Custom sidebar menus
 
-`build:lib` produces:
+```tsx
+const sidebarMenus: SidebarMenuItem[] = [
+  {
+    id: 'reports',
+    label: 'Reports',
+    icon: <BarChart2 />,
+    component: <ReportsPanel />,
+  },
+];
 
-- `dist/index.js` (CommonJS)
-- `dist/index.mjs` (ESM)
-- `dist/index.d.ts` / `dist/index.d.mts` (TypeScript types)
-- `dist/calendarkit.css` (theme tokens)
+<ProScheduler sidebarMenus={sidebarMenus} ... />
+```
 
 ---
 

package/dist/index.d.mts

@@ -249,6 +249,11 @@ interface CalendarProps {
     /** BCP 47 language code. Defaults to 'tr' (Turkish). */
     language?: LanguageCode;
     onLanguageChange?: (lang: LanguageCode) => void;
+    /**
+     * When true, the language-switcher dropdown is hidden from the header.
+     * The `language` prop still sets the active locale; it just won't be user-changeable.
+     */
+    hideLanguageSwitcher?: boolean;
     /**
      * Replace the default event form/modal with a fully custom component.
      * Receives open state, the event being edited, and save/delete handlers.

package/dist/index.d.ts

@@ -249,6 +249,11 @@ interface CalendarProps {
     /** BCP 47 language code. Defaults to 'tr' (Turkish). */
     language?: LanguageCode;
     onLanguageChange?: (lang: LanguageCode) => void;
+    /**
+     * When true, the language-switcher dropdown is hidden from the header.
+     * The `language` prop still sets the active locale; it just won't be user-changeable.
+     */
+    hideLanguageSwitcher?: boolean;
     /**
      * Replace the default event form/modal with a fully custom component.
      * Receives open state, the event being edited, and save/delete handlers.

package/dist/index.js

@@ -1515,7 +1515,9 @@ var CalendarHeader = ({
   onCreateEvent,
   customViews,
   activeCustomViewId,
-  onCustomViewChange
+  onCustomViewChange,
+  eventCount,
+  hideLanguageSwitcher = false
 }) => {
   const [isLangOpen, setIsLangOpen] = React15.useState(false);
   const [isCustomViewOpen, setIsCustomViewOpen] = React15.useState(false);
@@ -1607,15 +1609,15 @@ var CalendarHeader = ({
       className: "h-9 px-5 rounded-xl text-sm font-medium hidden sm:inline-flex border-[0.5px] border-border/60 hover:border-primary/40 hover:bg-primary/5 hover:text-primary transition-all duration-200"
     },
     translations.today
-  ), onCreateEvent && /* @__PURE__ */ React15__namespace.default.createElement(
+  ), onCreateEvent && /* @__PURE__ */ React15__namespace.default.createElement("div", { className: "relative group hidden sm:block" }, /* @__PURE__ */ React15__namespace.default.createElement(
     Button,
     {
       onClick: onCreateEvent,
-      className: "h-9 px-4 rounded-xl text-sm font-medium hidden sm:inline-flex gap-1.5 shadow-sm shadow-primary/20 transition-all duration-200"
+      size: "icon",
+      className: "h-9 w-9 rounded-xl shadow-sm shadow-primary/20 transition-all duration-200"
     },
-    /* @__PURE__ */ React15__namespace.default.createElement(lucideReact.Plus, { className: "h-4 w-4" }),
-    /* @__PURE__ */ React15__namespace.default.createElement("span", null, translations.createEvent ?? translations.create)
-  ), /* @__PURE__ */ React15__namespace.default.createElement("div", { className: "flex items-center bg-muted/40 rounded-xl p-0.5" }, /* @__PURE__ */ React15__namespace.default.createElement(
+    /* @__PURE__ */ React15__namespace.default.createElement(lucideReact.Plus, { className: "h-4 w-4" })
+  ), /* @__PURE__ */ React15__namespace.default.createElement("div", { className: "pointer-events-none absolute left-1/2 -translate-x-1/2 top-full mt-2 z-50 opacity-0 group-hover:opacity-100 transition-opacity duration-150" }, /* @__PURE__ */ React15__namespace.default.createElement("div", { className: "bg-popover text-popover-foreground text-xs font-medium px-2.5 py-1.5 rounded-lg shadow-md border border-border/60 whitespace-nowrap" }, translations.createEvent ?? translations.create), /* @__PURE__ */ React15__namespace.default.createElement("div", { className: "absolute -top-1 left-1/2 -translate-x-1/2 w-2 h-2 bg-popover border-l border-t border-border/60 rotate-45" }))), /* @__PURE__ */ React15__namespace.default.createElement("div", { className: "flex items-center bg-muted/40 rounded-xl p-0.5" }, /* @__PURE__ */ React15__namespace.default.createElement(
     Button,
     {
       variant: "ghost",
@@ -1633,7 +1635,7 @@ var CalendarHeader = ({
       className: "rounded-lg h-8 w-8 hover:bg-background/80 transition-all duration-200"
     },
     /* @__PURE__ */ React15__namespace.default.createElement(lucideReact.ChevronRight, { className: "h-4 w-4 text-muted-foreground" })
-  )), /* @__PURE__ */ React15__namespace.default.createElement("div", { className: "ml-2 md:ml-4 hidden sm:block" }, /* @__PURE__ */ React15__namespace.default.createElement("h2", { className: "text-lg md:text-xl font-semibold text-foreground whitespace-nowrap capitalize tracking-tight" }, dateFns.format(currentDate, "MMMM yyyy", { locale })))), /* @__PURE__ */ React15__namespace.default.createElement("div", { className: "sm:hidden" }, /* @__PURE__ */ React15__namespace.default.createElement("h2", { className: "text-lg font-semibold text-foreground whitespace-nowrap capitalize tracking-tight" }, dateFns.format(currentDate, "MMMM yyyy", { locale })))), /* @__PURE__ */ React15__namespace.default.createElement("div", { className: "flex items-center gap-2 md:gap-3 w-full md:w-auto justify-end" }, onLanguageChange && /* @__PURE__ */ React15__namespace.default.createElement("div", { className: "relative" }, /* @__PURE__ */ React15__namespace.default.createElement(
+  )), /* @__PURE__ */ React15__namespace.default.createElement("div", { className: "ml-2 md:ml-4 hidden sm:block" }, /* @__PURE__ */ React15__namespace.default.createElement("h2", { className: "text-lg md:text-xl font-semibold text-foreground whitespace-nowrap capitalize tracking-tight" }, dateFns.format(currentDate, "MMMM yyyy", { locale })))), /* @__PURE__ */ React15__namespace.default.createElement("div", { className: "sm:hidden" }, /* @__PURE__ */ React15__namespace.default.createElement("h2", { className: "text-lg font-semibold text-foreground whitespace-nowrap capitalize tracking-tight" }, dateFns.format(currentDate, "MMMM yyyy", { locale })))), /* @__PURE__ */ React15__namespace.default.createElement("div", { className: "flex items-center gap-2 md:gap-3 w-full md:w-auto justify-end" }, onLanguageChange && !hideLanguageSwitcher && /* @__PURE__ */ React15__namespace.default.createElement("div", { className: "relative" }, /* @__PURE__ */ React15__namespace.default.createElement(
     "button",
     {
       ref: langButtonRef,
@@ -1687,6 +1689,14 @@ var CalendarHeader = ({
       onClick: onThemeToggle
     },
     isDarkMode ? /* @__PURE__ */ React15__namespace.default.createElement(lucideReact.Sun, { className: "h-4 w-4 text-amber-500" }) : /* @__PURE__ */ React15__namespace.default.createElement(lucideReact.Moon, { className: "h-4 w-4 text-muted-foreground" })
+  ), typeof eventCount === "number" && !hideViewSwitcher && /* @__PURE__ */ React15__namespace.default.createElement(
+    "div",
+    {
+      className: "flex items-center gap-1.5 h-8 px-3 rounded-xl bg-primary/10 text-primary text-xs font-semibold tabular-nums select-none border border-primary/20 shadow-sm shadow-primary/10",
+      title: `${eventCount} event${eventCount !== 1 ? "s" : ""}`
+    },
+    /* @__PURE__ */ React15__namespace.default.createElement(lucideReact.CalendarCheck2, { className: "w-3.5 h-3.5 shrink-0" }),
+    /* @__PURE__ */ React15__namespace.default.createElement("span", null, eventCount)
   ), !hideViewSwitcher && /* @__PURE__ */ React15__namespace.default.createElement("div", { className: "flex items-center bg-muted/50 backdrop-blur-sm rounded-xl p-1 gap-0.5" }, viewConfig.map(({ key, icon: Icon }) => /* @__PURE__ */ React15__namespace.default.createElement(
     Button,
     {
@@ -4140,6 +4150,7 @@ var Scheduler = ({
   onThemeToggle,
   translations,
   hideViewSwitcher,
+  hideLanguageSwitcher,
   initialScrollHour = 8,
   reverseTime: reverseTimeProp = false,
   language = "tr",
@@ -4290,6 +4301,34 @@ var Scheduler = ({
       return activeCalendarIds.includes(e.calendarId);
     });
   }, [expandedEvents, calendars]);
+  const viewEventCount = React15.useMemo(() => {
+    let rangeStart;
+    let rangeEnd;
+    switch (view) {
+      case "month":
+        rangeStart = dateFns.startOfMonth(currentDate);
+        rangeEnd = dateFns.endOfMonth(currentDate);
+        break;
+      case "week":
+        rangeStart = dateFns.startOfWeek(currentDate, { weekStartsOn: 1 });
+        rangeEnd = dateFns.endOfWeek(currentDate, { weekStartsOn: 1 });
+        break;
+      case "day":
+      case "resource":
+        rangeStart = dateFns.startOfDay(currentDate);
+        rangeEnd = dateFns.endOfDay(currentDate);
+        break;
+      case "agenda":
+        rangeStart = dateFns.startOfDay(currentDate);
+        rangeEnd = dateFns.addDays(rangeStart, 30);
+        break;
+      default:
+        return filteredEvents.length;
+    }
+    return filteredEvents.filter(
+      (e) => e.start >= rangeStart && e.start <= rangeEnd
+    ).length;
+  }, [filteredEvents, view, currentDate]);
   return /* @__PURE__ */ React15__namespace.default.createElement(React15__namespace.default.Fragment, null, /* @__PURE__ */ React15__namespace.default.createElement(
     core.DndContext,
     {
@@ -4344,7 +4383,9 @@ var Scheduler = ({
           onCustomViewChange: (id2) => {
             setActiveCustomViewId(id2);
             setActiveCustomMenu(null);
-          }
+          },
+          eventCount: viewEventCount,
+          hideLanguageSwitcher
         }
       ),
       /* @__PURE__ */ React15__namespace.default.createElement("div", { className: "flex flex-1 overflow-hidden" }, /* @__PURE__ */ React15__namespace.default.createElement(