@chenzy-design/svelte 0.3.1 → 0.4.1

package/dist/calendar/Calendar.svelte

@@ -1,1344 +1,1100 @@
 <!--
-  Calendar — see specs/components/show/Calendar.spec.md
-  月/周/日视图日历：日格网格 + 事件展示与 +N 折叠，today/selected/outside/weekend/disabled 态。
-  mode='month'(6×7) | 'week'(1×7) | 'day'(单日时间轴，纵向小时段)；selectionMode='single'(选中日) | 'range'(范围选择，起止+区间高亮+hover 预览)。
-  day 模式：dayStartHour~dayEndHour 逐小时一行，带时间事件按起始小时入对应时段、全天/跨天延续事件入顶部「全天」区（纯派生 timelineForDay，纯 CSS 布局）。
-  受控 value(锚点)/selectedDate/rangeValue 不回写，仅 onChange/onSelect/onRangeChange/onDateClick/onMoreClick 通知。
-  复用 @chenzy-design/core 的纯日期/分组算法（getMonthGrid/getWeekGrid/getDayHours/addMonths/addWeeks/addDays/timelineForDay/gridFocusMove…），不重复实现。
-  roving 键盘焦点：网格内仅活动格 tabindex=0，方向键(←→天/↑↓周/PageUp-Down月/Home-End周首末)移动焦点，跨月/周自动翻页并落焦，Enter/Space 选中（纯 gridFocusMove 派生 + 命令式 focus）。
-  popup 弹层模式：渲染 trigger，日历门户浮出（复用 _floating），外部点击/Esc 关闭(useDismiss)并归还焦点。
-  虚拟化：day 视图小时时间轴按阈值用 core fixedRange 视口渲染（滚动监听命令式 + cleanup，红线 #3）。
+  Calendar — 纯事件展示日历，DOM 结构与 class 名完全照搬 Semi Design Calendar（semi-calendar → cd-calendar）。
+  四视图 mode='day'|'week'|'month'|'range'，分别对齐 Semi 的 dayCalendar/weekCalendar/monthCalendar/rangeCalendar：
+   - day：cd-calendar-day(overflow:auto) > day-sticky-top(header + all-day) + day-scroll-wrapper > day-scroll > (time + grid)
+   - week/range：cd-calendar-week > week-sticky-top(header + week-header + all-day) + week-scroll-wrapper > week-scroll > (time + N×grid)
+   - month：cd-calendar-month > month-sticky-top(header + month-header) + month-grid-wrapper > month-week > grid-col > N×month-weekrow
+  displayValue 决定展示锚点；onClick 回调点击的精确时间点（日/周精确到半小时，月精确到日）。
+  事件定位全部来自 @chenzy-design/core 的纯算法；事件内容由 event.children 承载（字符串直出 / snippet @render），对齐 Semi children。
+  头部对齐 Semi：无默认导航，仅当传入 header snippet 时渲染自定义头部。
 -->
 <script lang="ts">
-  import { untrack, tick, type Snippet } from 'svelte';
+  import type { Snippet } from 'svelte';
   import {
+    getDailyEvents,
+    parseWeekSpanEvents,
+    parseSpanEvents,
+    allDayEventMap,
+    calcRowHeight,
+    getMonthEvents,
+    parseEvents,
+    startOfWeek,
+    addDaysLocal,
+    differenceInCalendarDays,
+    isSameDay,
+    isSameMonth,
+    isWeekend,
+    getPos,
     getMonthGrid,
-    getWeekGrid,
-    getDayHours,
     weekdayOrder,
-    isSameDay,
-    startOfDay,
-    addMonths,
-    addWeeks,
-    addDays,
-    groupEventsByDays,
-    timelineForDay,
-    dayKey,
-    isPastDay,
-    gridFocusMove,
-    fixedRange,
-    useDismiss,
-    useLiveAnnouncer,
-    type GridFocusKey,
     type CalendarEvent,
-    type Placement,
+    type PositionedDayEvent,
+    type PositionedSpanEvent,
+    type WeekStartsOn,
   } from '@chenzy-design/core';
-  import { floating } from '../_floating/use-floating.js';
   import { useLocale } from '../locale-provider/index.js';
+  import { Popover } from '../popover/index.js';
 
-  type WeekStart = 0 | 1 | 2 | 3 | 4 | 5 | 6;
-  type Mode = 'month' | 'week' | 'day';
-  type SelectionMode = 'single' | 'range';
-  type RangeValue = [Date, Date];
+  type Mode = 'day' | 'week' | 'month' | 'range';
 
   interface Props {
-    value?: Date;
-    defaultValue?: Date;
-    mode?: Mode;
-    selectionMode?: SelectionMode;
-    events?: CalendarEvent[];
-    weekStartsOn?: WeekStart;
-    maxEventsPerDay?: number;
-    dayStartHour?: number;
-    dayEndHour?: number;
-    weekendDays?: number[];
-    markWeekend?: boolean;
-    disabledDate?: (date: Date) => boolean;
-    selectedDate?: Date;
-    defaultSelectedDate?: Date;
-    rangeValue?: RangeValue | null;
-    defaultRangeValue?: RangeValue | null;
-    locale?: string;
-    onChange?: (info: { value: Date }) => void;
-    onSelect?: (info: { date: Date }) => void;
-    onRangeChange?: (info: { range: RangeValue }) => void;
-    onDateClick?: (info: { date: Date }) => void;
-    onMoreClick?: (info: { date: Date; events: CalendarEvent[] }) => void;
-    /** 点击/键盘激活事件块（spec §a11y：事件块 role=button + Enter/Space 触发）。 */
-    onEventClick?: (info: { event: CalendarEvent; nativeEvent: Event }) => void;
-    /** 关闭回调（popup 模式） */
-    onClose?: () => void;
-    dateCell?: Snippet<
-      [{ date: Date; events: CalendarEvent[]; isToday: boolean; isOutside: boolean; disabled: boolean }]
-    >;
-    event?: Snippet<[{ event: CalendarEvent }]>;
-    /** 自定义头部内容，替换默认头部 */
+    /** 展示锚点日期，默认 new Date() */
+    displayValue?: Date;
+    /** mode='range' 时必传，左闭右开 [start, end) */
+    range?: [Date, Date];
+    /** 自定义头部内容（对齐 Semi header；缺省不渲染头部） */
     header?: Snippet;
-    /** 自定义单元格额外内容 (dateString: 'YYYY-MM-DD', date: Date) */
-    dateGridRender?: (dateString: string, date: Date) => Snippet | null | undefined;
-    /** 自定义全天事件区域渲染 */
-    allDayEventsRender?: (events: CalendarEvent[]) => Snippet | null | undefined;
-    /** 自定义时间文案 (hour: 0-23) */
-    renderTimeDisplay?: (hour: number) => string;
-    /** 自定义日期文案 */
-    renderDateDisplay?: (date: Date) => string;
-    /** 是否显示当前时间红线（day/week 视图，默认 true） */
+    /** 事件列表 */
+    events?: CalendarEvent[];
+    /** 视图模式，默认 'week' */
+    mode?: Mode;
+    /** 显示当前时间红线（日/周/多日视图），默认 true */
     showCurrTime?: boolean;
-    /** day/week 视图默认滚动高度（px，默认 400） */
+    /** 周起始，默认 0（周日） */
+    weekStartsOn?: WeekStartsOn;
+    /** 日/周视图默认滚动高度（px），默认 400 */
     scrollTop?: number;
-    /** 事件块最小高度（px） */
+    /** 区分周末列（灰底），默认 false */
+    markWeekend?: boolean;
+    /** 日/周/多日视图事件最小高度（px），默认 Number.MIN_SAFE_INTEGER */
     minEventHeight?: number;
     /** 日历整体宽度 */
     width?: number | string;
-    /** 日历整体高度 */
+    /** 日历整体高度，默认 600 */
     height?: number | string;
-    /** 范围选择的日期区间（mode='range' 时用于初始化，同 rangeValue） */
-    range?: [Date, Date] | null;
-    /** 受控展示锚点（Semi API: displayValue，等同于 value） */
-    displayValue?: Date;
-    ariaLabel?: string;
-    // --- 弹层模式 (popup) ---
-    /** 弹层模式：渲染 trigger，日历作为浮层弹出（复用 _floating 门户定位） */
-    popup?: boolean;
-    /** 受控展开态（popup 模式），受控时不回写仅 onOpenChange (红线 #1) */
-    open?: boolean;
-    /** 非受控初始展开态 */
-    defaultOpen?: boolean;
-    /** 展开态变化回调 */
-    onOpenChange?: (info: { open: boolean }) => void;
-    /** 浮层相对 trigger 的位置 */
-    placement?: Placement;
-    /** 浮层门户挂载容器（默认 document.body） */
-    getContainer?: () => HTMLElement | null | undefined;
-    /** trigger 自定义内容（popup 模式）；不传则渲染默认按钮显示标题 */
-    trigger?: Snippet<[{ open: boolean; toggle: () => void }]>;
-    // --- 虚拟化 (day 视图时间轴) ---
-    /**
-     * day 视图小时时间轴虚拟化：当行数 ≥ virtualizeThreshold 时仅渲染视口行。
-     * 'auto'（默认）按阈值自动；true 强制；false 关闭。
-     */
-    virtualizeDay?: boolean | 'auto';
-    /** 触发虚拟化的最少行数（virtualizeDay='auto' 时生效） */
-    virtualizeThreshold?: number;
-    /** day 视图时间轴视口高度（px，虚拟化时滚动容器高度） */
-    timelineViewportHeight?: number;
+    /** 点击日期格（对齐 Semi function(e, date)）：日/周视图精确到半小时，月视图精确到日 */
+    onClick?: (e: Event, date: Date) => void;
+    /** 月视图 +N 卡片关闭回调（对齐 Semi function(e)） */
+    onClose?: (e: Event) => void;
+    /** 月视图点「还有 N 项」回调（对齐 Semi function(e, date, remaining)） */
+    onMoreClick?: (e: Event, date: Date, remaining: number) => void;
+    /** 自定义日/周视图时间文案 */
+    renderTimeDisplay?: (hour: number) => unknown;
+    /** 自定义日期文案（week/range 视图日期头）。对齐 Semi renderDateDisplay(date)=>ReactNode。 */
+    renderDateDisplay?: Snippet<[Date]>;
+    /** 自定义单元格/列（绝对定位）；返回 Snippet 覆盖默认渲染 */
+    dateGridRender?: (dateString: string, date: Date) => Snippet | null | undefined;
+    /** 自定义顶部全天区；返回 Snippet 覆盖默认全天渲染 */
+    allDayEventsRender?: (events: CalendarEvent[]) => Snippet | null | undefined;
   }
 
   let {
-    value,
-    defaultValue,
     displayValue,
-    mode = 'month',
-    selectionMode = 'single',
-    events = [],
-    weekStartsOn = 0,
-    maxEventsPerDay = 3,
-    dayStartHour = 0,
-    dayEndHour = 23,
-    weekendDays = [0, 6],
-    markWeekend = true,
-    disabledDate,
-    selectedDate,
-    defaultSelectedDate,
-    rangeValue,
-    defaultRangeValue,
     range,
-    locale = 'zh-CN',
-    onChange,
-    onSelect,
-    onRangeChange,
-    onDateClick,
-    onMoreClick,
-    onEventClick,
-    onClose,
-    dateCell,
-    event,
     header,
-    dateGridRender,
-    allDayEventsRender,
-    renderTimeDisplay,
-    renderDateDisplay,
+    events = [],
+    mode = 'week',
     showCurrTime = true,
+    weekStartsOn = 0,
     scrollTop = 400,
-    minEventHeight,
+    markWeekend = false,
+    minEventHeight = Number.MIN_SAFE_INTEGER,
     width,
-    height,
-    ariaLabel,
-    popup = false,
-    open,
-    defaultOpen = false,
-    onOpenChange,
-    placement = 'bottomStart',
-    getContainer,
-    trigger,
-    virtualizeDay = 'auto',
-    virtualizeThreshold = 18,
-    timelineViewportHeight = 360,
+    height = 600,
+    onClick,
+    onClose,
+    onMoreClick,
+    renderTimeDisplay,
+    renderDateDisplay,
+    dateGridRender,
+    allDayEventsRender,
   }: Props = $props();
 
-  // displayValue 作为 value 的别名（Semi API），优先级低于 value
-  const resolvedValue = $derived(value ?? displayValue);
-
-  // range 作为 rangeValue 的别名（Semi API），优先级低于 rangeValue
-  const resolvedRangeValue = $derived(rangeValue ?? range);
-
   const loc = useLocale();
-  // 单例 live region（polite）：切月/年、移动焦点、选中日期时播报可读文本（红线 #3：命令式）。
-  const announcer = useLiveAnnouncer();
-
-  // 一次性常量：今天（render 用于派生 today/past 态，不放 $state 反复 new）
-  const today = new Date();
-
-  // --- 锚点 value：受控不回写 (红线 #1) ---
-  // resolvedValue = value ?? displayValue（displayValue 是 Semi API 的别名）
-  function initValue(): Date {
-    return defaultValue ?? new Date();
-  }
-  const isValueControlled = $derived(resolvedValue !== undefined);
-  let innerValue = $state<Date>(initValue());
-  const currentValue = $derived(isValueControlled ? (resolvedValue as Date) : innerValue);
 
-  // --- 选中日 selectedDate：受控不回写 (红线 #1) ---
-  function initSelected(): Date | null {
-    return defaultSelectedDate ?? null;
-  }
-  const isSelectedControlled = $derived(selectedDate !== undefined);
-  let innerSelected = $state<Date | null>(initSelected());
-  const currentSelected = $derived(
-    isSelectedControlled ? (selectedDate as Date) : innerSelected,
-  );
-
-  // --- 选中范围 rangeValue：受控不回写 (红线 #1) ---
-  function normRange(r: RangeValue | null | undefined): RangeValue | null {
-    if (!r) return null;
-    const a = startOfDay(r[0]);
-    const b = startOfDay(r[1]);
-    return a.getTime() <= b.getTime() ? [a, b] : [b, a];
-  }
-  // resolvedRangeValue = rangeValue ?? range（range 是 Semi API 的别名）
-  const isRangeControlled = $derived(resolvedRangeValue !== undefined);
-  let innerRange = $state<RangeValue | null>(untrack(() => normRange(defaultRangeValue)));
-  const currentRange = $derived(
-    isRangeControlled ? normRange(resolvedRangeValue) : innerRange,
-  );
-
-  // --- range 选择状态机：'start'=待选起点；'end'=已选起点待选终点 ---
-  let phase = $state<'start' | 'end'>('start');
-  let pendingStart = $state<Date | null>(null);
-  let previewEnd = $state<Date | null>(null);
-
-  // --- 弹层展开态：受控不回写仅 onOpenChange (红线 #1) ---
-  const isOpenControlled = $derived(open !== undefined);
-  let innerOpen = $state(untrack(() => defaultOpen));
-  const isOpen = $derived(isOpenControlled ? (open as boolean) : innerOpen);
-  function setOpen(next: boolean) {
-    if (next === isOpen) return;
-    if (!isOpenControlled) innerOpen = next;
-    onOpenChange?.({ open: next });
-  }
-  function toggleOpen() {
-    setOpen(!isOpen);
-  }
+  // 展示锚点：纯受控 displayValue（缺省 today）。对齐 Semi——无内置导航。
+  const fallbackAnchor = new Date();
+  const anchor = $derived(displayValue ?? fallbackAnchor);
 
-  // --- roving 焦点：被聚焦的日期（纯 $state，网格只有一个 tabindex=0 的格） ---
-  // 初值跟随锚点；用户方向键移动时更新，跨月/周则锚点随动重渲染网格。
-  let focusedDate = $state<Date | null>(null);
-  // 标记下一次重渲染后需把 DOM 焦点落到 focusedDate 对应的格上
-  let pendingFocus = $state(false);
+  // 当前时刻（红线用），每 30s 刷新一次。
+  let now = $state(new Date());
+  $effect(() => {
+    if (!showCurrTime) return;
+    const id = setInterval(() => {
+      now = new Date();
+    }, 30_000);
+    return () => clearInterval(id);
+  });
 
-  let rootEl = $state<HTMLElement | null>(null);
-  let triggerEl = $state<HTMLElement | null>(null);
-  let panelEl = $state<HTMLElement | null>(null);
+  // 滚动内容区像素高度：绝对定位事件的 top/height 需按它换算。
+  let scrollContentHeight = $state(0);
 
-  // --- 网格与分组：全部从 props/本地 $state 派生 (红线 #2) ---
-  // day 模式不需要日格网格；给出空数组避免下游再分支
-  const cells = $derived(
-    mode === 'day'
-      ? []
-      : mode === 'week'
-        ? getWeekGrid(currentValue, weekStartsOn)
-        : getMonthGrid(currentValue, weekStartsOn),
-  );
-  const weeks = $derived(
-    mode === 'week'
-      ? [cells]
-      : mode === 'day'
-        ? []
-        : Array.from({ length: 6 }, (_, i) => cells.slice(i * 7, (i + 1) * 7)),
-  );
-  const dayMap = $derived(
-    groupEventsByDays(
-      events,
-      cells.map((c) => c.date),
-      maxEventsPerDay,
-    ),
-  );
+  // 根滚动视口（对齐 Semi：dom 即根 .calendar-day/week，overflow:auto）。初始滚到 scrollTop 偏移
+  // （对齐 Semi componentDidMount: dom.scrollTop = props.scrollTop）。
+  let rootEl = $state<HTMLDivElement | null>(null);
+  $effect(() => {
+    if (!isTimeGrid || !rootEl) return;
+    void mode;
+    rootEl.scrollTop = scrollTop;
+  });
 
-  // --- day 视图：单日时间轴（纯派生，红线 #2/#3） ---
-  const hourSlots = $derived(
-    mode === 'day' ? getDayHours(currentValue, dayStartHour, dayEndHour) : [],
-  );
-  const dayTimeline = $derived(
-    mode === 'day'
-      ? timelineForDay(events, currentValue, dayStartHour, dayEndHour)
-      : { allDay: [], byHour: new Map<number, CalendarEvent[]>() },
+  // --- Intl 格式化器（语言来自 LocaleProvider 的 loc().code） ---
+  const localeCode = $derived(loc().code);
+  const weekdayFmt = $derived(new Intl.DateTimeFormat(localeCode, { weekday: 'short' }));
+  const weekdayLongFmt = $derived(new Intl.DateTimeFormat(localeCode, { weekday: 'long' }));
+  const monthShortFmt = $derived(new Intl.DateTimeFormat(localeCode, { month: 'short' }));
+  const titleFmt = $derived(new Intl.DateTimeFormat(localeCode, { year: 'numeric', month: 'long' }));
+  const fullDateFmt = $derived(
+    new Intl.DateTimeFormat(localeCode, { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' }),
   );
+  const slotTimeFmt = $derived(new Intl.DateTimeFormat(localeCode, { hour: '2-digit', minute: '2-digit' }));
 
-  // --- day 时间轴虚拟化（复用 core fixedRange，红线 #2 派生 / #3 滚动监听命令式）---
-  const ROW_H = 40; // 与 --cd-calendar-hour-min-h 默认值对齐（固定行高视口渲染）
-  const useVirtual = $derived(
-    mode === 'day' &&
-      (virtualizeDay === true ||
-        (virtualizeDay === 'auto' && hourSlots.length >= virtualizeThreshold)),
-  );
-  let timelineScrollTop = $state(0);
-  // 视口可见行区间（含 overscan），仅虚拟化时计算
-  const visibleRange = $derived(
-    useVirtual
-      ? fixedRange(timelineScrollTop, timelineViewportHeight, ROW_H, hourSlots.length, 3)
-      : { startIndex: 0, endIndex: hourSlots.length },
-  );
-  const visibleSlots = $derived(
-    useVirtual ? hourSlots.slice(visibleRange.startIndex, visibleRange.endIndex) : hourSlots,
-  );
-  // 上/下空白撑高，保证滚动条与 hour 行绝对位置正确
-  const padTop = $derived(useVirtual ? visibleRange.startIndex * ROW_H : 0);
-  const totalHeight = $derived(useVirtual ? hourSlots.length * ROW_H : 0);
-
-  // 命令式滚动监听 + cleanup（红线 #3）：只在虚拟化时绑定
-  let timelineEl = $state<HTMLElement | null>(null);
-
-  // scrollTop：day 视图初始滚动位置（命令式，红线 #3）
-  $effect(() => {
-    if (mode !== 'day' || !timelineEl) return;
-    // 使用 untrack 避免把 scrollTop prop 加入 effect 依赖，只在 timelineEl mount 时执行一次
-    const top = scrollTop;
-    timelineEl.scrollTop = top;
-  });
+  // 纯日期数字（对齐 Semi date-fns format(date,'d')）。
+  function dayString(d: Date): string {
+    return String(d.getDate());
+  }
+  function weekdayName(d: Date): string {
+    return weekdayFmt.format(d);
+  }
 
-  // showCurrTime：当前时间红线，每分钟更新一次（命令式定时器，红线 #3）
-  let currTimePercent = $state<number | null>(null);
-  $effect(() => {
-    if (mode !== 'day' || !showCurrTime) {
-      currTimePercent = null;
-      return;
+  // --- 每个视图展示的「列」（一列 = 一天） ---
+  const columnDates = $derived.by<Date[]>(() => {
+    if (mode === 'day') return [anchor];
+    if (mode === 'week') {
+      const ws = startOfWeek(anchor, weekStartsOn);
+      return Array.from({ length: 7 }, (_, i) => addDaysLocal(ws, i));
     }
-    const compute = () => {
-      const now = new Date();
-      const h = now.getHours();
-      const m = now.getMinutes();
-      const totalHours = dayEndHour - dayStartHour + 1;
-      if (h < dayStartHour || h > dayEndHour) {
-        currTimePercent = null;
-        return;
-      }
-      currTimePercent = ((h - dayStartHour + m / 60) / totalHours) * 100;
-    };
-    compute();
-    // 剩余秒数到下一分钟
-    const now = new Date();
-    const msToNextMin = (60 - now.getSeconds()) * 1000 - now.getMilliseconds();
-    let timer: ReturnType<typeof setTimeout>;
-    let interval: ReturnType<typeof setInterval>;
-    timer = setTimeout(() => {
-      compute();
-      interval = setInterval(compute, 60_000);
-    }, msToNextMin);
-    return () => {
-      clearTimeout(timer);
-      clearInterval(interval);
-    };
-  });
-  $effect(() => {
-    if (!useVirtual || !timelineEl) return;
-    const el = timelineEl;
-    let frame = 0;
-    const onScroll = () => {
-      if (frame) return;
-      frame = requestAnimationFrame(() => {
-        frame = 0;
-        timelineScrollTop = el.scrollTop;
-      });
-    };
-    el.addEventListener('scroll', onScroll, { passive: true });
-    timelineScrollTop = el.scrollTop;
-    return () => {
-      if (frame) cancelAnimationFrame(frame);
-      el.removeEventListener('scroll', onScroll);
-    };
+    if (mode === 'range') {
+      if (!range) return [anchor];
+      const n = Math.max(1, differenceInCalendarDays(range[1], range[0]));
+      return Array.from({ length: n }, (_, i) => addDaysLocal(range[0], i));
+    }
+    return [];
   });
 
-  // --- Intl 格式化 ---
-  const titleFormatter = $derived(
-    new Intl.DateTimeFormat(locale, { year: 'numeric', month: 'long' }),
-  );
-  const weekdayFormatter = $derived(new Intl.DateTimeFormat(locale, { weekday: 'short' }));
-  // week 模式标题：本周首日 ~ 末日（同月则只展示一次月份）
-  const rangeTitleFormatter = $derived(
-    new Intl.DateTimeFormat(locale, { year: 'numeric', month: 'long', day: 'numeric' }),
-  );
-  const dayTitleFormatter = $derived(new Intl.DateTimeFormat(locale, { day: 'numeric' }));
-  const weekTitle = $derived.by(() => {
-    const first = cells[0]?.date;
-    const last = cells[cells.length - 1]?.date;
-    if (!first || !last) return '';
-    const startText = rangeTitleFormatter.format(first);
-    const endText =
-      first.getMonth() === last.getMonth() && first.getFullYear() === last.getFullYear()
-        ? dayTitleFormatter.format(last)
-        : rangeTitleFormatter.format(last);
-    return `${startText} – ${endText}`;
-  });
-  // day 模式标题：完整日期（含星期）
-  const dayTitleFullFormatter = $derived(
-    new Intl.DateTimeFormat(locale, {
-      year: 'numeric',
-      month: 'long',
-      day: 'numeric',
-      weekday: 'long',
-    }),
-  );
-  // 时间轴每行的小时标签（如 09:00）
-  const hourLabelFormatter = $derived(
-    new Intl.DateTimeFormat(locale, { hour: '2-digit', minute: '2-digit', hour12: false }),
-  );
-  const title = $derived(
-    mode === 'week'
-      ? weekTitle
-      : mode === 'day'
-        ? dayTitleFullFormatter.format(currentValue)
-        : titleFormatter.format(currentValue),
-  );
+  const isTimeGrid = $derived(mode === 'day' || mode === 'week' || mode === 'range');
+  // week/range 共用 weekCalendar 结构（同 class 前缀 cd-calendar-week）；day 用 dayCalendar 结构。
+  const isWeekLike = $derived(mode === 'week' || mode === 'range');
 
-  // 星期表头：用首周 7 格的 date 生成名称（顺序与 weekStartsOn 一致）
-  const weekdayOrderList = $derived(weekdayOrder(weekStartsOn));
-  const weekdayNames = $derived(
-    cells.slice(0, 7).map((c) => weekdayFormatter.format(c.date)),
-  );
+  // 全天/跨天事件桶。
+  const allDayBucket = $derived(allDayEventMap(events));
 
-  // --- roving 焦点目标（纯派生，红线 #2）---
-  // 网格里唯一获得 tabindex=0 的「活动格」：优先用户已聚焦日期，否则选中日/今天/锚点。
-  // 若 focusedDate 不在当前网格（跨月翻页后），仍以 focusedDate 为准——它就是要落焦的格。
-  const activeDate = $derived.by<Date>(() => {
-    if (focusedDate) return focusedDate;
-    if (selectionMode === 'single' && currentSelected) return currentSelected;
-    const inGridToday = cells.some((c) => isSameDay(c.date, today));
-    if (inGridToday) return today;
-    // 月视图回退到当月 1 号所在的格，周/日回退到锚点
-    return mode === 'month' ? startOfDay(new Date(currentValue.getFullYear(), currentValue.getMonth(), 1)) : currentValue;
+  const eventByKey = $derived.by(() => {
+    const m = new Map<CalendarEvent['key'], CalendarEvent>();
+    for (const e of events) m.set(e.key, e);
+    return m;
   });
-  function isActiveCell(date: Date): boolean {
-    return isSameDay(date, activeDate);
-  }
-
-  // --- 状态写入：仅非受控写 inner，受控只回调 (红线 #1) ---
-  function setAnchor(next: Date) {
-    if (!isValueControlled) innerValue = next;
-    onChange?.({ value: next });
+  function origEvent(key: CalendarEvent['key'], children: unknown): CalendarEvent {
+    return eventByKey.get(key) ?? ({ key, children } as CalendarEvent);
   }
 
-  function step(delta: number): Date {
-    if (mode === 'day') return addDays(currentValue, delta);
-    if (mode === 'week') return addWeeks(currentValue, delta);
-    return addMonths(currentValue, delta);
-  }
-  // 切月/年/今日：把焦点带到新锚点并 polite 播报其可读全文（formatter 仅依赖 locale，可安全用于任意日期）。
-  function announceFocusDate(date: Date) {
-    announcer.announce(dayTitleFullFormatter.format(date));
-  }
-  function goPrev() {
-    const next = step(-1);
-    setAnchor(next);
-    announceFocusDate(next);
-  }
-  function goNext() {
-    const next = step(1);
-    setAnchor(next);
-    announceFocusDate(next);
-  }
-  function goToday() {
-    const next = new Date();
-    setAnchor(next);
-    announceFocusDate(next);
-  }
+  // --- 时间轴视图：顶部跨天/全天条布局 ---
+  const spanEvents = $derived.by<PositionedSpanEvent[]>(() => {
+    if (!isTimeGrid) return [];
+    if (mode === 'week') return parseWeekSpanEvents(allDayBucket, startOfWeek(anchor, weekStartsOn), weekStartsOn);
+    if (mode === 'range' && range) return parseSpanEvents(allDayBucket, range[0], range[1]);
+    if (mode === 'day') return parseSpanEvents(allDayBucket, anchor, addDaysLocal(anchor, 1));
+    return [];
+  });
+  const allDayRows = $derived(isTimeGrid ? Math.max(1, calcRowHeight(spanEvents)) : 0);
 
-  function setSelected(date: Date) {
-    if (!isSelectedControlled) innerSelected = date;
-    onSelect?.({ date });
-    // 选中日期 polite 播报可读全文。
-    announcer.announce(
-      loc().t('Calendar.selectedDateAnnounce', { date: dayTitleFullFormatter.format(date) }),
-    );
+  const dayBucket = $derived(parseEvents(events).day);
+  function positionedDay(date: Date): PositionedDayEvent[] {
+    return getDailyEvents(dayBucket, date).day;
   }
 
-  function setRange(next: RangeValue) {
-    if (!isRangeControlled) innerRange = next;
-    onRangeChange?.({ range: next });
-  }
+  // --- month 视图 ---
+  const monthWeeks = $derived.by(() => {
+    if (mode !== 'month') return [];
+    const cells = getMonthGrid(anchor, weekStartsOn);
+    const out: (typeof cells)[] = [];
+    for (let i = 0; i < cells.length; i += 7) out.push(cells.slice(i, i + 7));
+    return out;
+  });
+  const monthEventMap = $derived(mode === 'month' ? getMonthEvents(events, anchor, weekStartsOn) : {});
+  // 对齐 Semi calcItemLimit = ceil((cellHeight - 60) / 24)，按周行实测高度动态算。
+  let monthWeekH = $state(0);
+  const MONTH_CONTENT_PADDING = 60;
+  const MONTH_CONTENT_HEIGHT = 24;
+  const monthItemLimit = $derived(
+    monthWeekH > 0 ? Math.max(0, Math.ceil((monthWeekH - MONTH_CONTENT_PADDING) / MONTH_CONTENT_HEIGHT)) : 2,
+  );
 
-  function isDisabled(date: Date): boolean {
-    return disabledDate?.(date) ?? false;
-  }
+  // 月视图星期表头（用第一周的日期生成本地化星期名）。
+  const monthHeaderWeekdays = $derived.by<{ name: string; weekend: boolean }[]>(() => {
+    const ws = startOfWeek(anchor, weekStartsOn);
+    return weekdayOrder(weekStartsOn).map((_, i) => {
+      const d = addDaysLocal(ws, i);
+      return { name: weekdayName(d), weekend: isWeekend(d) };
+    });
+  });
 
-  // range 选择：点第一天设起、第二天设止（排序后提交）
-  function onRangeActivate(date: Date) {
-    const day = startOfDay(date);
-    if (phase === 'start') {
-      pendingStart = day;
-      previewEnd = day;
-      phase = 'end';
-      return;
+  // --- 头部标题（仅 aria-label 用；Semi 无标题） ---
+  const title = $derived.by(() => {
+    if (mode === 'day') return fullDateFmt.format(anchor);
+    if (mode === 'week') {
+      const cols = columnDates;
+      const first = cols[0];
+      const last = cols[cols.length - 1];
+      return first && last ? `${monthShortFmt.format(first)} ${dayString(first)} – ${dayString(last)}` : '';
     }
-    const a = pendingStart ?? day;
-    const next: RangeValue =
-      a.getTime() <= day.getTime() ? [a, day] : [day, a];
-    setRange(next);
-    phase = 'start';
-    pendingStart = null;
-    previewEnd = null;
-  }
+    if (mode === 'range' && range) return `${titleFmt.format(range[0])}`;
+    return titleFmt.format(anchor);
+  });
 
-  function onCellActivate(date: Date) {
-    if (isDisabled(date)) return;
-    onDateClick?.({ date });
-    if (selectionMode === 'range') {
-      onRangeActivate(date);
-    } else {
-      setSelected(date);
-    }
-  }
+  // 头部月份标签（对齐 Semi renderHeader 的 month = format(value,'LLL')）。
+  const monthLabel = $derived(monthShortFmt.format(anchor));
 
-  function onCellHover(date: Date) {
-    if (selectionMode === 'range' && phase === 'end' && !isDisabled(date)) {
-      previewEnd = startOfDay(date);
+  // --- 时间列（对齐 Semi timeCol：Array(24)=0..23，第 0 项文案清空）---
+  const HOURS = Array.from({ length: 24 }, (_, h) => h);
+  function hourLabel(h: number): string {
+    if (renderTimeDisplay) {
+      const v = renderTimeDisplay(h);
+      return typeof v === 'string' ? v : String(v ?? '');
     }
+    if (h === 0) return '';
+    const isAM = h < 12;
+    const time = h === 12 ? 12 : isAM ? h : h - 12;
+    return loc().t(isAM ? 'Calendar.AM' : 'Calendar.PM', { time });
   }
 
-  const NAV_KEYS = new Set<string>([
-    'ArrowLeft',
-    'ArrowRight',
-    'ArrowUp',
-    'ArrowDown',
-    'PageUp',
-    'PageDown',
-    'Home',
-    'End',
-  ]);
-
-  // 将 DOM 焦点落到 activeDate 对应的格（重渲染后调用，命令式 + 无监听需 cleanup）
-  async function focusActiveCell() {
-    await tick();
-    const host = rootEl ?? panelEl;
-    if (!host) return;
-    const el = host.querySelector<HTMLElement>('.cd-calendar__cell--active');
-    el?.focus();
+  // --- 点击回调 ---
+  function emitTimeClick(colDate: Date, halfIndex: number, e: Event) {
+    const hour = Math.floor(halfIndex / 2);
+    const minute = halfIndex % 2 === 0 ? 0 : 30;
+    const d = new Date(colDate.getFullYear(), colDate.getMonth(), colDate.getDate(), hour, minute, 0, 0);
+    onClick?.(e, d);
   }
-
-  // 网格级 roving 键盘导航（WAI-ARIA grid 模式，红线 #2 派生用纯 gridFocusMove）
-  function onGridKeydown(e: KeyboardEvent) {
-    const key = e.key;
-    if (key === 'Enter' || key === ' ') {
-      e.preventDefault();
-      onCellActivate(activeDate);
-      return;
-    }
-    // Shift+PageUp/Down：切年（gridFocusMove 不含年级，组件层 ±12 月）
-    if (e.shiftKey && (key === 'PageUp' || key === 'PageDown')) {
-      e.preventDefault();
-      const nextYearDate = addMonths(activeDate, key === 'PageUp' ? -12 : 12);
-      focusedDate = nextYearDate;
-      const stillVisible = cells.some((c) => isSameDay(c.date, nextYearDate));
-      if (!stillVisible) setAnchor(nextYearDate);
-      pendingFocus = true;
-      announceFocusDate(nextYearDate);
-      return;
-    }
-    if (!NAV_KEYS.has(key)) return;
-    e.preventDefault();
-    const next = gridFocusMove(
-      activeDate,
-      key as GridFocusKey,
-      mode === 'week' ? 'week' : 'month',
-      weekStartsOn,
-    );
-    if (!next) return;
-    focusedDate = next;
-    // 跨出当前展示月/周：锚点随动，触发网格重渲染（受控锚点只回调，红线 #1）
-    const stillVisible = cells.some((c) => isSameDay(c.date, next));
-    if (!stillVisible) setAnchor(next);
-    pendingFocus = true;
-    announceFocusDate(next);
+  function slotLabel(colDate: Date, halfIndex: number): string {
+    const hour = Math.floor(halfIndex / 2);
+    const minute = halfIndex % 2 === 0 ? 0 : 30;
+    const d = new Date(colDate.getFullYear(), colDate.getMonth(), colDate.getDate(), hour, minute);
+    return `${fullDateFmt.format(colDate)} ${slotTimeFmt.format(d)}`;
+  }
+  function emitDayClick(d: Date, e: Event) {
+    onClick?.(e, new Date(d.getFullYear(), d.getMonth(), d.getDate()));
   }
 
-  // 焦点落格：activeDate / 网格内容变化后，若有待定焦点则把 DOM 焦点移到活动格
-  $effect(() => {
-    // 依赖 activeDate + cells 确保翻页重渲染后再落焦
-    void activeDate;
-    void cells;
-    if (pendingFocus) {
-      pendingFocus = false;
-      void focusActiveCell();
-    }
-  });
-
-  // --- range 区间端点 / 区间内判定（纯派生，红线 #2） ---
-  const rangeStart = $derived(phase === 'end' ? pendingStart : (currentRange?.[0] ?? null));
-  const rangeEnd = $derived(phase === 'end' ? previewEnd : (currentRange?.[1] ?? null));
-  const span = $derived.by<[number, number] | null>(() => {
-    if (!rangeStart || !rangeEnd) return null;
-    const ta = rangeStart.getTime();
-    const tb = rangeEnd.getTime();
-    return ta <= tb ? [ta, tb] : [tb, ta];
-  });
-
-  function isRangeEdge(date: Date): boolean {
-    if (selectionMode !== 'range') return false;
-    return isSameDay(date, rangeStart) || isSameDay(date, rangeEnd);
+  function childrenIsSnippet(c: unknown): c is Snippet {
+    return typeof c === 'function';
   }
-  function isInRange(date: Date): boolean {
-    if (selectionMode !== 'range' || !span) return false;
-    const t = startOfDay(date).getTime();
-    return t > span[0] && t < span[1];
+  function childrenText(c: unknown): string {
+    return typeof c === 'string' ? c : '';
   }
 
-  function onMore(date: Date, total: CalendarEvent[]) {
-    onMoreClick?.({ date, events: total });
+  // 事件绝对定位样式（时间轴列内，对齐 Semi DayCol renderEvents）。
+  function timedStyle(ev: PositionedDayEvent, h: number): string {
+    const top = ev.startPos * h;
+    const rawH = (ev.endPos - ev.startPos) * h;
+    const eh = Math.max(minEventHeight, rawH);
+    const left = typeof ev.left === 'number' ? `${ev.left}px` : ev.left;
+    return `top:${top}px;height:${eh}px;left:${left};`;
   }
-
-  // 事件块激活（点击或 Enter/Space）。阻止冒泡避免连带触发日格选择。
-  function activateEvent(ev: CalendarEvent, e: Event) {
-    e.stopPropagation();
-    if (ev.disabled) return;
-    onEventClick?.({ event: ev, nativeEvent: e });
-  }
-  function onEventKeydown(ev: CalendarEvent, e: KeyboardEvent) {
-    if (e.key === 'Enter' || e.key === ' ') {
-      e.preventDefault();
-      activateEvent(ev, e);
-    }
+  // 全天条样式（对齐 Semi renderAllDayEvents：left/width%, top:${topInd}em）。
+  function spanStyle(ev: PositionedSpanEvent): string {
+    return `left:${ev.leftPos * 100}%;width:${ev.width * 100}%;top:${ev.topInd}em;`;
   }
-
-  // --- popup 外部点击 / Esc 关闭（红线 #3：open 时绑、cleanup 解绑）---
-  $effect(() => {
-    if (!popup || !isOpen || !triggerEl) return;
-    return useDismiss(triggerEl, {
-      onDismiss: (reason) => {
-        setOpen(false);
-        onClose?.();
-        // 仅 Esc 归还焦点到 trigger（外部点击焦点应留在点击处）
-        if (reason === 'esc') {
-          const btn = triggerEl?.querySelector<HTMLElement>(
-            '.cd-calendar-popup__trigger, [data-calendar-trigger]',
-          );
-          (btn ?? triggerEl)?.focus();
-        }
-      },
-      escape: true,
-      outsideClick: true,
-      // 浮层门户到 body，点击浮层内部不算外部
-      extraTargets: [panelEl],
-    });
-  });
-
-  // popup 打开后把焦点落到活动格，关闭后归还 trigger（命令式）
-  $effect(() => {
-    if (!popup) return;
-    if (isOpen) {
-      pendingFocus = true;
-      void focusActiveCell();
-    }
-  });
-
-  function dayNumber(date: Date): number {
-    return date.getDate();
+  // 月视图跨天条样式（对齐 Semi renderEvents：left/width%, top:${topInd}em）。
+  function monthSpanStyle(ev: PositionedSpanEvent): string {
+    return `left:${ev.leftPos * 100}%;width:${ev.width * 100}%;top:${ev.topInd}em;`;
   }
 
-  function isWeekendDay(date: Date): boolean {
-    return markWeekend && weekendDays.includes(date.getDay());
+  // 当前时间红线位置（滚动内容内），仅当天列显示。
+  const currTimeTop = $derived(showCurrTime ? getPos(now) * scrollContentHeight : 0);
+  function isNowColumn(d: Date): boolean {
+    return isSameDay(d, now);
   }
 
-  function isTodayDay(date: Date): boolean {
-    return isSameDay(date, today);
-  }
+  const sizePx = (v: number | string | undefined) =>
+    v === undefined ? undefined : typeof v === 'number' ? `${v}px` : v;
 
-  function isSelectedDay(date: Date): boolean {
-    if (selectionMode === 'range') return false;
-    return isSameDay(date, currentSelected);
+  interface MonthCellEvent {
+    key: CalendarEvent['key'];
+    children: unknown;
+  }
+  // 某周内 topInd < limit 的跨天条（对齐 Semi renderEvents）。
+  function monthWeekSpans(weekIndex: number): PositionedSpanEvent[] {
+    const week = monthEventMap[weekIndex];
+    if (!week) return [];
+    return week.display.filter((s) => s.topInd < monthItemLimit);
+  }
+  function monthCellOverflow(
+    weekIndex: number,
+    colIndex: number,
+  ): { remaining: number; all: MonthCellEvent[] } {
+    const week = monthEventMap[weekIndex];
+    if (!week) return { remaining: 0, all: [] };
+    const col: MonthCellEvent[] = (week.day[colIndex] ?? [])
+      .filter((x) => x != null)
+      .map((x) => ({ key: x.key, children: x.children }));
+    const remaining = Math.max(0, col.length - monthItemLimit);
+    return { remaining, all: col };
   }
 </script>
 
-{#snippet calendarBody()}
-  {#if header}
-    {@render header()}
+{#snippet eventContent(ev: CalendarEvent)}
+  {#if childrenIsSnippet(ev.children)}
+    {@render (ev.children as Snippet)()}
   {:else}
-  <div class="cd-calendar__toolbar">
-    <button
-      type="button"
-      class="cd-calendar__nav"
-      aria-label={loc().t('Calendar.prev')}
-      onclick={goPrev}
-    >
-      <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true" focusable="false">
-        <path
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          d="M10 3L5 8l5 5"
-        />
-      </svg>
-    </button>
-    <button type="button" class="cd-calendar__today" onclick={goToday}>{loc().t('Calendar.today')}</button>
-    <div class="cd-calendar__title">{renderDateDisplay ? renderDateDisplay(currentValue) : title}</div>
-    <button
-      type="button"
-      class="cd-calendar__nav"
-      aria-label={loc().t('Calendar.next')}
-      onclick={goNext}
-    >
-      <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true" focusable="false">
-        <path
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          d="M6 3l5 5-5 5"
-        />
-      </svg>
-    </button>
-  </div>
+    {childrenText(ev.children)}
   {/if}
+{/snippet}
 
-  {#if mode === 'day'}
-    <div class="cd-calendar__timeline" aria-label={ariaLabel ?? title}>
-      {#if dayTimeline.allDay.length > 0}
-        <div class="cd-calendar__allday">
-          <div class="cd-calendar__allday-label">{loc().t('Calendar.allDay')}</div>
-          {#if allDayEventsRender}
-            {@render allDayEventsRender(dayTimeline.allDay)?.()}
-          {:else}
-          <div class="cd-calendar__allday-events">
-            {#each dayTimeline.allDay as ev (ev.key)}
-              {#if event}
-                {@render event({ event: ev })}
-              {:else}
-                <div
-                  class="cd-calendar__event"
-                  class:cd-calendar__event--disabled={ev.disabled}
-                  style:--cd-calendar-event-accent={ev.color ?? 'var(--cd-calendar-event-default-bg)'}
-                  role="button"
-                  tabindex={ev.disabled ? -1 : 0}
-                  aria-disabled={ev.disabled || undefined}
-                  aria-label={ev.title}
-                  title={ev.title}
-                  onclick={(e) => activateEvent(ev, e)}
-                  onkeydown={(e) => onEventKeydown(ev, e)}
-                >
-                  <span class="cd-calendar__event-bar" aria-hidden="true"></span>
-                  <span class="cd-calendar__event-title">{ev.title}</span>
-                </div>
-              {/if}
-            {/each}
-          </div>
-          {/if}
-        </div>
+<!-- 时间列（对齐 Semi TimeCol：ul.calendar-time-items > li.calendar-time-item > span） -->
+{#snippet timeCol()}
+  <div class="cd-calendar-time cd-calendar-{isWeekLike ? 'week' : 'day'}-sticky-left" aria-hidden="true">
+    <ul class="cd-calendar-time-items">
+      {#each HOURS as h (h)}
+        <li class="cd-calendar-time-item"><span>{hourLabel(h)}</span></li>
+      {/each}
+    </ul>
+  </div>
+{/snippet}
+
+<!-- 单日列（对齐 Semi DayCol：div.grid > div.grid-content > (curr + ul.grid-skeleton(50 li) + dateGridRender + ul.event-items)） -->
+{#snippet dayCol(colDate: Date, showCurr: boolean, weekend: boolean)}
+  {@const positioned = positionedDay(colDate)}
+  <div class="cd-calendar-grid" role="presentation">
+    <div class="cd-calendar-grid-content" role="gridcell" aria-label={fullDateFmt.format(colDate)}>
+      {#if showCurr && showCurrTime && isNowColumn(colDate)}
+        <div class="cd-calendar-grid-curr-circle" style:top={`${currTimeTop}px`}></div>
+        <div class="cd-calendar-grid-curr-line" style:top={`${currTimeTop}px`}></div>
       {/if}
-      <div
-        class="cd-calendar__hours"
-        class:cd-calendar__hours--virtual={useVirtual}
-        role="list"
-        bind:this={timelineEl}
-        style:max-block-size={useVirtual ? `${timelineViewportHeight}px` : undefined}
-        style:position="relative"
-      >
-        <!-- showCurrTime 红线：绝对定位，top% 由派生纯函数算出（红线 #2） -->
-        {#if showCurrTime && currTimePercent !== null}
-          <div
-            class="cd-calendar__curr-time"
-            aria-hidden="true"
-            style:top={`${currTimePercent}%`}
-          ></div>
-        {/if}
-        {#if useVirtual}
-          <!-- 撑高占位 + 上空白 padding，仅渲染视口行（复用 core fixedRange）-->
-          <div class="cd-calendar__hours-spacer" style:block-size={`${totalHeight}px`}>
-            <div style:transform={`translateY(${padTop}px)`}>
-              {#each visibleSlots as slot (slot.hour)}
-                {@const hourEvents = dayTimeline.byHour.get(slot.hour) ?? []}
-                <div class="cd-calendar__hour" role="listitem" style:min-block-size={`${ROW_H}px`}>
-                  <div class="cd-calendar__hour-label" aria-hidden="true">
-                    {renderTimeDisplay ? renderTimeDisplay(slot.hour) : hourLabelFormatter.format(slot.date)}
-                  </div>
-                  <div class="cd-calendar__hour-slot">
-                    {#each hourEvents as ev (ev.key)}
-                      {#if event}
-                        {@render event({ event: ev })}
-                      {:else}
-                        <div
-                          class="cd-calendar__event cd-calendar__event--timed"
-                          class:cd-calendar__event--disabled={ev.disabled}
-                          style:--cd-calendar-event-accent={ev.color ?? 'var(--cd-calendar-event-default-bg)'}
-                          style:min-block-size={minEventHeight ? `${minEventHeight}px` : undefined}
-                          role="button"
-                          tabindex={ev.disabled ? -1 : 0}
-                          aria-disabled={ev.disabled || undefined}
-                          aria-label={`${hourLabelFormatter.format(ev.start)} ${ev.title}`}
-                          title={ev.title}
-                          onclick={(e) => activateEvent(ev, e)}
-                          onkeydown={(e) => onEventKeydown(ev, e)}
-                        >
-                          <span class="cd-calendar__event-bar" aria-hidden="true"></span>
-                          <span class="cd-calendar__event-time">{hourLabelFormatter.format(ev.start)}</span>
-                          <span class="cd-calendar__event-title">{ev.title}</span>
-                        </div>
-                      {/if}
-                    {/each}
-                  </div>
-                </div>
-              {/each}
-            </div>
-          </div>
-        {:else}
-          {#each hourSlots as slot (slot.hour)}
-            {@const hourEvents = dayTimeline.byHour.get(slot.hour) ?? []}
-            <div class="cd-calendar__hour" role="listitem">
-              <div class="cd-calendar__hour-label" aria-hidden="true">
-                {renderTimeDisplay ? renderTimeDisplay(slot.hour) : hourLabelFormatter.format(slot.date)}
-              </div>
-              <div class="cd-calendar__hour-slot">
-                {#each hourEvents as ev (ev.key)}
-                  {#if event}
-                    {@render event({ event: ev })}
-                  {:else}
-                    <div
-                      class="cd-calendar__event cd-calendar__event--timed"
-                      class:cd-calendar__event--disabled={ev.disabled}
-                      style:--cd-calendar-event-accent={ev.color ?? 'var(--cd-calendar-event-default-bg)'}
-                      style:min-block-size={minEventHeight ? `${minEventHeight}px` : undefined}
-                      title={ev.title}
-                    >
-                      <span class="cd-calendar__event-bar" aria-hidden="true"></span>
-                      <span class="cd-calendar__event-time">{hourLabelFormatter.format(ev.start)}</span>
-                      <span class="cd-calendar__event-title">{ev.title}</span>
-                    </div>
-                  {/if}
-                {/each}
-              </div>
-            </div>
+      <!-- 对齐 Semi dayCol renderGrid：25×2 个空 <li data-time onClick>，整点 li 有 row-line class。
+           点击绑 li 本身（无 button 子元素）；li 加 role/tabindex/keydown 保留键盘可达。 -->
+      <!-- svelte-ignore a11y_no_noninteractive_element_to_interactive_role -->
+      <ul class="cd-calendar-grid-skeleton" class:cd-calendar-weekend={weekend} role="row">
+        {#each { length: 25 } as _, item (item)}
+          <!-- svelte-ignore a11y_click_events_have_key_events -->
+          <li
+            class="cd-calendar-grid-skeleton-row-line"
+            data-time={`${String(item).padStart(2, '0')}:00:00`}
+            role="button"
+            tabindex="-1"
+            aria-label={slotLabel(colDate, item * 2)}
+            onclick={(e) => emitTimeClick(colDate, item * 2, e)}
+            onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); emitTimeClick(colDate, item * 2, e); } }}
+          ></li>
+          <!-- svelte-ignore a11y_click_events_have_key_events -->
+          <li
+            data-time={`${String(item).padStart(2, '0')}:30:00`}
+            role="button"
+            tabindex="-1"
+            aria-label={slotLabel(colDate, item * 2 + 1)}
+            onclick={(e) => emitTimeClick(colDate, item * 2 + 1, e)}
+            onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); emitTimeClick(colDate, item * 2 + 1, e); } }}
+          ></li>
+        {/each}
+      </ul>
+      {#if dateGridRender}
+        {@const extra = dateGridRender(colDate.toString(), colDate)}
+        {#if extra}{@render extra()}{/if}
+      {/if}
+      <ul class="cd-calendar-event-items">
+        {#each positioned as ev (ev.key)}
+          <li class="cd-calendar-event-item cd-calendar-event-day" style={timedStyle(ev, scrollContentHeight)}>
+            {@render eventContent(origEvent(ev.key, ev.children))}
+          </li>
+        {/each}
+      </ul>
+    </div>
+  </div>
+{/snippet}
+
+<!-- 全天区（对齐 Semi renderAllDay：div.all-day > ul.tag.all-day-tag.sticky-left + div.all-day-content > [skeleton] + ul.event-items） -->
+{#snippet allDayRow()}
+  <div class="cd-calendar-all-day" style:height={isWeekLike ? `${allDayRows}em` : undefined}>
+    <ul class="cd-calendar-tag cd-calendar-all-day-tag cd-calendar-{isWeekLike ? 'week' : 'day'}-sticky-left">
+      <span>{loc().t('Calendar.allDay')}</span>
+    </ul>
+    <!-- 对齐 Semi：week/range 全天区 content 有 calendar-content class，day 只有 all-day-content -->
+    <div class="cd-calendar-all-day-content" class:cd-calendar-content={isWeekLike} role="gridcell">
+      {#if isWeekLike}
+        <!-- week/range 全天区有列骨架（对齐 Semi all-day-skeleton） -->
+        <ul class="cd-calendar-all-day-skeleton">
+          {#each columnDates as d (d.getTime())}
+            <li class:cd-calendar-weekend={markWeekend && isWeekend(d)}></li>
           {/each}
-        {/if}
+        </ul>
+      {/if}
+      {#if allDayEventsRender}
+        {@const rendered = allDayEventsRender(allDayBucket)}
+        {#if rendered}{@render rendered()}{/if}
+      {:else}
+        <ul class="cd-calendar-event-items">
+          {#each spanEvents as ev (ev.key)}
+            <li class="cd-calendar-event-item cd-calendar-event-allday" style={spanStyle(ev)}>
+              {@render eventContent(origEvent(ev.key, ev.children))}
+            </li>
+          {/each}
+        </ul>
+      {/if}
+    </div>
+  </div>
+{/snippet}
+
+{#if mode === 'day'}
+  <!-- ===== day 视图（对齐 Semi dayCalendar：根无 role）===== -->
+  <div
+    class="cd-calendar-day"
+    bind:this={rootEl}
+    style:height={sizePx(height)}
+    style:width={sizePx(width)}
+  >
+    <div class="cd-calendar-day-sticky-top">
+      {#if header}{@render header()}{/if}
+      {@render allDayRow()}
+    </div>
+    <div class="cd-calendar-day-scroll-wrapper">
+      <div class="cd-calendar-day-scroll" bind:clientHeight={scrollContentHeight}>
+        {@render timeCol()}
+        {@render dayCol(anchor, true, markWeekend && isWeekend(anchor))}
       </div>
     </div>
-  {:else}
-  <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+  </div>
+{:else if isWeekLike}
+  <!-- ===== week / range 视图（对齐 Semi weekCalendar / rangeCalendar：根无 role）===== -->
   <div
-    class="cd-calendar__grid"
-    role="grid"
-    aria-label={ariaLabel ?? title}
-    tabindex="-1"
-    onkeydown={onGridKeydown}
+    class="cd-calendar-week"
+    bind:this={rootEl}
+    style:height={sizePx(height)}
+    style:width={sizePx(width)}
+    style:--cd-calendar-col-count={columnDates.length}
   >
-    <div class="cd-calendar__row cd-calendar__row--head" role="row">
-      {#each weekdayNames as name, i (weekdayOrderList[i])}
-        {@const weekend = markWeekend && weekendDays.includes(weekdayOrderList[i] as number)}
-        <div
-          class="cd-calendar__weekday"
-          class:cd-calendar__weekday--weekend={weekend}
-          role="columnheader"
-        >
-          {name}
+    <div class="cd-calendar-week-sticky-top">
+      {#if header}{@render header()}{/if}
+      <!-- 日期表头（对齐 Semi weekCalendar.renderHeader：week-header 无 role，li 无 role；grid 有 role=gridcell） -->
+      <div class="cd-calendar-week-header">
+        <ul class="cd-calendar-tag cd-calendar-week-tag cd-calendar-week-sticky-left"><span>{monthLabel}</span></ul>
+        <div class="cd-calendar-week-grid" role="gridcell">
+          <ul class="cd-calendar-week-grid-row">
+            {#each columnDates as d (d.getTime())}
+              <li
+                class:cd-calendar-today={isSameDay(d, now)}
+                class:cd-calendar-weekend={markWeekend && isWeekend(d)}
+              >
+                {#if renderDateDisplay}
+                  {@render renderDateDisplay(d)}
+                {:else}
+                  <span class="cd-calendar-today-date">{dayString(d)}</span>
+                  <span>{weekdayName(d)}</span>
+                {/if}
+              </li>
+            {/each}
+          </ul>
         </div>
-      {/each}
+      </div>
+      {@render allDayRow()}
     </div>
-
-    {#each weeks as week, wi (wi)}
-      <div class="cd-calendar__row" role="row">
-        {#each week as cell (dayKey(cell.date))}
-          {@const date = cell.date}
-          {@const outside = !cell.inMonth}
-          {@const disabled = isDisabled(date)}
-          {@const isToday = isTodayDay(date)}
-          {@const selected = isSelectedDay(date)}
-          {@const weekend = isWeekendDay(date)}
-          {@const past = isPastDay(date, today)}
-          {@const rangeEdgeCell = isRangeEdge(date)}
-          {@const inRangeCell = isInRange(date)}
-          {@const active = isActiveCell(date)}
-          {@const dayData = dayMap.get(dayKey(date))}
-          {@const visible = dayData?.visible ?? []}
-          {@const total = dayData?.total ?? []}
-          {@const overflow = dayData?.overflow ?? 0}
-          <!-- 键盘交互由网格容器统一处理（roving + Enter/Space），格本身只响应点击 -->
-          <!-- svelte-ignore a11y_click_events_have_key_events -->
-          <div
-            class="cd-calendar__cell"
-            class:cd-calendar__cell--week={mode === 'week'}
-            class:cd-calendar__cell--today={isToday}
-            class:cd-calendar__cell--selected={selected}
-            class:cd-calendar__cell--range-edge={rangeEdgeCell}
-            class:cd-calendar__cell--in-range={inRangeCell}
-            class:cd-calendar__cell--outside={outside}
-            class:cd-calendar__cell--weekend={weekend}
-            class:cd-calendar__cell--disabled={disabled}
-            class:cd-calendar__cell--past={past}
-            class:cd-calendar__cell--active={active}
-            role="gridcell"
-            tabindex={disabled ? undefined : active ? 0 : -1}
-            aria-selected={selected || rangeEdgeCell || undefined}
-            aria-disabled={disabled || undefined}
-            aria-current={isToday ? 'date' : undefined}
-            onclick={() => onCellActivate(date)}
-            onpointerenter={() => onCellHover(date)}
-          >
-            {#if dateCell}
-              {@render dateCell({ date, events: total, isToday, isOutside: outside, disabled })}
-            {:else}
-              <div class="cd-calendar__date">{dayNumber(date)}</div>
-              {#if dateGridRender}
-                {@const extraSnippet = dateGridRender(dayKey(date), date)}
-                {#if extraSnippet}{@render extraSnippet()}{/if}
-              {/if}
-              <div class="cd-calendar__events">
-                {#each visible as ev (ev.key)}
-                  {#if event}
-                    {@render event({ event: ev })}
+    <div class="cd-calendar-week-scroll-wrapper">
+      <div class="cd-calendar-week-scroll" bind:clientHeight={scrollContentHeight}>
+        {@render timeCol()}
+        {#each columnDates as d (d.getTime())}
+          {@render dayCol(d, true, markWeekend && isWeekend(d))}
+        {/each}
+      </div>
+    </div>
+  </div>
+{:else}
+  <!-- ===== month 视图（对齐 Semi monthCalendar）===== -->
+  <div class="cd-calendar-month" role="grid" aria-label={title} style:height={sizePx(height)} style:width={sizePx(width)}>
+    <div class="cd-calendar-month-sticky-top" role="presentation">
+      {#if header}{@render header()}{/if}
+      <!-- 星期表头（对齐 Semi renderHeader：month-header > grid > grid-row li） -->
+      <div class="cd-calendar-month-header" role="presentation">
+        <div class="cd-calendar-month-grid" role="presentation">
+          <!-- svelte-ignore a11y_no_noninteractive_element_to_interactive_role -->
+          <ul class="cd-calendar-month-grid-row" role="row">
+            {#each monthHeaderWeekdays as wd, i (i)}
+              <!-- svelte-ignore a11y_no_noninteractive_element_to_interactive_role -->
+              <li
+                class:cd-calendar-weekend={markWeekend && wd.weekend}
+                role="columnheader"
+                aria-label={wd.name}
+              ><span>{wd.name}</span></li>
+            {/each}
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="cd-calendar-month-grid-wrapper" role="presentation">
+      <div class="cd-calendar-month-week" role="presentation">
+        <ul class="cd-calendar-month-grid-col" role="presentation">
+          {#each monthWeeks as week, wi (wi)}
+            <!-- 每周行（对齐 Semi renderWeekRow：weekrow role=presentation > skeleton(li) + event-items） -->
+            <div class="cd-calendar-month-weekrow" role="presentation" bind:clientHeight={monthWeekH}>
+              <!-- svelte-ignore a11y_no_noninteractive_element_to_interactive_role -->
+              <ul class="cd-calendar-month-skeleton" role="row">
+                {#each week as cell, ci (cell.date.getTime())}
+                  {@const { remaining, all } = monthCellOverflow(wi, ci)}
+                  {@const isToday = isSameDay(cell.date, now)}
+                  {@const sameMonth = isSameMonth(cell.date, anchor)}
+                  {#snippet monthDate()}
+                    {#if renderDateDisplay}
+                      {@render renderDateDisplay(cell.date)}
+                    {:else if dayString(cell.date) === '1'}
+                      <!-- 对齐 Semi formatDayString：每月 1 号显示「X月 1」（月份缩写 + today-date） -->
+                      <span class="cd-calendar-month-date">{monthShortFmt.format(cell.date)}<span class="cd-calendar-today-date">&nbsp;{dayString(cell.date)}</span></span>
+                    {:else}
+                      <span class="cd-calendar-month-date"><span class="cd-calendar-today-date">{dayString(cell.date)}</span></span>
+                    {/if}
+                  {/snippet}
+                  {#if remaining > 0}
+                    <Popover
+                      trigger="click"
+                      position="bottom"
+                      onVisibleChange={(open) => { if (!open) onClose?.(new Event('close')); }}
+                    >
+                      <!-- svelte-ignore a11y_no_noninteractive_element_to_interactive_role -->
+                      <li
+                        class:cd-calendar-today={isToday}
+                        class:cd-calendar-weekend={markWeekend && isWeekend(cell.date)}
+                        class:cd-calendar-month-same={sameMonth}
+                        role="gridcell"
+                        aria-label={cell.date.toLocaleDateString()}
+                        aria-current={isToday ? 'date' : undefined}
+                        onclick={(e) => emitDayClick(cell.date, e)}
+                        onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); emitDayClick(cell.date, e); } }}
+                      >
+                        {@render monthDate()}
+                        <!-- svelte-ignore a11y_click_events_have_key_events -->
+                        <!-- svelte-ignore a11y_no_static_element_interactions -->
+                        <div
+                          class="cd-calendar-month-event-card-wrapper"
+                          onclick={(e) => { e.stopPropagation(); onMoreClick?.(e, cell.date, remaining); }}
+                        >{loc().t('Calendar.remaining', { count: remaining })}</div>
+                        {#if dateGridRender}
+                          {@const extra = dateGridRender(cell.date.toString(), cell.date)}
+                          {#if extra}{@render extra()}{/if}
+                        {/if}
+                      </li>
+                      {#snippet content()}
+                        <div class="cd-calendar-month-event-card">
+                          <div class="cd-calendar-month-event-card-header">
+                            <div class="cd-calendar-month-event-card-header-info">
+                              <div class="cd-calendar-month-event-card-header-info-weekday">{weekdayLongFmt.format(cell.date)}</div>
+                              <div class="cd-calendar-month-event-card-header-info-date">{dayString(cell.date)}</div>
+                            </div>
+                          </div>
+                          <div class="cd-calendar-month-event-card-body">
+                            <ul class="cd-calendar-month-event-card-list">
+                              {#each all as ev (ev.key)}
+                                <li>{@render eventContent(origEvent(ev.key, ev.children))}</li>
+                              {/each}
+                            </ul>
+                          </div>
+                        </div>
+                      {/snippet}
+                    </Popover>
                   {:else}
-                    <div
-                      class="cd-calendar__event"
-                      class:cd-calendar__event--disabled={ev.disabled}
-                      style:--cd-calendar-event-accent={ev.color ?? 'var(--cd-calendar-event-default-bg)'}
-                      role="button"
-                      tabindex={ev.disabled ? -1 : 0}
-                      aria-disabled={ev.disabled || undefined}
-                      aria-label={ev.title}
-                      title={ev.title}
-                      onclick={(e) => activateEvent(ev, e)}
-                      onkeydown={(e) => onEventKeydown(ev, e)}
+                    <!-- svelte-ignore a11y_no_noninteractive_element_to_interactive_role -->
+                    <li
+                      class:cd-calendar-today={isToday}
+                      class:cd-calendar-weekend={markWeekend && isWeekend(cell.date)}
+                      class:cd-calendar-month-same={sameMonth}
+                      role="gridcell"
+                      aria-label={cell.date.toLocaleDateString()}
+                      aria-current={isToday ? 'date' : undefined}
+                      onclick={(e) => emitDayClick(cell.date, e)}
+                      onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); emitDayClick(cell.date, e); } }}
                     >
-                      <span class="cd-calendar__event-bar" aria-hidden="true"></span>
-                      <span class="cd-calendar__event-title">{ev.title}</span>
-                    </div>
+                      {@render monthDate()}
+                      {#if dateGridRender}
+                        {@const extra = dateGridRender(cell.date.toString(), cell.date)}
+                        {#if extra}{@render extra()}{/if}
+                      {/if}
+                    </li>
                   {/if}
                 {/each}
-                {#if overflow > 0}
-                  <button
-                    type="button"
-                    class="cd-calendar__more"
-                    onclick={(e) => {
-                      e.stopPropagation();
-                      onMore(date, total);
-                    }}
-                  >
-                    {loc().t('Calendar.moreCount', { count: overflow })}
-                  </button>
-                {/if}
-              </div>
-            {/if}
-          </div>
-        {/each}
-      </div>
-    {/each}
-  </div>
-  {/if}
-{/snippet}
-
-{#if popup}
-  <div class="cd-calendar-popup" bind:this={triggerEl}>
-    {#if trigger}
-      {@render trigger({ open: isOpen, toggle: toggleOpen })}
-    {:else}
-      <button
-        type="button"
-        class="cd-calendar-popup__trigger"
-        aria-haspopup="dialog"
-        aria-expanded={isOpen}
-        onclick={toggleOpen}
-      >
-        <span>{title}</span>
-        <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true" focusable="false">
-          <path fill="currentColor" d="M5 1v1H3.5A1.5 1.5 0 0 0 2 3.5v9A1.5 1.5 0 0 0 3.5 14h9a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 12.5 2H11V1h-1v1H6V1H5Zm7.5 4.5v7h-9v-7h9Z" />
-        </svg>
-      </button>
-    {/if}
-    {#if isOpen}
-      <div
-        bind:this={panelEl}
-        class="cd-calendar cd-calendar--popup"
-        role="dialog"
-        aria-label={ariaLabel ?? title}
-        use:floating={{ trigger: triggerEl, placement, offset: 8, autoAdjust: true, getContainer }}
-        style:inline-size={width ? (typeof width === 'number' ? `${width}px` : width) : undefined}
-        style:block-size={height ? (typeof height === 'number' ? `${height}px` : height) : undefined}
-      >
-        {@render calendarBody()}
+              </ul>
+              <ul class="cd-calendar-event-items">
+                {#each monthWeekSpans(wi) as ev (ev.key)}
+                  <li class="cd-calendar-event-item cd-calendar-event-month" style={monthSpanStyle(ev)}>
+                    {@render eventContent(origEvent(ev.key, ev.children))}
+                  </li>
+                {/each}
+              </ul>
+            </div>
+          {/each}
+        </ul>
       </div>
-    {/if}
-  </div>
-{:else}
-  <div
-    class="cd-calendar"
-    bind:this={rootEl}
-    style:inline-size={width ? (typeof width === 'number' ? `${width}px` : width) : undefined}
-    style:block-size={height ? (typeof height === 'number' ? `${height}px` : height) : undefined}
-  >
-    {@render calendarBody()}
+    </div>
   </div>
 {/if}
 
 <style>
-  .cd-calendar {
-    display: flex;
-    flex-direction: column;
-    gap: var(--cd-spacing-tight);
-    color: var(--cd-calendar-text);
-    background: var(--cd-calendar-bg);
-    border: 1px solid var(--cd-calendar-border);
-    border-radius: var(--cd-calendar-radius);
-    font-size: var(--cd-font-size-body);
+  /* ============================ 通用（对齐 Semi calendar.scss：根无 border/背景/圆角，仅 ul/li reset）============================ */
+  /* ul/li reset 用 :where() 保持 0 特异性，避免压过组件自身 class 的 padding（如 tag padding-right）。 */
+  .cd-calendar-day :global(:where(ul, li)),
+  .cd-calendar-week :global(:where(ul, li)),
+  .cd-calendar-month :global(:where(ul, li)) {
+    padding: 0;
+    margin: 0;
+    list-style: none;
   }
 
-  .cd-calendar__toolbar {
-    display: flex;
-    align-items: center;
-    gap: var(--cd-spacing-tight);
-    padding: var(--cd-spacing-tight) var(--cd-spacing-base-tight);
-    background: var(--cd-calendar-header-bg);
-    border-bottom: 1px solid var(--cd-calendar-border);
-    border-start-start-radius: var(--cd-calendar-radius);
-    border-start-end-radius: var(--cd-calendar-radius);
+  /* sticky 顶部（对齐 Semi -sticky-top） */
+  .cd-calendar-day-sticky-top,
+  .cd-calendar-week-sticky-top,
+  .cd-calendar-month-sticky-top {
+    position: sticky;
+    inset-block-start: 0;
+    inset-inline: 0;
+    z-index: var(--cd-calendar-z-stickytop);
+    background: var(--cd-calendar-color-sticky-bg);
   }
 
-  .cd-calendar__title {
-    flex: 1 1 auto;
-    font-weight: 600;
+  /* 周末底色（对齐 Semi .calendar-weekend） */
+  .cd-calendar-weekend {
+    background: var(--cd-calendar-color-weekend-bg);
   }
 
-  .cd-calendar__nav,
-  .cd-calendar__today {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: var(--cd-spacing-extra-tight) var(--cd-spacing-tight);
-    color: inherit;
-    background: transparent;
-    border: 1px solid var(--cd-calendar-border);
-    border-radius: var(--cd-calendar-radius);
-    cursor: pointer;
-    font: inherit;
-    transition: background-color var(--cd-motion-duration-fast) var(--cd-motion-ease-standard);
+  /* 事件容器（对齐 Semi .event-items { pointer-events:none; & > * { auto } .event-day {...} }） */
+  .cd-calendar-event-items {
+    pointer-events: none;
   }
-  .cd-calendar__nav:hover,
-  .cd-calendar__today:hover {
-    background: var(--cd-calendar-cell-bg-hover);
+  .cd-calendar-event-items > :global(*) {
+    pointer-events: auto;
   }
-  .cd-calendar__nav:focus-visible,
-  .cd-calendar__today:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 2px var(--cd-focus-ring);
+  .cd-calendar-event-item {
+    overflow: hidden;
   }
-
-  .cd-calendar__grid {
-    display: flex;
-    flex-direction: column;
+  /* 对齐 Semi .event-day：定位/尺寸/溢出，外观由 children 决定 */
+  .cd-calendar-event-day {
+    position: absolute;
+    left: 0;
+    right: 0;
+    z-index: var(--cd-calendar-z-item);
+  }
+  /* 对齐 Semi .event-allday { position:absolute; & > * { font-size-regular } }：
+     父全天区 font-size:26px 令 1em=26px → top:${topInd}em 步长=26px；条高=26px(与步长一致，不重叠)；
+     children 恢复 regular 字号并 height:100% 撑满条。 */
+  .cd-calendar-event-allday,
+  .cd-calendar-event-month {
+    position: absolute;
   }
-
-  .cd-calendar__row {
-    display: grid;
-    grid-template-columns: repeat(7, 1fr);
+  .cd-calendar-event-allday {
+    height: var(--cd-calendar-height-allday);
   }
-
-  .cd-calendar__weekday {
-    padding: var(--cd-spacing-extra-tight);
-    color: var(--cd-calendar-text-secondary);
-    text-align: center;
-    font-weight: 500;
-    border-block-end: 1px solid var(--cd-calendar-border);
+  .cd-calendar-event-allday > :global(*) {
+    font-size: var(--cd-font-size-regular);
   }
-  .cd-calendar__weekday--weekend {
-    background: var(--cd-calendar-weekend-bg);
+  .cd-calendar-event-month > :global(*) {
+    font-size: var(--cd-font-size-regular);
   }
 
-  .cd-calendar__cell {
-    display: flex;
-    flex-direction: column;
-    gap: var(--cd-spacing-extra-tight);
-    min-block-size: var(--cd-calendar-cell-min-h);
-    padding: var(--cd-spacing-extra-tight);
-    border-inline-end: 1px solid var(--cd-calendar-border);
-    border-block-end: 1px solid var(--cd-calendar-border);
-    cursor: pointer;
-    outline: none;
-    transition: background-color var(--cd-motion-duration-fast) var(--cd-motion-ease-standard);
+  /* ============================ day / week 共用（对齐 Semi .calendar-day, .calendar-week）============================ */
+  /* 对齐 Semi .calendar-day, .calendar-week { overflow: auto }（根滚动容器，day 为默认 block）。 */
+  .cd-calendar-day,
+  .cd-calendar-week {
+    overflow: auto;
   }
-  .cd-calendar__cell:hover {
-    background: var(--cd-calendar-cell-bg-hover);
-  }
-  .cd-calendar__cell:focus-visible {
-    box-shadow: inset 0 0 0 2px var(--cd-focus-ring);
+  /* 对齐 Semi .calendar-week { position: relative; display: grid }。 */
+  .cd-calendar-week {
+    position: relative;
+    display: grid;
   }
-  /* grid roving 焦点容器自身不需可见焦点环（焦点落在活动格） */
-  .cd-calendar__grid:focus {
-    outline: none;
+
+  /* sticky 左列（时间列 / tag 列，对齐 Semi -sticky-left） */
+  .cd-calendar-day-sticky-left,
+  .cd-calendar-week-sticky-left {
+    position: sticky;
+    inset-inline-start: 0;
+    z-index: var(--cd-calendar-z-stickyleft);
+    background: var(--cd-calendar-color-sticky-bg);
   }
 
-  .cd-calendar__cell--weekend {
-    background: var(--cd-calendar-weekend-bg);
+  /* tag（月份 / 全天标签列）——逐字对齐 Semi .tag { font-size-regular; min-width:70px; color:day-text }。
+     box-sizing:content-box 对齐 Semi（全局默认 content-box）：min-width 70 + padding-right 8 = 78，
+     与 time 列（timeItems 70 + time padding 8 = 78）同宽，竖线对齐。文档站全局 border-box 会污染，故显式声明。 */
+  .cd-calendar-tag {
+    box-sizing: content-box;
+    min-width: var(--cd-calendar-width-tag-col);
+    color: var(--cd-calendar-color-day-text-default);
+    font-size: var(--cd-font-size-regular);
   }
-  .cd-calendar__cell--today {
-    background: var(--cd-calendar-today-bg);
+  /* 对齐 Semi .all-day .tag { text-align:right; padding-right:8px; span { line-height:26px } } */
+  .cd-calendar-all-day-tag {
+    text-align: right;
+    padding-right: var(--cd-calendar-spacing-allday-tag-padding-right);
   }
-  .cd-calendar__cell--today .cd-calendar__date {
-    color: var(--cd-calendar-today-fg);
-    font-weight: 700;
+  .cd-calendar-all-day-tag span {
+    line-height: var(--cd-calendar-height-allday);
   }
-  .cd-calendar__cell--selected {
-    box-shadow: inset 0 0 0 2px var(--cd-calendar-selected-border);
+  /* 对齐 Semi .week &-tag { text-align:right; line-height:26px; &:first-child { padding-right:8px } } */
+  .cd-calendar-week-tag {
+    text-align: right;
+    line-height: var(--cd-calendar-height-allday);
+    padding-right: var(--cd-calendar-spacing-tag-child-padding-right);
   }
-  /* range 区间内：浅底连续填充 */
-  .cd-calendar__cell--in-range {
-    background: var(--cd-calendar-range-bg, var(--cd-calendar-today-bg));
+
+  /* 全天区（对齐 Semi .all-day） */
+  .cd-calendar-all-day {
+    display: flex;
+    flex: 1 1 auto;
+    border-bottom: 1px solid var(--cd-calendar-color-day-border);
   }
-  /* range 端点：实心边框高亮（起止） */
-  .cd-calendar__cell--range-edge {
-    background: var(--cd-calendar-range-edge-bg, var(--cd-calendar-today-bg));
-    box-shadow: inset 0 0 0 2px var(--cd-calendar-selected-border);
+  /* 对齐 Semi .calendar-week .all-day { font-size: $font-calendar_day_allDay-fontSize(26px) }：
+     令全天区内 1em=26px，跨天条 top:${topInd}em 步长=26px、行高=26px，行与行不重叠。 */
+  .cd-calendar-week .cd-calendar-all-day {
+    font-size: var(--cd-calendar-font-day-allday-font-size);
   }
-  /* week 模式：单行更高，事件区有更多展示空间 */
-  .cd-calendar__cell--week {
-    min-block-size: var(--cd-calendar-week-cell-min-h, calc(var(--cd-calendar-cell-min-h) * 3));
+  .cd-calendar-all-day-content {
+    position: relative;
+    display: flex;
+    flex: 1 0 auto;
+    height: 100%;
+    min-height: var(--cd-calendar-height-allday);
+    min-width: calc(var(--cd-calendar-col-count, 1) * var(--cd-calendar-width-day-grid));
   }
-  .cd-calendar__cell--outside .cd-calendar__date {
-    color: var(--cd-calendar-text-secondary);
+  /* week 全天区列骨架（对齐 Semi .all-day-skeleton） */
+  .cd-calendar-all-day-skeleton {
+    display: flex;
+    flex: 1 1 auto;
   }
-  .cd-calendar__cell--past .cd-calendar__date {
-    opacity: 0.6;
+  .cd-calendar-all-day-skeleton li {
+    flex: 1 1 auto;
+    min-width: var(--cd-calendar-width-day-grid);
+    box-sizing: border-box;
+    border-right: 1px solid var(--cd-calendar-color-day-border);
   }
-  .cd-calendar__cell--disabled {
-    background: var(--cd-calendar-disabled-bg);
-    cursor: not-allowed;
-    background-image: repeating-linear-gradient(
-      45deg,
-      transparent,
-      transparent 4px,
-      var(--cd-calendar-disabled-bg) 4px,
-      var(--cd-calendar-disabled-bg) 8px
-    );
+  .cd-calendar-all-day-skeleton li:last-child {
+    border-right: 1px solid transparent;
   }
-  .cd-calendar__cell--disabled:hover {
-    background-color: var(--cd-calendar-disabled-bg);
+  .cd-calendar-all-day .cd-calendar-event-items {
+    position: absolute;
+    inset-inline: 0;
+    width: 100%;
   }
 
-  .cd-calendar__date {
-    align-self: flex-end;
-    font-size: var(--cd-font-size-body);
-    line-height: 1.2;
+  /* 滚动区容器高度（对齐 Semi -scroll-wrapper：100% - 表头/全天区高，约束滚动区不撑破容器） */
+  .cd-calendar-day-scroll-wrapper {
+    height: var(--cd-calendar-height-day-scroll-wrapper);
+  }
+  .cd-calendar-week-scroll-wrapper {
+    height: var(--cd-calendar-height-week-scroll-wrapper);
+  }
+  /* 滚动内容区（对齐 Semi -scroll：无自身 overflow，滚动由根 .calendar-day/week 承担） */
+  .cd-calendar-day-scroll,
+  .cd-calendar-week-scroll {
+    display: flex;
+    flex: 1 1 auto;
+    position: relative;
+    align-items: flex-start;
   }
 
-  .cd-calendar__events {
+  /* 时间列（对齐 Semi .calendar-time / .time-items / .time-item） */
+  .cd-calendar-time {
+    height: auto;
     display: flex;
-    flex-direction: column;
-    gap: 2px;
-    min-inline-size: 0;
+    flex: none;
+    align-items: flex-start;
+    padding-right: var(--cd-calendar-spacing-time-padding-right);
+  }
+  .cd-calendar-time-items {
+    position: relative;
+    min-width: var(--cd-calendar-width-tag-col);
+    background: var(--cd-calendar-color-bg);
+    box-sizing: border-box;
+    margin-left: auto;
+  }
+  .cd-calendar-time-item {
+    position: relative;
+    height: var(--cd-calendar-height-day-grid);
+    text-align: right;
+  }
+  .cd-calendar-time-item span {
+    display: block;
+    position: relative;
+    top: var(--cd-calendar-spacing-time-item-span-top);
+    color: var(--cd-calendar-color-day-text-default);
+    font-size: var(--cd-font-size-regular);
   }
 
-  .cd-calendar__event {
+  /* 单日列（对齐 Semi .calendar-grid { display:flex; align-items:flex-start; flex:1 1 auto; position:relative }） */
+  .cd-calendar-grid {
     display: flex;
-    align-items: center;
-    gap: var(--cd-spacing-extra-tight);
-    min-inline-size: 0;
-    padding-block: 1px;
-    padding-inline: var(--cd-spacing-extra-tight);
-    color: var(--cd-calendar-text);
-    background: var(--cd-calendar-cell-bg-hover);
-    border-radius: var(--cd-calendar-radius);
-    font-size: 0.75rem;
-    line-height: 1.4;
-  }
-  .cd-calendar__event--disabled {
-    opacity: 0.5;
-  }
-  /* 事件块作为 role=button：键盘焦点环可见 */
-  .cd-calendar__event[role='button'] {
-    cursor: pointer;
-    text-align: start;
+    align-items: flex-start;
+    flex: 1 1 auto;
+    position: relative;
   }
-  .cd-calendar__event[role='button']:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 2px var(--cd-focus-ring);
+  .cd-calendar-grid-content {
+    flex: 1 0 auto;
+    min-width: var(--cd-calendar-width-day-grid);
+    height: 100%;
+    position: relative;
   }
-  .cd-calendar__event--disabled[role='button'] {
-    cursor: not-allowed;
+  .cd-calendar-grid-skeleton {
+    position: relative;
+    box-sizing: border-box;
   }
-  .cd-calendar__event-bar {
-    flex: 0 0 auto;
-    inline-size: 3px;
-    align-self: stretch;
-    min-block-size: 0.9em;
-    background: var(--cd-calendar-event-accent, var(--cd-calendar-event-default-bg));
-    border-radius: 2px;
+  .cd-calendar-grid-skeleton li {
+    position: relative;
+    height: calc(var(--cd-calendar-height-day-grid) / 2);
   }
-  .cd-calendar__event-title {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+  .cd-calendar-grid-skeleton li:last-child,
+  .cd-calendar-grid-skeleton li:nth-last-child(2) {
+    height: 0;
   }
-
-  .cd-calendar__more {
-    align-self: flex-start;
-    padding: 0;
-    color: var(--cd-calendar-more-color);
-    background: transparent;
-    border: none;
-    cursor: pointer;
-    font: inherit;
-    font-size: var(--cd-font-size-caption, 0.85em);
+  /* 整点横线（对齐 Semi .grid-skeleton-row-line::after），首条不画 */
+  /* 对齐 Semi .grid-skeleton-row-line::after：只有 left/right，无 top/bottom
+     （横线停在整点 li 静态流位置 = 整点处，与时间标签垂直对齐）。 */
+  .cd-calendar-grid-skeleton-row-line::after {
+    content: '';
+    border-bottom: 1px solid var(--cd-calendar-color-day-border);
+    position: absolute;
+    left: 0;
+    right: 0;
+    z-index: var(--cd-calendar-z-line);
+    pointer-events: none;
   }
-  .cd-calendar__more:hover {
-    text-decoration: underline;
+  .cd-calendar-grid-skeleton-row-line:first-child::after {
+    border: 0;
   }
-  .cd-calendar__more:focus-visible {
+  /* 半小时可点击格：对齐 Semi——空 li 可点击，无 hover 背景，仅 focus 环 */
+  .cd-calendar-grid-skeleton li {
+    cursor: pointer;
+  }
+  .cd-calendar-grid-skeleton li:focus-visible {
     outline: none;
-    box-shadow: 0 0 0 2px var(--cd-focus-ring);
-    border-radius: var(--cd-calendar-radius);
+    box-shadow: inset 0 0 0 2px var(--cd-focus-ring);
   }
 
-  /* --- day 视图：单日时间轴 --- */
-  .cd-calendar__timeline {
-    display: flex;
-    flex-direction: column;
+  /* 当前时间红线 + 原点（对齐 Semi .grid-curr-line / -circle） */
+  .cd-calendar-grid-curr-circle {
+    background: var(--cd-calendar-color-currcircle-bg-default);
+    border-radius: var(--cd-calendar-radius-today-date);
+    position: absolute;
+    height: var(--cd-calendar-width-currcircle);
+    width: var(--cd-calendar-width-currcircle);
+    margin-top: var(--cd-calendar-spacing-currcircle-margin-top);
+    z-index: var(--cd-calendar-z-curr);
+  }
+  .cd-calendar-grid-curr-line {
+    position: absolute;
+    left: 0;
+    right: 0;
+    z-index: var(--cd-calendar-z-curr);
+    border-top: 1px solid var(--cd-calendar-color-curr-border);
+    pointer-events: none;
   }
 
-  .cd-calendar__allday {
+  /* ============================ week / range 表头（对齐 Semi .calendar-week-header / -grid-row）============================ */
+  .cd-calendar-week-header {
     display: flex;
+    flex: 1 1 auto;
     align-items: flex-start;
-    gap: var(--cd-spacing-tight);
-    padding: var(--cd-spacing-extra-tight) var(--cd-spacing-tight);
-    border-block-end: 1px solid var(--cd-calendar-border);
-    background: var(--cd-calendar-header-bg);
-  }
-  .cd-calendar__allday-label {
-    flex: 0 0 var(--cd-calendar-hour-label-w, 56px);
-    color: var(--cd-calendar-text-secondary);
-    font-weight: 500;
-    text-align: end;
-  }
-  .cd-calendar__allday-events {
+    font-size: var(--cd-font-size-regular);
+    color: var(--cd-calendar-color-day-text-default);
+    border-bottom: 1px solid var(--cd-calendar-color-day-border);
+  }
+  .cd-calendar-week-grid {
     display: flex;
-    flex-direction: column;
-    gap: 2px;
-    min-inline-size: 0;
-    flex: 1 1 auto;
+    flex: 1 0 auto;
+    min-width: calc(var(--cd-calendar-col-count, 7) * var(--cd-calendar-width-day-grid));
+  }
+  .cd-calendar-week-grid-row {
+    display: flex;
+    flex: 1 0 auto;
+  }
+  .cd-calendar-week-grid-row li {
+    display: flex;
+    flex: 1 1 0;
+    min-width: var(--cd-calendar-width-day-grid);
+    border-right: 1px solid transparent;
+    box-sizing: border-box;
+    justify-content: center;
+    align-items: center;
+    height: auto;
+    line-height: var(--cd-calendar-height-allday);
+  }
+  .cd-calendar-week-grid-row li > :global(span) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    line-height: var(--cd-calendar-height-allday);
+  }
+  /* 星期名 span（对齐 Semi li > span:last-child { padding: 0 4px }） */
+  .cd-calendar-week-grid-row li > :global(span:last-child) {
+    padding: 0 var(--cd-calendar-spacing-grid-row-span-child-padding-x);
+  }
+  /* today 日期圆标（对齐 Semi .today .today-date） */
+  .cd-calendar-today .cd-calendar-today-date {
+    width: var(--cd-calendar-width-today-date);
+    height: var(--cd-calendar-width-today-date);
+    line-height: var(--cd-calendar-width-today-date);
+    text-align: center;
+    border-radius: var(--cd-calendar-radius-today-date);
+    background: var(--cd-calendar-color-bg-active);
+    color: var(--cd-calendar-color-text-active);
+  }
+
+  /* week 列竖线（对齐 Semi .week .grid-skeleton li border-right，最后列不画） */
+  .cd-calendar-week .cd-calendar-grid-skeleton li {
+    border-right: 1px solid var(--cd-calendar-color-day-border);
+  }
+  .cd-calendar-week .cd-calendar-grid:last-child .cd-calendar-grid-content .cd-calendar-grid-skeleton li {
+    border-right: 0;
   }
 
-  .cd-calendar__hours {
+  /* ============================ month 视图（对齐 Semi .calendar-month）============================ */
+  .cd-calendar-month {
     display: flex;
     flex-direction: column;
+    overflow: hidden;
+    font-size: var(--cd-font-size-regular);
   }
-  .cd-calendar__hour {
+  .cd-calendar-month-header {
     display: flex;
-    align-items: stretch;
-    gap: var(--cd-spacing-tight);
-    min-block-size: var(--cd-calendar-hour-min-h, 40px);
-    border-block-end: 1px solid var(--cd-calendar-border);
-  }
-  .cd-calendar__hour:last-child {
-    border-block-end: none;
-  }
-  .cd-calendar__hour-label {
-    flex: 0 0 var(--cd-calendar-hour-label-w, 56px);
-    padding: var(--cd-spacing-extra-tight) var(--cd-spacing-tight);
-    color: var(--cd-calendar-text-secondary);
-    text-align: end;
-    font-variant-numeric: tabular-nums;
-    border-inline-end: 1px solid var(--cd-calendar-border);
-  }
-  .cd-calendar__hour-slot {
+    flex: 1 1 auto;
+    align-items: flex-start;
+    color: var(--cd-calendar-color-day-text-default);
+  }
+  .cd-calendar-month-grid {
+    flex: 1 1 auto;
+    box-sizing: border-box;
+  }
+  .cd-calendar-month-grid-row {
     display: flex;
-    flex-direction: column;
-    gap: 2px;
+    box-sizing: border-box;
+  }
+  .cd-calendar-month-grid-row li {
+    flex: 1;
+    white-space: nowrap;
+    text-align: right;
+    padding-right: var(--cd-calendar-spacing-skeletion-grid-row-li-padding-right);
+    box-sizing: border-box;
+    border-bottom: 1px solid var(--cd-calendar-color-day-border);
+    color: var(--cd-calendar-color-day-text-default);
+    line-height: var(--cd-calendar-height-allday);
+  }
+  .cd-calendar-month-grid-row li span {
+    display: inline-block;
+    text-align: right;
+  }
+  .cd-calendar-month-grid-wrapper {
     flex: 1 1 auto;
-    min-inline-size: 0;
-    padding: var(--cd-spacing-extra-tight);
+    min-height: 0;
   }
-  .cd-calendar__event--timed {
-    padding-block: 2px;
+  .cd-calendar-month-week {
+    height: 100%;
   }
-  .cd-calendar__event-time {
-    flex: 0 0 auto;
-    color: var(--cd-calendar-text-secondary);
-    font-variant-numeric: tabular-nums;
-    font-size: 0.75rem;
+  .cd-calendar-month-grid-col {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    height: 100%;
   }
-
-  /* --- 虚拟化时间轴：滚动视口（block 布局，避免 flex 压缩撑高占位）--- */
-  .cd-calendar__hours--virtual {
-    display: block;
-    overflow-y: auto;
+  /* 每周行（对齐 Semi .month-weekrow） */
+  .cd-calendar-month-weekrow {
+    flex: 1 1 auto;
     position: relative;
+    min-height: 0;
   }
-  .cd-calendar__hours-spacer {
-    position: relative;
-    flex: none;
+  /* 日格骨架（对齐 Semi .month-skeleton，绝对定位铺满整周行） */
+  .cd-calendar-month-skeleton {
+    display: flex;
+    box-sizing: border-box;
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
   }
-
-  /* --- 弹层模式 --- */
-  .cd-calendar-popup {
+  .cd-calendar-month-skeleton li {
+    flex: 1;
     position: relative;
-    display: inline-block;
-  }
-  .cd-calendar-popup__trigger {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--cd-spacing-tight);
-    padding: var(--cd-spacing-extra-tight) var(--cd-spacing-base-tight);
-    color: var(--cd-calendar-text);
-    background: var(--cd-calendar-bg);
-    border: 1px solid var(--cd-calendar-border);
-    border-radius: var(--cd-calendar-radius);
+    overflow: hidden;
+    height: 100%;
+    white-space: nowrap;
+    text-align: right;
+    padding-right: var(--cd-calendar-spacing-skeletion-grid-row-li-padding-right);
+    padding-top: var(--cd-calendar-spacing-skeleton-li-child-padding-top);
+    box-sizing: border-box;
+    border-right: 1px solid var(--cd-calendar-color-day-border);
+    border-bottom: 1px solid var(--cd-calendar-color-day-border);
+    color: var(--cd-calendar-color-day-text-default);
     cursor: pointer;
-    font: inherit;
+    outline: none;
   }
-  .cd-calendar-popup__trigger:hover {
-    background: var(--cd-calendar-cell-bg-hover);
+  .cd-calendar-month-skeleton li:last-child {
+    border-right: none;
   }
-  .cd-calendar-popup__trigger:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 2px var(--cd-focus-ring);
+  .cd-calendar-month-skeleton li:focus-visible {
+    box-shadow: inset 0 0 0 2px var(--cd-focus-ring);
   }
-  .cd-calendar--popup {
-    z-index: var(--cd-z-popover, 1050);
-    inline-size: max-content;
-    box-shadow: var(--cd-shadow-elevated, 0 4px 16px rgb(0 0 0 / 0.12));
+  /* 当月日期文字深黑色——逐字对齐 Semi .month-skeleton .month-same { color: date-text-default }
+     （后代 selector 特异性 0,2,0 > .month-skeleton li 的 0,1,1，深黑压过灰）。 */
+  .cd-calendar-month-skeleton .cd-calendar-month-same {
+    color: var(--cd-calendar-color-date-text-default);
   }
-
-  /* showCurrTime 当前时间红线：绝对定位，跨越整个小时列区域 */
-  .cd-calendar__curr-time {
+  /* 日期数字（对齐 Semi .month-date：绝对定位右上，today-date 圆标） */
+  .cd-calendar-month-date {
     position: absolute;
-    inset-inline: 0;
-    block-size: 2px;
-    background: var(--cd-calendar-curr-time-color, var(--cd-color-danger, #f5222d));
-    z-index: 1;
-    pointer-events: none;
+    right: var(--cd-calendar-spacing-month-date-right);
+    z-index: var(--cd-calendar-z-line);
   }
-  .cd-calendar__curr-time::before {
-    content: '';
+  .cd-calendar-today .cd-calendar-month-date .cd-calendar-today-date {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--cd-calendar-width-today-date);
+    height: var(--cd-calendar-width-today-date);
+    border-radius: var(--cd-calendar-radius-today-date);
+    background: var(--cd-calendar-color-bg-active);
+    color: var(--cd-calendar-color-text-active);
+  }
+  /* 跨天条层（对齐 Semi .month .event-items { position:absolute; top:31px; right:0; bottom:20px; left:0; overflow:hidden }） */
+  .cd-calendar-month-weekrow .cd-calendar-event-items {
+    position: absolute;
+    top: var(--cd-calendar-spacing-event-items-top);
+    right: 0;
+    bottom: var(--cd-calendar-spacing-event-items-bottom);
+    left: 0;
+    overflow: hidden;
+  }
+  .cd-calendar-month-weekrow .cd-calendar-event-month {
+    height: var(--cd-calendar-height-month-week-row-event-month);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  /* 「还有 N 项」（对齐 Semi .month-event-card-wrapper：右下角，可点击） */
+  .cd-calendar-month-event-card-wrapper {
+    font-size: var(--cd-font-size-small);
+    display: block;
     position: absolute;
-    inset-block-start: 50%;
-    inset-inline-start: var(--cd-calendar-hour-label-w, 56px);
-    transform: translateY(-50%);
-    inline-size: 8px;
-    block-size: 8px;
-    border-radius: 50%;
-    background: var(--cd-calendar-curr-time-color, var(--cd-color-danger, #f5222d));
+    right: var(--cd-calendar-spacing-month-event-card-wrapper-right);
+    bottom: 0;
+    z-index: var(--cd-calendar-z-item);
+    padding-top: var(--cd-calendar-spacing-month-event-card-wrapper-padding-top);
+    padding-inline: 2px;
+    color: var(--cd-calendar-color-day-text-default);
+    background: var(--cd-color-bg-2);
+    border-radius: var(--cd-border-radius-small, 3px);
+    user-select: none;
+    cursor: pointer;
+  }
+  .cd-calendar-month-event-card-wrapper:hover {
+    text-decoration: underline;
   }
 
-  @media (prefers-reduced-motion: reduce) {
-    .cd-calendar__cell,
-    .cd-calendar__nav,
-    .cd-calendar__today {
-      transition: none;
-    }
+  /* +N 卡片（对齐 Semi .month-event-card / -header-info / -body / -list） */
+  .cd-calendar-month-event-card {
+    width: var(--cd-calendar-width-card);
+    max-width: 100%;
+  }
+  .cd-calendar-month-event-card-header-info {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  .cd-calendar-month-event-card-header-info-weekday {
+    color: var(--cd-calendar-color-day-text-default);
+    font-size: var(--cd-font-size-small);
+  }
+  .cd-calendar-month-event-card-header-info-date {
+    color: var(--cd-calendar-color-date-text-default);
+    font-size: var(--cd-font-size-header, 1.5rem);
+    font-weight: 600;
+    margin-top: var(--cd-calendar-spacing-header-info-date-margin-top);
+  }
+  .cd-calendar-month-event-card-body {
+    padding: 0 var(--cd-calendar-spacing-body-pading-x);
+  }
+  .cd-calendar-month-event-card-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--cd-spacing-extra-tight);
+  }
+  .cd-calendar-month-event-card-list li {
+    padding: var(--cd-spacing-extra-tight) 0;
   }
 </style>