@super-calendar /本机

React Native渲染器 super-calendar手势驱动的，虚拟的 月/周/日 日历和日期选择器。运行于iOS， Android和web （web via） react-native-web）。

• 📆月网格加上天/ 3天/周/自定义n时间网格和议程
• 🤏捏缩放周/天网格（UI线程，不重新渲染）
• ✋拖动以选择、创建和移动：在周/天网格上按时间，在月和年网格上按整天
• ♾️通过虚拟化的快照分页视图 @legendapp/list
• 🧩自带活动类型(CalendarEvent<T>)和a renderEvent 逃生出口
• 🪝无头 useMonthGrid 和 useDateRange 用于完全自定义的ui
• 🎨主题表，带 darkTheme 预设

安装

npm install @super-calendar/native

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

同行依赖性: @legendapp/list (> = 3), date-fns (> = 3), react (> = 19), react-native (> = 0.74 < 2), react-native-gesture-handler (> = 2), react-native-reanimated (> = 4), react-native-worklets (> = 0.8)。

对于不需要Reanimated的仅选择器包，从 @super-calendar/native/picker 子路径。

使用

import { useState } from "react";
import { Calendar, type CalendarEvent } from "@super-calendar/native";

type MyEvent = { id: string; color: string };

const events: CalendarEvent<MyEvent>[] = [
  {
    id: "1",
    color: "#1F6FEB",
    title: "Lecture",
    start: new Date(2026, 5, 19, 10, 0),
    end: new Date(2026, 5, 19, 11, 30),
  },
];

export function MyCalendar() {
  const [mode, setMode] = useState<"month" | "week" | "day">("week");
  const [date, setDate] = useState(new Date());

  return (
    <Calendar
      mode={mode}
      date={date}
      events={events}
      weekStartsOn={1}
      onChangeDate={setDate}
      onPressEvent={(event) => console.log(event.id)}
      onPressDay={(day) => {
        setDate(day);
        setMode("day");
      }}
    />
  );
}

移动事件

通过 onDragEvent 并使用返回的 start 和 end. 在时间网格上，拖动多日事件的任何片段都可以预览整个事件 范围一起移动并保持其持续时间。拖动“调整大小”手柄以进行更改 只有开始或结束。看到 拖动指南.

在边缘分页之后，浮动事件的水平中心选择目标 日，其上边选择时间。

设置事件的 dragHandleColor 颜色，调整大小 TimeGrid 和 ResourceTimeline (两个方向)。默认为 theme.colors.eventText. showDragHandle={false} 仍然隐藏着时间网格。 您可以在安装后切换它，而无需更换 events 数组中。

顺风造型

每个可样式化的部分都是一个命名槽，它接受一个类（由Tailwind运行时解析），例如 uniwind 或NativeWind)和/或样式重写。一个类槽丢掉了它内置的主题样式，所以你的类拥有它的外观：

<Calendar
  mode="month"
  date={date}
  events={events}
  classNames={{
    title: "text-center text-xl font-bold text-indigo-900",
    weekday: "uppercase tracking-wider text-indigo-400",
  }}
  styles={{ more: { color: "#6366F1" } }}
  onChangeDate={setDate}
  onPressEvent={(event) => console.log(event.id)}
/>

看到 风格指南 用于插槽列表和uniwind设置。

chipHeight 和 chipGap 配置月通道和溢出行 Calendar， MonthView, MonthList． 本地的 MonthPager 也转发它们。DOM违约 保持18像素的高度和2像素的间距；原生高度保持其主题默认值。 更改任何一个维度都会更新已挂载的列表和寻呼机月份。 看到 月指南.

文档

看到 完整的文档 和 快速入门，包括主题、重复事件、时区和无头选择器。

许可证

麻省理工学院