renCal SDK
构建视图插件 renCal． 视图是一个React组件，它与内置的周视图、月视图和年视图一起显示。这个包有插件API、renCal的Tailwind设计令牌和一个不需要配置的构建命令。
设置
pnpm add -D @rencomputer/rencal-sdk @types/react @types/react-dom
将脚本添加到 package.json：
{
"scripts": {
"build": "rencal-sdk build",
"dev": "rencal-sdk dev"
}
}
扩展共享的 tsconfig.json：
{ "extends": "@rencomputer/rencal-sdk/tsconfig.json" }
声明视图
视图是在插件的 rencal-plugin.toml：
id = "alice.upcoming"
name = "Upcoming"
description = "The next seven days as a list."
min_rencal_version = "0.9.1"
[[contributes.views]]
id = "upcoming"
name = "Upcoming"
script = "dist/upcoming.js"
css = "dist/upcoming.css"
css 是可选的;如果视图没有样式，则将其省略。看到 创建一个插件 其余的舱单。
编写视图
默认情况下，导出组件 src/index.tsx，或from src/<view-id>.tsx 当插件有几个视图时：
import {
type CalendarEvent,
useEventProps,
useEventsInRange,
useToday,
} from "@rencomputer/rencal-sdk"
export default function UpcomingView() {
const today = useToday()
const events = useEventsInRange(today, today.add({ days: 7 }))
return (
<ul className="flex flex-col gap-1 p-4">
{events.map((event) => (
<EventItem key={event.key} event={event} />
))}
</ul>
)
}
function EventItem({ event }: { event: CalendarEvent }) {
return (
<li {...useEventProps(event)} className="rounded-md px-2 py-1">
{event.summary}
</li>
)
}
顺风类开箱即用并使用renCal的主题，因此视图与用户安装的任何主题匹配。当用户在标题中键入新事件时，renCal将淡入事件和集合 data-dimmed 环视；其他部分也跟着褪色，比如 in-data-dimmed:opacity-50.
API
| 出口 | |
|---|---|
useEventsInRange(start, end) | 可见日历中的事件 start 直至，但不包括， end，加上正在创建的事件和拖动事件的预览，标记为 event.transient |
useEventProps(event, { drag }) | 使元素表现得像一个renCal事件的道具：日历颜色、选择、RSVP和拖动状态、单击打开、右键单击菜单和with drag，拖动可重新安排 |
useEventState(event) | 事件是否被选中、显示其菜单或被拖动 |
dayProps(date, zone) | 将元素标记为日：将事件拖放到那里，拖拽、双击或右键单击它将创建一个事件 |
useDayGrid() | 正在绘制以创建事件的范围，以及是否正在拖动任何东西 |
selectionProps() | 标记一个元素绘制该范围的一部分，因此new-event弹出窗口将在其旁边打开 |
useToday() | 今天的日期，保持当前午夜和时区的变化 |
useViewerTzid() | 用户的时区，当它改变时保持当前 |
useNavigation() | 活动日期，以及转到另一个日期的函数 |
useOnNavigate(onNavigate) | 调用 onNavigate 每次经过深思熟虑的导航，甚至到活动日期，把它带入视野 |
useCalendars() | 用户的日历 |
useDisplaySettings() | 用户的时间格式、一周的第一天以及是否显示周数 |
useEventAppearance(event) | 事件的颜色和RSVP，对于非事件元素的标记 |
Temporal | 临时API用于日期和时间 |
eventsByDay(events, start, end) | 事件分组成一个条目，每天从 start 直至，但不包括， end包括空虚的日子 |
layoutAllDay(items, start, dayCount)， layoutTimed(items)， isSpanning(event) | renCal的布局是：将活动安排在车道上，并将一天的活动重叠在一起 |
dateInViewerZone， toViewerZonedDateTime， isAllDay， isSameDay， startOfWeek， isoWeekNumber， epochDay | 日期助手 |
formatTime， formatWallclockTime， formatShortDate， formatLongDate， formatWeekday， formatMonth， getRelativeDayLabel | 遵循renCal的格式 |
Button， Tooltip， cn， ChevronLeftIcon， ChevronRightIcon， UntitledEventText | 来自renCal UI的组件和实用程序 |
React、Temporal和这个包是由renCal在运行时提供的。其他依赖项被捆绑到视图中。
构建
pnpm build 类型检查插件并将每个视图写入 script 和 css 路径在它的manifest中。 pnpm dev 重建每一个变化。
要尝试该插件，请将其目录添加到 ~/.config/rencal/plugins.toml． renCal在每次重建时重新加载它：
plugins = ["~/dev/rencal-upcoming"]
本地插件不需要其他任何东西。保持 dist/ Out of git：它是构建输出。
发布
renCal从最新的GitHub版本安装视图插件，下载每个插件 script 和 css 具有相同文件名的来自发布资产的文件。添加一个构建插件和附加的工作流 dist/* 当您按下一个版本标记时，就会生成一个版本 .github/workflows/release.yml：
name: Release
on:
push:
tags:
- "v*"
jobs:
release:
runs-on: ubuntu-latest
permissions:
contents: write
id-token: write
attestations: write
steps:
- uses: actions/checkout@v7
- uses: actions/setup-node@v7
with:
node-version: 24
- name: Build
run: |
npm ci
npm run build
- name: Attest build provenance
uses: actions/attest@v4
with:
subject-path: dist/*
- name: Create release
env:
GH_TOKEN: ${{ github.token }}
run: gh release create "$GITHUB_REF_NAME" --title "$GITHUB_REF_NAME" --generate-notes dist/*
然后推送一个标签，比如 v0.1.0 发布新闻稿标签是renCal显示的版本。看到 rencal-view-board 对于使用pnpm设置的插件，和 发布插件 在插件目录中列出你的。
来源
SDK是在 renCal库.