@super-calendar /核心

的渲染不可知论核心 super-calendar日期数学、选择模型、事件布局、月网格生成器、无头钩子和中性主题标记。

它没有从React Native、React -dom、Reanimated、Gesture Handler或Legend List中导入任何东西，所以它可以绑定到任何渲染器中。使用它来驱动您自己的UI，或将其与 @super-calendar/dom (react-dom)或 @super-calendar/native (本机)反应。

安装

npm install @super-calendar/core

也在 JSR： deno add jsr:@super-calendar/core.

同行依赖性: date-fns (> = 3) react (> = 19)。

使用

从headless构建一个完全自定义的月网格 useMonthGrid 钩。它返回周、工作日头和每天的状态，供您按照自己的喜好呈现。

import { useMonthGrid } from "@super-calendar/core";

function MyGrid({ month }: { month: Date }) {
  const { weeks, weekdays } = useMonthGrid(month, { weekStartsOn: 1 });

  return weeks.map((week) =>
    week.days.map((day) => (
      // day carries isToday / isSelected / isInRange / isDisabled / isCurrentMonth
      <DayCell key={day.date.toISOString()} day={day} />
    )),
  );
}

管理单个、多个或范围选择 useDateRange：

import { useDateRange } from "@super-calendar/core";

const range = useDateRange({ mode: "range" });

对于自定义时间网格拖动， clampMoveStartMinutes 保留已移动的事件 从可见的小时窗口内开始，同时允许其持续时间不变 把结尾拖过午夜：

import { clampMoveStartMinutes } from "@super-calendar/core";

const startMinutes = clampMoveStartMinutes(rawStartMinutes, minHour, maxHour, snapMinutes);

在时间网格上定位你自己的标记， wallClockHours(date, dayStart, nextDayStart) 返回分式时钟小时，固定到一天。它匹配 layoutDayEvents， 哪些事件按时钟时间排列，以便它们与时钟上的小时标签对齐 夏令时改日。 clockHoursBetween(from, to) 返回a的行数 跨度覆盖。

使用 resolveDraggedBounds 移动或调整大小相等的开始和结束增量 移动事件的同时保留经过的持续时间，包括日光 保存更改。对于调整大小，将想要保持固定的边缘设置为0。

CalendarEvent<T> 包含可选的 dragHandleColor: string 对于本地人来说 渲染器的时间网格和资源时间轴调整手柄大小。当省略时， 掌握使用 theme.colors.eventText． Core保留字段而不解释它。

文档

看到 完整的文档 和 API参考.

许可证

麻省理工学院