产品简介
shadcn-ui-big-calendar 一个用于 shadcn/ui 项目的 React 大日历组件,通过 Shadcn CSS 变量实现动态主题支持,纯 CSS 解决方案,易于集成。解决开发者在构建事件调度界面时手动处理主题样式的痛点,适合前端开发者和使用 Next.js 的项目。

核心功能
- 动态主题适配:使用 Shadcn CSS 变量自动切换浅色/深色主题
- React Big Calendar 集成:基于流行日历库,提供定制样式
- 纯 CSS 实现:无需 JavaScript 干预主题,确保一致性
- Next.js 兼容:无缝集成到 Next.js 项目
- 一键安装:通过 shadcn 命令快速添加组件
快速开始
- 运行 `npx shadcn@latest add list-jonas/shadcn-ui-big-calendar/big-calendar` 安装日历组件。
- 在 React 代码文件中导入 ShadcnBigCalendar 组件和 momentLocalizer。
- 配置 localizer 和事件数据,将组件添加到页面中使用。
界面预览
与其他方案对比
| 对比项 | shadcn-ui-big-calendar | 同类方案 |
|---|---|---|
| 主题适配方式 | 使用 Shadcn CSS 变量自动适配,纯 CSS 实现 | 可能需要手动编写样式或使用 JavaScript 切换主题 |
| 安装集成 | 通过 shadcn 命令一键安装,快速集成 | 可能需要手动复制文件或复杂配置 |
适合谁用
- 使用 shadcn/ui 框架开发 Web 应用的前端工程师
- 需要集成动态主题日历的 Next.js 项目开发者
- 希望快速实现事件调度功能的 React 开发者
下载与版本
当前最新版本为 main,发布于 。支持 Windows、macOS、Linux。
⚠️ 注意:本项目仅提供源代码下载,不包含可直接运行的安装包(exe/dmg/apk 等。下载后需要自行编译构建才能使用,适合有一定开发经验的用户。如果你不熟悉编译流程,建议寻找同类开箱即用的替代方案。
注意事项
- 本工具仅供学习和研究使用,请遵守相关法律法规。
- 请尊重内容创作者版权,勿将下载内容用于商业或非法传播。
- 项目源码地址:https://github.com/list-jonas/shadcn-ui-big-calendar