@tuturuuu/ui 0.38.0 → 0.39.0

package/src/components/ui/legacy/calendar/all-day-event-layout.test.ts

@@ -0,0 +1,94 @@
+import { isAllDayEvent } from '@tuturuuu/utils/calendar-utils';
+import { describe, expect, it } from 'vitest';
+import { calculateAllDayEventLayout } from './all-day-event-layout';
+
+const date = (day: number) => new Date(2030, 0, day);
+describe('all-day civil spans', () => {
+  it.each([
+    'America/Los_Angeles',
+    'Pacific/Honolulu',
+    'Asia/Ho_Chi_Minh',
+    'Pacific/Kiritimati',
+  ])('retains UTC date-only import civil dates in %s', (zone) => {
+    const layout = calculateAllDayEventLayout(
+      [
+        {
+          id: 'synthetic',
+          title: 'Synthetic span',
+          start_at: '2030-01-15T00:00:00Z',
+          end_at: '2030-01-17T00:00:00Z',
+        },
+      ],
+      [date(14), date(15), date(16), date(17)],
+      zone,
+      []
+    );
+    expect(
+      layout.spans.map(({ startIndex, endIndex }) => [startIndex, endIndex])
+    ).toEqual([[1, 2]]);
+  });
+});
+
+it.each([
+  ['2026-03-08T05:00:00Z', '2026-03-09T04:00:00Z', 8],
+  ['2026-11-01T04:00:00Z', '2026-11-02T05:00:00Z', 1],
+])(
+  'renders DST all-day midnights without fixed 24-hour arithmetic (%s)',
+  (start_at, end_at, day) => {
+    const event = {
+      id: 'synthetic-dst',
+      title: 'Synthetic DST',
+      start_at: start_at as string,
+      end_at: end_at as string,
+    };
+    const month = day === 8 ? 2 : 10;
+    const dates = [
+      new Date(2026, month, Number(day) - 1),
+      new Date(2026, month, Number(day)),
+      new Date(2026, month, Number(day) + 1),
+    ];
+    expect(isAllDayEvent(event, 'America/New_York')).toBe(true);
+    expect(
+      calculateAllDayEventLayout(
+        [event],
+        dates,
+        'America/New_York',
+        []
+      ).spans.map(({ startIndex, endIndex }) => [startIndex, endIndex])
+    ).toEqual([[1, 1]]);
+  }
+);
+it('clips a long span with an exclusive end and retains cutoff flags', () => {
+  const layout = calculateAllDayEventLayout(
+    [
+      {
+        id: 'synthetic-long',
+        title: 'Synthetic long',
+        start_at: '2029-12-01T00:00:00Z',
+        end_at: '2030-02-01T00:00:00Z',
+      },
+    ],
+    [date(15), date(16), date(17)],
+    'America/Los_Angeles',
+    []
+  );
+  expect(layout.spans[0]).toMatchObject({
+    startIndex: 0,
+    endIndex: 2,
+    isCutOffStart: true,
+    isCutOffEnd: true,
+  });
+});
+it('ignores invalid ranges and exclusive-end-only contact', () => {
+  const events = [
+    { id: 'invalid', start_at: 'invalid', end_at: 'invalid' },
+    {
+      id: 'ended',
+      start_at: '2030-01-14T00:00:00Z',
+      end_at: '2030-01-15T00:00:00Z',
+    },
+  ];
+  expect(
+    calculateAllDayEventLayout(events, [date(15)], 'Pacific/Honolulu', []).spans
+  ).toEqual([]);
+});

package/src/components/ui/legacy/calendar/all-day-event-layout.ts

@@ -0,0 +1,322 @@
+import type { CalendarEvent } from '@tuturuuu/types/primitives/calendar-event';
+import { allDayEventCivilDates } from '@tuturuuu/utils/calendar-utils';
+import dayjs from 'dayjs';
+import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
+import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
+import timezone from 'dayjs/plugin/timezone';
+import utc from 'dayjs/plugin/utc';
+import { calendarDayKey } from '../../../../lib/calendar-day';
+import { getEventLocationType } from './working-location';
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+dayjs.extend(isSameOrAfter);
+dayjs.extend(isSameOrBefore);
+export const MAX_EVENTS_DISPLAY = 2;
+function getZonedDay(date: Date, _zone?: string) {
+  return dayjs(date).startOf('day');
+}
+export interface EventSpan {
+  event: CalendarEvent;
+  startIndex: number;
+  endIndex: number;
+  span: number;
+  isCutOffStart: boolean; // Event starts before visible range
+  isCutOffEnd: boolean; // Event ends after visible range
+  actualStartDate: dayjs.Dayjs; // Actual start date of the event
+  actualEndDate: dayjs.Dayjs; // Actual end date of the event
+  row: number; // Add row property for proper stacking
+  isMerged?: boolean;
+  mergedEventIds?: string[];
+}
+
+export interface EventLayout {
+  spans: EventSpan[];
+  maxVisibleEventsPerDay: number;
+  eventsByDay: EventSpan[][];
+  locationSpansFromMerge: EventSpan[];
+}
+
+export function calculateAllDayEventLayout(
+  allDayEvents: CalendarEvent[],
+  visibleDates: Date[],
+  tz: string | undefined,
+  expandedDates: string[]
+): EventLayout {
+  const spans: EventSpan[] = [];
+  const eventsByDay: EventSpan[][] = Array(visibleDates.length)
+    .fill(null)
+    .map(() => []);
+
+  // First pass: create event spans without row assignment
+  const tempSpans: Omit<EventSpan, 'row'>[] = [];
+
+  // Process each all-day event
+  (visibleDates.length ? allDayEvents : []).forEach((event) => {
+    const civilDates = allDayEventCivilDates(event, tz);
+    if (!civilDates) return;
+    const eventStart = dayjs(civilDates.start);
+    const eventEnd = dayjs(civilDates.end);
+
+    // Find the start and end indices within our visible dates
+    let startIndex = -1;
+    let endIndex = -1;
+
+    // First pass: find any overlap with visible dates
+    const firstVisibleDate = getZonedDay(visibleDates[0]!, tz);
+    const lastVisibleDate = getZonedDay(
+      visibleDates[visibleDates.length - 1]!,
+      tz
+    );
+
+    // Check if event overlaps with our visible date range at all
+    // Event overlaps if: event_start < visible_end AND event_end > visible_start
+    const eventOverlaps =
+      eventStart.isBefore(lastVisibleDate.add(1, 'day'), 'day') &&
+      eventEnd.isAfter(firstVisibleDate, 'day');
+
+    if (!eventOverlaps) {
+      return; // Skip this event if it doesn't overlap with visible dates
+    }
+
+    // Improved logic for multi-day events
+    // Start index: first visible date that overlaps with the event
+    if (eventStart.isSameOrBefore(firstVisibleDate, 'day')) {
+      // Event starts before or on the first visible date
+      startIndex = 0;
+    } else {
+      // Find the first visible date that matches the event start
+      for (let i = 0; i < visibleDates.length; i++) {
+        const currentDate = getZonedDay(visibleDates[i]!, tz);
+        if (
+          currentDate.isSameOrAfter(eventStart, 'day') &&
+          currentDate.isBefore(eventEnd, 'day')
+        ) {
+          startIndex = i;
+          break;
+        }
+      }
+    }
+
+    // End index: last visible date that overlaps with the event
+    if (eventEnd.isAfter(lastVisibleDate.add(1, 'day'), 'day')) {
+      // Event ends after the last visible date
+      endIndex = visibleDates.length - 1;
+    } else {
+      // Find the last visible date that the event covers
+      for (let i = visibleDates.length - 1; i >= 0; i--) {
+        const currentDate = getZonedDay(visibleDates[i]!, tz);
+        if (
+          currentDate.isBefore(eventEnd, 'day') &&
+          currentDate.isSameOrAfter(eventStart, 'day')
+        ) {
+          endIndex = i;
+          break;
+        }
+      }
+    }
+
+    // Include events that have at least one day visible in our date range
+    if (startIndex !== -1 && endIndex !== -1) {
+      const span = endIndex - startIndex + 1;
+
+      // Fix: Proper cut-off logic for all-day events
+      // For all-day events, end_at is typically start of next day (exclusive)
+      // So we need to check actual duration, not just date comparison
+      const actualDurationDays = eventEnd.diff(eventStart, 'day');
+      const isActuallyMultiDay = actualDurationDays > 1;
+
+      // Only show cut-off indicators for events that actually span multiple days
+      // AND are cut off by the visible range
+      const isCutOffStart =
+        isActuallyMultiDay && eventStart.isBefore(firstVisibleDate, 'day');
+      const isCutOffEnd =
+        isActuallyMultiDay &&
+        eventEnd.isAfter(lastVisibleDate.add(1, 'day'), 'day');
+
+      const eventSpan: Omit<EventSpan, 'row'> = {
+        event,
+        startIndex,
+        endIndex,
+        span,
+        // Add indicators for cut-off events
+        isCutOffStart,
+        isCutOffEnd,
+        actualStartDate: eventStart,
+        actualEndDate: eventEnd,
+      };
+
+      tempSpans.push(eventSpan);
+    }
+  });
+
+  // Second pass: Merge consecutive SINGLE-DAY events with same title and color
+  // Optimized O(n log n) approach: group by mergeKey, sort groups, linear scan per group
+  const mergedTempSpans: Omit<EventSpan, 'row'>[] = [];
+
+  // Group single-day spans by mergeKey; multi-day events go directly to output
+  const groups = new Map<string, Omit<EventSpan, 'row'>[]>();
+
+  for (const span of tempSpans) {
+    if (span.span !== 1) {
+      // Multi-day events - don't merge, just add directly
+      mergedTempSpans.push(span);
+      continue;
+    }
+
+    const mergeKey = `${(span.event.title ?? '').toLowerCase().trim()}|${span.event.color ?? 'BLUE'}`;
+    const group = groups.get(mergeKey) ?? [];
+    group.push(span);
+    groups.set(mergeKey, group);
+  }
+
+  // Process each group with linear merge
+  for (const [, group] of groups) {
+    // Sort by startIndex (O(k log k) per group, where k is group size)
+    group.sort((a, b) => a.startIndex - b.startIndex);
+
+    let currentMerged: Omit<EventSpan, 'row'> | null = null;
+    let mergedIds: string[] = [];
+
+    for (const span of group) {
+      if (!currentMerged) {
+        // Start a new potential merge chain
+        currentMerged = { ...span };
+        mergedIds = [span.event.id];
+      } else if (span.startIndex === currentMerged.endIndex + 1) {
+        // Adjacent - extend the merge
+        currentMerged.endIndex = span.endIndex;
+        currentMerged.span =
+          currentMerged.endIndex - currentMerged.startIndex + 1;
+        currentMerged.isCutOffEnd =
+          currentMerged.isCutOffEnd || span.isCutOffEnd;
+        currentMerged.actualEndDate = currentMerged.actualEndDate.isAfter(
+          span.actualEndDate
+        )
+          ? currentMerged.actualEndDate
+          : span.actualEndDate;
+        mergedIds.push(span.event.id);
+      } else {
+        // Gap - push current merged span and start a new one
+        if (mergedIds.length > 1) {
+          currentMerged.isMerged = true;
+          currentMerged.mergedEventIds = mergedIds;
+        }
+        mergedTempSpans.push(currentMerged);
+        currentMerged = { ...span };
+        mergedIds = [span.event.id];
+      }
+    }
+
+    // Push the final merged span from this group
+    if (currentMerged) {
+      if (mergedIds.length > 1) {
+        currentMerged.isMerged = true;
+        currentMerged.mergedEventIds = mergedIds;
+      }
+      mergedTempSpans.push(currentMerged);
+    }
+  }
+
+  // Sort final output by startIndex for consistent ordering
+  mergedTempSpans.sort((a, b) => a.startIndex - b.startIndex);
+
+  // Third pass: assign rows (ONLY for non-location events)
+  // Location events will be rendered separately as a compact timeline strip
+  // Extract location spans before filtering them out for row assignment
+  const locationSpansFromMerge = mergedTempSpans
+    .filter((span) => getEventLocationType(span.event) !== null)
+    .map((span) => ({ ...span, row: 0 })); // Give them row 0 as placeholder
+
+  const nonLocationSpans = mergedTempSpans.filter(
+    (span) => getEventLocationType(span.event) === null
+  );
+
+  // Sort: 1) by span length (longer events first for better packing), 2) by start date
+  const sortedTempSpans = nonLocationSpans.sort((a, b) => {
+    // Longer events first (they need to claim their full row first)
+    const spanDiff = b.span - a.span;
+    if (spanDiff !== 0) return spanDiff;
+
+    // Then by start date
+    return a.actualStartDate.diff(b.actualStartDate);
+  });
+
+  // Track occupied rows for each day
+  const occupiedRows: boolean[][] = Array(visibleDates.length)
+    .fill(null)
+    .map(() => []);
+
+  // Assign rows to events
+  sortedTempSpans.forEach((tempSpan) => {
+    // Find the first available row that works for all days this event spans
+    let row = 0;
+    let rowFound = false;
+
+    while (!rowFound) {
+      // Check if this row is available for all days the event spans
+      let canUseRow = true;
+      for (
+        let dayIndex = tempSpan.startIndex;
+        dayIndex <= tempSpan.endIndex;
+        dayIndex++
+      ) {
+        if (occupiedRows[dayIndex]?.[row]) {
+          canUseRow = false;
+          break;
+        }
+      }
+
+      if (canUseRow) {
+        // Mark this row as occupied for all days the event spans
+        for (
+          let dayIndex = tempSpan.startIndex;
+          dayIndex <= tempSpan.endIndex;
+          dayIndex++
+        ) {
+          if (!occupiedRows[dayIndex]) {
+            occupiedRows[dayIndex] = [];
+          }
+          occupiedRows[dayIndex]![row] = true;
+        }
+        rowFound = true;
+      } else {
+        row++;
+      }
+    }
+
+    // Create the final event span with row assignment
+    const eventSpan: EventSpan = {
+      ...tempSpan,
+      row,
+    };
+
+    spans.push(eventSpan);
+
+    // Add this event to each day it spans
+    for (let i = tempSpan.startIndex; i <= tempSpan.endIndex; i++) {
+      eventsByDay[i]?.push(eventSpan);
+    }
+  });
+
+  // Calculate max visible events per day for layout purposes
+  let maxVisibleEventsPerDay = 0;
+  eventsByDay.forEach((dayEvents, dayIndex) => {
+    const dateKey = calendarDayKey(visibleDates[dayIndex]!);
+
+    const shouldShowAll = dayEvents.length === MAX_EVENTS_DISPLAY + 1;
+    const isExpanded = expandedDates.includes(dateKey) || shouldShowAll;
+    const visibleCount = isExpanded
+      ? dayEvents.length
+      : Math.min(dayEvents.length, MAX_EVENTS_DISPLAY);
+
+    maxVisibleEventsPerDay = Math.max(maxVisibleEventsPerDay, visibleCount);
+  });
+
+  return {
+    spans,
+    maxVisibleEventsPerDay,
+    eventsByDay,
+    locationSpansFromMerge,
+  };
+}

package/src/components/ui/legacy/calendar/calendar-views.test.tsx

@@ -215,34 +215,65 @@ describe('calendar view interactions', () => {
 });
 
 describe('calendar view opaque effective colors', () => {
-  it('preserves borderline provider contrast with a visible month hover ring', () => {
-    state.events = [
-      {
-        id: 'borderline-rgb',
-        title: 'Borderline RGB',
-        color: 'BLUE',
-        start_at: new Date(2026, 8, 7, 10).toISOString(),
-        end_at: new Date(2026, 8, 7, 11).toISOString(),
-        scheduling_metadata: {
-          google_color: { version: 1, inherited: false, background: '#757575' },
+  it.each([false, true])(
+    'preserves provider contrast and accessible month treatment, past=%s',
+    (past) => {
+      vi.useFakeTimers({ toFake: ['Date'] });
+      vi.setSystemTime(new Date(2026, 8, past ? 8 : 7, 9));
+      state.events = [
+        {
+          id: 'borderline-rgb',
+          title: 'Borderline RGB',
+          color: 'BLUE',
+          start_at: new Date(2026, 8, 7, 10).toISOString(),
+          end_at: new Date(2026, 8, 7, 11).toISOString(),
+          scheduling_metadata: {
+            google_color: {
+              version: 1,
+              inherited: false,
+              background: '#757575',
+            },
+          },
         },
-      },
-    ];
-    render(<MonthCalendar date={date} viewedMonth={date} locale="en" />);
-    const card = screen.getByRole('button', { name: /Borderline RGB/ });
-    expect(card.style.backgroundColor).toBe('rgb(117, 117, 117)');
-    expect(card.style.color).toBe('rgb(255, 255, 255)');
-    fireEvent.mouseEnter(card);
-    expect(card).toHaveClass('hover:ring-1', 'hover:ring-current');
-    expect(card.className).not.toMatch(/(?:brightness|opacity)-/);
-    expect(card.style.filter).toBe('');
-    expect(card.style.backgroundColor).toBe('rgb(117, 117, 117)');
-    expect(card.style.color).toBe('rgb(255, 255, 255)');
-    const luminance = ((117 / 255 + 0.055) / 1.055) ** 2.4;
-    expect(1.05 / (luminance + 0.05)).toBeGreaterThanOrEqual(4.5);
-    fireEvent.click(card);
-    expect(state.openModal).toHaveBeenCalledWith('borderline-rgb');
-  });
+      ];
+      render(<MonthCalendar date={date} viewedMonth={date} locale="en" />);
+      const card = screen.getByRole('button', { name: /Borderline RGB/ });
+      expect(card.style.backgroundColor).toBe('rgb(117, 117, 117)');
+      expect(card.style.color).toBe('rgb(255, 255, 255)');
+      fireEvent.mouseEnter(card);
+      expect(card).toHaveClass('hover:ring-1', 'hover:ring-current');
+      const wholeCardDimming = card.className.split(/\s+/).filter((token) => {
+        const variants = token.split(':');
+        return (
+          !variants.includes('after') &&
+          /^(?:brightness|opacity)-/.test(variants.at(-1) ?? '')
+        );
+      });
+      expect(wholeCardDimming).toEqual([]);
+      expect(card.style.opacity).toBe('');
+      expect(card).toHaveClass(
+        'focus-visible:outline-2',
+        'focus-visible:outline-ring'
+      );
+      if (past) {
+        expect(card).toHaveClass(
+          'after:bg-background/50',
+          'after:pointer-events-none',
+          'hover:after:opacity-0',
+          'focus-visible:after:opacity-0'
+        );
+      } else {
+        expect(card).not.toHaveClass('after:bg-background/50');
+      }
+      expect(card.style.filter).toBe('');
+      expect(card.style.backgroundColor).toBe('rgb(117, 117, 117)');
+      expect(card.style.color).toBe('rgb(255, 255, 255)');
+      const luminance = ((117 / 255 + 0.055) / 1.055) ** 2.4;
+      expect(1.05 / (luminance + 0.05)).toBeGreaterThanOrEqual(4.5);
+      fireEvent.click(card);
+      expect(state.openModal).toHaveBeenCalledWith('borderline-rgb');
+    }
+  );
 
   it.each([false, true])(
     'uses provider RGB in month and agenda, inherited=%s',

package/src/components/ui/legacy/calendar/event-card.test.tsx

@@ -113,6 +113,30 @@ describe('EventCard read-only adapter events', () => {
     expect(card.style.opacity).toBe('1');
   });
 
+  it('fades past first-party cards above an opaque fill and restores on hover/focus', () => {
+    calendarMocks.preservePastEventOpacity = false;
+    renderEventCard({
+      id: 'past-native',
+      title: 'Past event',
+      color: 'BLUE',
+      start_at: '2026-06-26T08:30:00Z',
+      end_at: '2026-06-26T09:30:00Z',
+    });
+    const card = screen.getByTestId('calendar-event-past-native');
+    expect(card.style.opacity).toBe('1');
+    expect(card.style.backgroundColor).toBe('rgb(33, 150, 243)');
+    expect(card).toHaveClass(
+      'after:bg-background/50',
+      'hover:after:opacity-0',
+      'focus-visible:after:opacity-0'
+    );
+    fireEvent.mouseEnter(card);
+    expect(card.style.opacity).toBe('1');
+    expect(card).toHaveClass('hover:after:opacity-0');
+    fireEvent.mouseLeave(card);
+    expect(card).toHaveClass('after:bg-background/50');
+  });
+
   it('updates the same mounted card when only provider metadata changes', () => {
     const event: CalendarEvent = {
       id: 'metadata-rerender',
@@ -176,7 +200,7 @@ describe('EventCard read-only adapter events', () => {
     expect(card.style.visibility).toBe('hidden');
     expect(card.style.backgroundColor).toBe('rgb(0, 255, 136)');
     expect(card.className).not.toMatch(/opacity-(?:30|50|60|80)/);
-    expect(card).toHaveClass('line-through');
+    expect(card).not.toHaveClass('line-through');
     rendered.unmount();
     calendarMocks.hoveredBaseEventId = null;
     calendarMocks.hoveredEventColumn = null;

package/src/components/ui/legacy/calendar/event-card.tsx

@@ -37,6 +37,7 @@ import {
 } from '../../context-menu';
 import { GRID_SNAP, HOUR_HEIGHT, MAX_HOURS, MIN_EVENT_HEIGHT } from './config';
 import { CalendarEventProviderIcon } from './event-provider-display';
+import { pastEventTreatment } from './past-event-treatment';
 import { useCalendarSettings } from './settings/settings-context';
 
 dayjs.extend(timezone);
@@ -67,7 +68,6 @@ function EventCardComponent({ dates, event, level = 0 }: EventCardProps) {
     title,
     description,
     // start_at,
-    end_at,
     color = 'BLUE',
     locked = false,
     _isMultiDay,
@@ -957,9 +957,6 @@ function EventCardComponent({ dates, event, level = 0 }: EventCardProps) {
     return d.format(timeFormat === '24h' ? 'HH:mm' : 'h:mm a');
   };
 
-  // Check if the event is in the past
-  const isPastEvent = new Date(end_at) < new Date();
-
   // Check if this event is affected by preview (will be modified/deleted)
   const isAffectedByPreview =
     affectedEventIds?.has(id) || affectedEventIds?.has(event._originalId || '');
@@ -1005,7 +1002,6 @@ function EventCardComponent({ dates, event, level = 0 }: EventCardProps) {
       });
   };
 
-  // Determine if this event has calendar source info
   const hasCalendarInfo =
     google_calendar_id && google_calendar_id !== 'primary';
   const calendarDisplayName =
@@ -1014,8 +1010,6 @@ function EventCardComponent({ dates, event, level = 0 }: EventCardProps) {
       ? 'Primary Calendar'
       : google_calendar_id);
 
-  // Calculate stacking position for visual effects
-  // Note: Actual column-based positioning is handled in the useEffect
   const hasOverlaps = overlapCount > 1;
 
   // Check if an event in the same group is being hovered
@@ -1051,10 +1045,6 @@ function EventCardComponent({ dates, event, level = 0 }: EventCardProps) {
               'transform shadow-md': isDragging || isResizing, // Subtle transform during interaction
               'shadow-sm': hasOverlaps && !isDragging && !isResizing, // Subtle shadow for stacked events
               'hover:shadow-md': hasOverlaps, // Enhanced shadow on hover for stacked events
-              'line-through':
-                isPastEvent &&
-                !isAffectedByPreview &&
-                !preservePastEventOpacity, // Mark past events in the text
               'rounded-l-none border-l-4': showStartIndicator, // Special styling for continuation from previous day
               'rounded-r-none border-r-4': showEndIndicator, // Special styling for continuation to next day
               'border-l-[3px]': hasCalendarInfo, // Thicker border for calendar events
@@ -1068,7 +1058,15 @@ function EventCardComponent({ dates, event, level = 0 }: EventCardProps) {
                 isOptimisticallyPending && !isOptimisticallyMutating,
             },
             level ? 'border border-l-2' : 'border-l-2',
-            border
+            border,
+            pastEventTreatment(
+              event,
+              preservePastEventOpacity,
+              isDragging ||
+                isResizing ||
+                !!isAffectedByPreview ||
+                updateStatus === 'error'
+            )
           )}
           style={{
             transition:

package/src/components/ui/legacy/calendar/event-modal-header.tsx

@@ -6,6 +6,8 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@tuturuuu/ui/dialog';
+import { isProviderRecurrenceReadonly } from '@tuturuuu/utils/calendar-provider-readonly';
+import { useTranslations } from 'next-intl';
 import { getCalendarMeetingUrl } from './calendar-meeting-link';
 import {
   CalendarEventProviderIcon,
@@ -19,19 +21,28 @@ export function EventModalHeader({
   event: Partial<CalendarEvent>;
   isEditing: boolean;
 }) {
+  const t = useTranslations('calendar.recurrence');
+  const readonly = isProviderRecurrenceReadonly(event);
   const providerDisplay = getCalendarEventProviderDisplay(event);
   const meetingUrl = getCalendarMeetingUrl(event);
 
   return (
     <DialogHeader className="border-b px-6 pt-6 pb-4">
       <DialogTitle className="flex flex-wrap items-center gap-2 font-semibold text-xl">
-        <span>{isEditing ? 'Edit Event' : 'Create Event'}</span>
+        <span>
+          {readonly ? event.title : isEditing ? 'Edit Event' : 'Create Event'}
+        </span>
         {providerDisplay && (
           <span className="ml-3 flex items-center gap-2 rounded-md border bg-muted/40 px-3 py-1 text-sm">
             <CalendarEventProviderIcon className="h-4.5 w-4.5" event={event} />
             <span className="font-medium text-xs">{providerDisplay.label}</span>
           </span>
         )}
+        {readonly && (
+          <span className="rounded-md border bg-muted px-2 py-1 text-xs">
+            {t('provider_readonly')}
+          </span>
+        )}
         {meetingUrl && (
           <Button asChild className="ml-auto" size="sm" variant="outline">
             <a href={meetingUrl} rel="noreferrer" target="_blank">
@@ -43,9 +54,11 @@ export function EventModalHeader({
         )}
       </DialogTitle>
       <DialogDescription>
-        {isEditing
-          ? 'Make changes to your existing event'
-          : 'Add a new event to your calendar'}
+        {readonly
+          ? t('provider_readonly_description')
+          : isEditing
+            ? 'Make changes to your existing event'
+            : 'Add a new event to your calendar'}
       </DialogDescription>
     </DialogHeader>
   );