@super-calendar / dom
的react-dom渲染器 super-calendar：虚拟化 月/周/日 日历和日期选择器由真正的DOM组件构建。没有React Native，就没有React - Native -web。
它是建立在无头的 @super-calendar/core 和Legend List的DOM渲染器。
安装
npm install @super-calendar/dom
也在 JSR： deno add jsr:@super-calendar/dom.
同行依赖性: @legendapp/list (> = 3), date-fns (> = 3), react (> = 19) react-dom (> = 19)。
使用
import { useState } from "react";
import { Calendar, type CalendarEvent } from "@super-calendar/dom";
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 [date, setDate] = useState(new Date());
return (
<Calendar
mode="week"
date={date}
events={events}
weekStartsOn={1}
onPressDay={setDate}
onPressEvent={(event) => console.log(event.id)}
/>
);
}
对于自定义拾取器，配对无头钩子(useDateRange， useMonthGrid), MonthList 和 TimeGrid，全部从此包中重新导出。
触摸事件手势
触摸和笔 TimeGrid 在拖拽之前，在8像素内等待300毫秒。
轻击从点击中按下事件；垂直滑动可以滚动网格。
其他联系人取消挂起的保持，不能接管活动拖动。
集 touchDragDelay 和 touchDragThreshold 在 TimeGrid 或者 Calendar 调整
持有。鼠标拖动和调整大小保留其现有行为。看到
拖动指南.
移动事件
通过 onDragEvent 并使用返回的 start 和 end.
时间网格边缘分页需要鼠标拖动。触摸和笔保持在 可见周期，因此在边缘附近休息不能重复改变日期。 看到 拖动指南.
在时间网格上，拖动多日事件的任何片段都可以预览整个事件 范围一起移动并保持其持续时间。拖动“调整大小”手柄以进行更改 只有开始或结束。看到 拖动指南.
月芯片尺寸
chipHeight 和 chipGap 配置月通道和溢出行 Calendar，
MonthView, MonthList． 本地的 MonthPager 也转发它们。DOM违约
保持18像素的高度和2像素的间距；原生高度保持其主题默认值。
更改任何一个维度都会更新已挂载的列表和寻呼机月份。
看到 月指南.
样式
开箱即用的日历完全按照主题设计样式，不需要样式表。来重新设计特定部件的样式 顺风 或者你自己的CSS，每个元素都是一个命名的slot: pass classNames (或 styles)，并使用 data-* 状态变体 data-[today]:.
<Calendar
mode="month"
date={date}
classNames={{
title: "text-center text-xl font-bold",
dayBadge: "rounded-full data-[today]:bg-indigo-600 data-[today]:text-white",
}}
/>
始终保持槽的结构布局；只有它的主题外观为您的类保留，因此类胜过内联默认值。看到 风格指南.
在时间网格上，一个空槽的触屏会发出呼叫 onPressCell 从专栏的
点击。滑动和取消的联系人不按槽。鼠标和笔保留
drag-to-create行为。看到 DOM指南.
文档
许可证
麻省理工学院