前端日历组件，要变天了？Schedule-X v4.6 彻底杀疯了

来源: 掘金前端本周最热

#🖥 前端
原文

做前端开发的，谁没被日历组件折磨过？

DatePicker 好找，但一个功能完整、能拖拽、能缩放、支持多视图、国际化、暗色模式的日历组件，选型时能让人纠结一周。

FullCalendar 功能全，但商用要付费，个人项目还好，企业级应用一年下来授权费不便宜。react-big-calendar 绑定 React，Vue 项目用不了。其他小库要么功能弱，要么文档残，要么年久失修。

直到 Schedule-X 出现。

GitHub 星标稳步增长、npm 周下载量持续攀升、MIT 协议商用免费、支持 React/Angular/Vue/Svelte/Preact 五大框架。

最新版本 v4.6.0（2026 年 5 月 12 日发布），从 v3 开始底层全面切到 Temporal API，甚至计划支持中国农历。

一、先看数据：它到底轻量到什么程度？

Schedule-X 的体积控制，在日历组件里算是第一梯队的。

核心包 @schedule-x/calendar 体积紧凑，而且它是零依赖设计——安装后不会拖进来一堆子包，node_modules 不会爆炸。

对比 FullCalendar 的插件体系（core + daygrid + timegrid + interaction + list……装一圈下来体积不小），Schedule-X 的"开箱即用"策略更省心。

维度FullCalendarreact-big-calendarSchedule-X
框架绑定无（需适配器）React 专用React/Angular/Vue/Svelte/Preact 原生支持
商用授权需购买MITMIT（免费商用）
拖拽缩放插件内置内置
暗色模式需配置需配置一键切换
国际化需配置需配置开箱即用
底层日期库自研date-fns/momentTemporal API（浏览器原生标准）

二、一个 API 通吃所有框架

Schedule-X 最核心的设计哲学：框架无关的 core + 各框架原生适配器。

// 框架无关的核心
import { createCalendar } from '@schedule-x/calendar'

// React 适配器
import { ScheduleXCalendar } from '@schedule-x/react'

// Vue 适配器
import { ScheduleXCalendar } from '@schedule-x/vue'

// Angular 适配器
import { ScheduleXCalendar } from '@schedule-x/angular'

日历的创建、配置、事件管理全部在 core 里完成，UI 渲染交给各框架的适配器。这意味着：

  • React 项目可以注入 React 组件到日历 UI 里
  • Vue 项目可以注入 Vue 组件
  • Angular 项目可以注入 Angular 组件

同一个 core，五种框架，完全一致的 API。

三、v3 开始底层全面切到 Temporal API

这是 Schedule-X 跟市面上其他日历组件最本质的区别。

2023 年 12 月，Schedule-X 发布 v3，底层日期处理从传统的 Date 对象全面迁移到 Temporal API。

Temporal 是什么？ECMAScript 正在标准化的下一代日期时间 API，由 FullCalendar 的作者 Adam Shaw 主导的 temporal-polyfill 提供支持。

官方博客的原话：

"If we wanted to wait for Temporal to have landed in enough browsers and user devices, we would be waiting for multiple years."

（如果我们等 Temporal 在所有浏览器里原生支持，可能要等好几年。）

所以 Schedule-X 选择现在就用 polyfill 提前布局。

这带来的好处非常实在：

1. 时区处理不再头疼

// 用 Temporal.ZonedDateTime 定义跨时区事件
const event = {
  id: 1,
  title: '跨国会议',
  start: Temporal.ZonedDateTime.from('2024-05-11T14:00:00+09:00[Asia/Tokyo]'),
  end: Temporal.ZonedDateTime.from('2024-05-11T17:00:00+09:00[Asia/Tokyo]'),
}

不用自己算 UTC 偏移、不用处理夏令时切换、不用纠结 Date 对象的时区陷阱。

2. PlainDate 让"全天事件"变简单

// 新年假期：不需要指定时区，全球统一
const newYears = {
  id: 3,
  title: '元旦假期',
  start: Temporal.PlainDate.from({ year: 2025, month: 12, day: 31 }),
  end: Temporal.PlainDate.from({ year: 2026, month: 1, day: 1 }),
}

3. 非格里高利历（中国农历）正在路上

官方博客明确说了：

"Another huge perk of the new API, is that it will enable Schedule-X to better support use of non-Gregorian calendars. This is not yet supported, but is planned for release during the lifespan of v3."

（Temporal API 的另一个巨大好处，是让 Schedule-X 更好地支持非格里高利历。目前还不支持，但计划在 v3 生命周期内发布。）

示例代码已经写好了：

const calendar = createCalendar({
  views: [createViewMonthGrid()],
  locale: 'zh-CN',
  timezone: 'Asia/Shanghai',
  calendarSystem: 'chinese',  // 中国农历
})

做中国本土产品的，这个功能的价值不用多说。

四、v4.6.0 最新版修了什么？

v4.6.0 于 2026 年 5 月 12 日发布，根据 GitHub CHANGELOG 的提交记录，主要更新包括：

  • 事件点击回调增强：onEventClick 和 onEventDoubleClick 回调现在接收 uievent 参数，让开发者能获取点击时的原始 UI 事件信息，做更精细的交互控制
  • 配置验证：新增配置项校验机制，错误的配置会在初始化时给出明确提示，减少"配错了但不知道"的调试时间
  • 事件重复规则增强：event-recurrence 插件的能力扩展

五、企业级功能：Resource View + Scheduling Assistant

Schedule-X 的开源版已经覆盖了大部分日历需求：日视图、周视图、月网格、月议程、列表视图、拖拽、缩放、暗色模式、国际化。

但如果是企业级场景——比如会议室预订、资源调度、人员排班——就需要 Schedule-X Premium 了。

Premium 版提供的核心能力：

功能说明典型场景
Resource View按资源（房间、人员、设备）排列的时间网格会议室预订系统
Hourly View小时级资源视图精细排班
Daily View天级资源视图长期资源规划
Scheduling Assistant冲突检测 + 可用时段可视化会议时间协调
Drag-to-create拖拽空白区域直接创建事件快速排班
iCal 导入导入外部日历事件多日历聚合
事件绘制自由绘制事件区域自定义时段标记

Vaadin 的 Schedule-X Addon 文档里有一个很直观的对比：

自建这些功能需要的时间：

  • 构建事件模态框和表单（含重复规则）：~100 小时 ❌
  • 构建拖拽创建：~40 小时 ❌
  • 构建资源视图：~100 小时 ❌
  • 安装配置 Schedule-X Premium：~1 小时 ✅

六、3 分钟上手

安装

# 核心 + 主题 + 视图
npm install @schedule-x/calendar @schedule-x/theme-default @schedule-x/calendar-controls

# React 项目再加适配器
npm install @schedule-x/react

第一个日历

import { createCalendar, createViewDay, createViewWeek, createViewMonthGrid } from '@schedule-x/calendar'
import { createEventsServicePlugin } from '@schedule-x/events-service'
import '@schedule-x/theme-default/dist/index.css'

const calendar = createCalendar({
  views: [createViewDay(), createViewWeek(), createViewMonthGrid()],
  events: [
    {
      id: 1,
      title: '项目评审',
      start: '2026-05-24 10:00',
      end: '2026-05-24 12:00',
    },
  ],
  plugins: [createEventsServicePlugin()],
})

calendar.render(document.getElementById('calendar'))

暗色模式切换

// 一键切换
calendar.setTheme('dark')

// 或者
calendar.setTheme('light')

国际化

import { translations } from '@schedule-x/translations'

const calendar = createCalendar({
  locale: 'zh-CN',
  translations: translations,
  // ...
})

写在最后

Schedule-X 的定位很清晰：不是功能最多的日历组件，是"现代化程度最高"的。

Temporal API 的底层迁移、五大框架的原生适配、MIT 协议的商用友好、中国农历的计划支持——这些不是"锦上添花"的功能，而是面向未来 5 年的基础设施选择。

对于需要长期维护的企业项目、需要跨技术栈统一的团队、或者不想被 FullCalendar 授权费绑架的开发者，Schedule-X 是个非常务实的选择。

官网：schedule-x.dev/
GitHub：github.com/schedule-x/…
文档：schedule-x.dev/docs/calend…

你平时做日历功能用什么库？FullCalendar、自研、还是其他？评论区聊聊～

各位互联网搭子，要是这篇文章成功引起了你的注意，别犹豫，关注、点赞、评论、分享走一波，让我们把这份默契延续下去，一起在前端的海洋里乘风破浪！