用法 JavaScript 模块 第一步是安装 EventCalendar 核心包：
bash npm install --save-dev @event-calendar/core
该包提供了创建和销毁日历的函数，以及用于各种视图的插件。你必须至少使用一个提供视图的插件。目前可用的插件如下：
DayGrid List ResourceTimeline ResourceTimeGrid TimeGrid Interaction（不提供视图）
然后，在你的 JavaScript 模块中：
javascript import { createCalendar, destroyCalendar, TimeGrid } from '@event-calendar/core'; // 如果你的构建工具支持，导入 CSS import '@event-calendar/core/index.css';
let ec = createCalendar( // 日历将挂载到的 HTML 元素 document.getElementById('ec'), // 插件数组 [TimeGrid], // 选项对象 { view: 'timeGridWeek', events: [ // 你的事件列表 ] } );
// 如果你之后需要销毁日历，使用 destroyCalendar(ec); Svelte 5 组件 第一步是安装 EventCalendar 核心包：
bash npm install --save-dev @event-calendar/core
该包提供了 Calendar 组件，以及用于各种视图的插件。你必须至少使用一个提供视图的插件。目前可用的插件如下：
DayGrid List ResourceTimeline ResourceTimeGrid TimeGrid Interaction（不提供视图）
然后在你的 Svelte 5 组件中，像这样使用日历：
svelte
<Calendar plugins={[TimeGrid]} {options} />
当包含日历的组件被销毁时，日历会被优雅地销毁。 独立 bundle 该 bundle 包含了一个包含所有插件的日历版本，适合通过
第一步是在页面的 部分包含以下代码：
html 预览
注意：
然后像这样初始化日历：
javascript let ec = EventCalendar.create(document.getElementById('ec'), { view: 'timeGridWeek', events: [ // 你的事件列表 ] });
// 如果你之后需要销毁日历，使用 EventCalendar.destroy(ec); 初始化后修改选项 你可以使用 setOption 方法在初始化后修改日历选项。
javascript ec.setOption('slotDuration', '01:00');
在 Svelte 中，你可以直接更新原始的 options 对象。
svelte
修改时间段长度 <Calendar plugins={[TimeGrid]} {options} /> 选项 allDayContent 类型：Content 或函数 默认值：'all-day' 定义显示为全天时段标题的内容。
该值可以是 Content 或返回内容的函数：
javascript function (arg) { // 返回 Content }
arg 是一个具有以下属性的对象：
text：默认文本 allDaySlot 类型：boolean 默认值：true 确定是否在日历顶部显示全天时段。
当设置为 false 隐藏时，全天事件将不会在 timeGrid/resourceTimeGrid 视图中显示。 buttonText 类型：对象或函数 默认值：{close: 'Close', dayGridMonth: 'month', listDay: 'list', listMonth: 'list', listWeek: 'list', listYear: 'list', resourceTimeGridDay: 'resources', resourceTimeGridWeek: 'resources', resourceTimelineDay: 'timeline', resourceTimelineMonth: 'timeline', resourceTimelineWeek: 'timeline', timeGridDay: 'day', timeGridWeek: 'week', today: 'today'} 视图对默认值的覆盖如下：
dayGridMonth 文本 => ({...text, next: 'Next month', prev: 'Previous month'})
listDay 文本 => ({...text, next: 'Next day', prev: 'Previous day'})
listMonth 文本 => ({...text, next: 'Next month', prev: 'Previous month'})
listWeek 文本 => ({...text, next: 'Next week', prev: 'Previous week'})
listYear 文本 => ({...text, next: 'Next year', prev: 'Previous year'})
resourceTimeGridDay 文本 => ({...text, next: 'Next day', prev: 'Previous day'})
resourceTimeGridWeek 文本 => ({...text, next: 'Next week', prev: 'Previous week'})
resourceTimelineDay 文本 => ({...text, next: 'Next day', prev: 'Previous day'})
resourceTimelineMonth 文本 => ({...text, next: 'Next month', prev: 'Previous month'})
resourceTimelineWeek 文本 => ({...text, next: 'Next week', prev: 'Previous week'})
timeGridDay 文本 => ({...text, next: 'Next day', prev: 'Previous day'})
timeGridWeek 文本 => ({...text, next: 'Next week', prev: 'Previous week'})
显示在头部工具栏按钮中的文本。
该值可以是一个包含所有必要属性的普通对象，或者是一个接收默认按钮文本对象并返回新对象的回调函数：
javascript function (text) { // 返回新的按钮文本对象 }
text：
包含默认按钮文本的对象 customButtons 类型：对象 默认值：{} 定义可在 headerToolbar 中使用的自定义按钮。
首先，将自定义按钮指定为键值对。然后从 headerToolbar 选项中引用它们。
示例：
每个 customButton 条目接受以下属性：
text：
显示在按钮本身上的文本。参见 Content
click：
按钮被点击时调用的回调函数。接受一个参数 mouseEvent
active：
如果为 true，按钮将显示为被按下 / 激活状态 date 类型：Date 或字符串 默认值：new Date () 当前在日历上显示的日期。
该值可以是 JavaScript Date 对象，或者是 ISO8601 日期字符串，如 '2022-12-31'。 dateClick 类型：函数 默认值：undefined 需要 Interaction 插件 当用户点击日期或时间时触发的回调函数。
javascript function (info) {}
info 是一个具有以下属性的对象：
date：被点击日期和时间的 JavaScript Date 对象 dateStr：日期的 ISO8601 字符串表示 allDay：true 或 false。确定点击是否发生在全天时段中。月视图和列表视图也被视为全天时段 dayEl：表示被点击全天的 HTML 元素 jsEvent：包含低级信息（如点击坐标）的 JavaScript 原生事件对象 view：当前的 View 对象 resource：如果当前视图是资源视图，拥有该日期的 Resource 对象 datesAboveResources 类型：boolean 默认值：false 确定资源视图是否应在资源标题上方显示日期标题。 datesSet 类型：函数 默认值：undefined 当日历的日期范围最初被设置或通过点击上一个 / 下一个按钮、更改视图、通过 API 操作当前日期等方式更改时触发的回调函数。
javascript function (info) {}
info 是一个具有以下属性的对象：
start：日历需要事件的范围开始的 JavaScript Date 对象 end：日历需要事件的范围结束的 JavaScript Date 对象。注意：此值是排他的 startStr：开始日期的 ISO8601 字符串表示 endStr：结束日期的 ISO8601 字符串表示 view：当前的 View 对象 dayCellFormat 类型：对象或函数 默认值：{day: 'numeric'} 定义在 dayGrid 视图中日期单元格内显示的文本。
该值可以是一个包含原生 JavaScript Intl.DateTimeFormat 对象选项的对象，或者是一个返回带有格式化字符串的 Content 的回调函数：
javascript function (date) { // 返回带有格式化日期字符串的 Content }
date：
需要格式化的 JavaScript Date 对象 dayHeaderAriaLabelFormat 类型：对象或函数 默认值：{dateStyle: 'long'} 视图对默认值的覆盖如下：
dayGridMonth {weekday: 'long'}
定义在日历列标题的 aria-label 属性中使用的文本。
该值可以是一个包含原生 JavaScript Intl.DateTimeFormat 对象选项的对象，或者是一个返回格式化字符串的回调函数：
javascript function (date) { // 返回格式化的日期字符串 }
date：
需要格式化的 JavaScript Date 对象 dayHeaderFormat 类型：对象或函数 默认值：{weekday: 'short', month: 'numeric', day: 'numeric'} 视图对默认值的覆盖如下：
dayGridMonth {weekday: 'short'}
resourceTimelineMonth {weekday: 'short', day: 'numeric'}
timeGridDay {weekday: 'long'}
定义在日历列标题上显示的文本。
该值可以是一个包含原生 JavaScript Intl.DateTimeFormat 对象选项的对象，或者是一个返回带有格式化字符串的 Content 的回调函数：
javascript function (date) { // 返回带有格式化日期字符串的 Content }
date：
需要格式化的 JavaScript Date 对象 dayMaxEvents 类型：boolean 默认值：false 确定在 dayGrid 视图中给定日期的最大堆叠事件级别数。
如果事件太多，会显示类似 +2 more 的链接。
目前，仅支持值 true，它将事件数量限制为日期单元格的高度。 dayPopoverFormat 类型：对象或函数 默认值：{month: 'long', day: 'numeric', year: 'numeric'} 定义由 dayMaxEvents 选项创建的弹出窗口标题的日期格式。
该值可以是一个包含原生 JavaScript Intl.DateTimeFormat 对象选项的对象，或者是一个返回带有格式化字符串的 Content 的回调函数：
javascript function (date) { // 返回带有格式化日期字符串的 Content } displayEventEnd 类型：boolean 默认值：true 视图对默认值的覆盖如下：
dayGridMonth false
resourceTimelineDay false
resourceTimelineMonth false
resourceTimelineWeek false
确定是否显示事件的结束时间。 dragConstraint 类型：函数 默认值：undefined 需要 Interaction 插件 限制事件可被拖动到的日期 / 时间范围的回调函数。
该函数在拖动过程中针对每次光标移动触发，并接受与 eventDrop 相同的参数。如果允许拖动到新位置，函数应返回 true，否则返回 false。 dragScroll 类型：boolean 默认值：true 需要 Interaction 插件 确定在事件拖放期间，当鼠标越过边缘时日历是否应自动滚动。 duration 类型：字符串、整数或对象 默认值：{weeks: 1} 视图对默认值的覆盖如下：
dayGridMonth {months: 1}
listDay {days: 1}
listMonth {months: 1}
listYear {years: 1}
resourceTimeGridDay {days: 1}
resourceTimelineDay {days: 1}
resourceTimelineMonth {months: 1}
timeGridDay {days: 1}
设置视图的持续时间。
这应该是一个可以解析为 Duration 对象的值。 editable 类型：boolean 默认值：false 需要 Interaction 插件 确定日历上的事件是否可以被拖动和调整大小（同时进行）。
如果不需要同时支持两者，请使用更具体的 eventStartEditable 和 eventDurationEditable。 events 类型：数组 默认值：[] 将被解析为 Event 对象并显示在日历上的普通对象数组。
如果提供了 eventSources 选项，则不使用此选项。 eventAllUpdated 类型：函数 默认值：undefined 当所有事件完成更新时触发的回调函数。
这是一个实验性特性，其行为可能在未来发生变化。该函数在所有事件的渲染周期结束时被调用。当添加新事件、修改已显示的事件或删除事件时，会发生渲染。
javascript function (info) { }
info 是一个具有以下属性的对象：
view：当前的 View 对象 eventBackgroundColor 类型：字符串 默认值：undefined 设置日历上事件的默认背景颜色。
你可以使用任何 CSS 颜色格式，如 '#f00'、'#ff0000'、'rgb (255,0,0)' 或 'red'。 eventClassNames 类型：字符串、数组或函数 默认值：undefined 为事件设置额外的 CSS 类。
该值可以是一个包含类名的字符串 'class-1 class-2 ...'、一个字符串数组 ['class-1', 'class-2', ...] 或一个返回上述任何格式的函数：
javascript function (info) { // 返回字符串或数组 }
info 是一个具有以下属性的对象：
event：关联的 Event 对象 view：当前的 View 对象 eventClick 类型：函数 默认值：undefined 当用户点击事件时触发的回调函数。
javascript function (info) { }
info 是一个具有以下属性的对象：
el：事件的 HTML 元素 event：关联的 Event 对象 jsEvent：包含低级信息（如点击坐标）的 JavaScript 原生事件对象 view：当前的 View 对象 eventColor 类型：字符串 默认值：undefined 目前是 eventBackgroundColor 的别名。 eventContent 类型：Content 或函数 默认值：undefined 定义在事件元素内部渲染的内容。
该值可以是 Content 或返回内容或 undefined 的函数：
javascript function (info) { // 返回 Content 或 undefined }
info 是一个具有以下属性的对象：
event：关联的 Event 对象 timeText：事件的格式化时间 view：当前的 View 对象
如果函数返回 undefined，则事件将以默认方式渲染。 eventDidMount 类型：函数 默认值：undefined 元素被添加到 DOM 后立即触发的回调函数。如果事件数据发生变化，不会再次调用此函数。
javascript function (info) { }
info 是一个具有以下属性的对象：
el：事件的 HTML 元素 event：关联的 Event 对象 timeText：事件的格式化时间 view：当前的 View 对象 eventDragMinDistance 类型：整数 默认值：5 需要 Interaction 插件 定义用户的鼠标必须移动多少像素后才开始事件拖动。 eventDragStart 类型：函数 默认值：undefined 需要 Interaction 插件 事件拖动开始时触发的回调函数。
javascript function (info) { }
info 是一个具有以下属性的对象：
event：关联的 Event 对象 jsEvent：包含低级信息（如点击坐标）的 JavaScript 原生事件对象 view：当前的 View 对象 eventDragStop 类型：函数 默认值：undefined 需要 Interaction 插件 事件拖动停止时触发的回调函数。
它在事件信息被修改（如果移动到新的日期 / 时间）之前和 eventDrop 回调被触发之前触发。
javascript function (info) { }
info 是一个具有以下属性的对象：
event：关联的 Event 对象 jsEvent：包含低级信息（如点击坐标）的 JavaScript 原生事件对象 view：当前的 View 对象 eventDrop 类型：函数 默认值：undefined 需要 Interaction 插件 拖动停止且事件已移动到不同日期 / 时间时触发的回调函数。
它在事件信息被修改之后和 eventDragStop 回调被触发之后触发。
javascript function (info) { }
info 是一个具有以下属性的对象：
event：关联的 Event 对象 oldEvent：包含事件在拖放前信息的 Event 对象 oldResource：如果资源已更改，这是事件来自的 Resource 对象。如果资源未更改，这将是 undefined newResource：如果资源已更改，这是事件前往的 Resource 对象。如果资源未更改，这将是 undefined delta：表示事件移动时间量的 Duration 对象 revert：一个函数，如果调用，将事件的开始 / 结束日期恢复到拖动前的值 jsEvent：包含低级信息（如点击坐标）的 JavaScript 原生事件对象 view：当前的 View 对象 eventDurationEditable 类型：boolean 默认值：true 需要 Interaction 插件 确定日历事件是否可以被调整大小。 eventFilter 类型：函数 默认值：undefined 用于在日历中显示事件之前过滤事件数组的函数。例如，它允许为每个视图仅显示特定事件。
javascript function (info) { // 返回 true 保留事件，返回 false 排除事件 }
info 是一个具有以下属性的对象：
event：正在数组中处理的当前 Event 对象 index：正在数组中处理的当前事件的索引 events：调用 eventFilter 的所有事件的数组 view：当前的 View 对象 eventLongPressDelay 类型：整数 默认值：undefined 需要 Interaction 插件 对于触摸设备，用户必须按住点击多长时间（以毫秒为单位），事件才会变得可拖动 / 可调整大小。
如果未指定，则回退到 longPressDelay。 eventMouseEnter 类型：函数 默认值：undefined 当用户将光标（鼠标指针）悬停在事件上时触发的回调函数。
javascript function (info) { }
info 是一个具有以下属性的对象：
el：事件的 HTML 元素 event：关联的 Event 对象 jsEvent：包含低级信息（如点击坐标）的 JavaScript 原生事件对象 view：当前的 View 对象 eventMouseLeave 类型：函数 默认值：undefined 当光标（鼠标指针）移出事件时触发的回调函数。
javascript function (info) { }
info 是一个具有以下属性的对象：
el：事件的 HTML 元素 event：关联的 Event 对象 jsEvent：包含低级信息（如点击坐标）的 JavaScript 原生事件对象 view：当前的 View 对象 eventResizableFromStart 类型：boolean 默认值：false 需要 Interaction 插件 确定事件是否可以从其起始边缘调整大小。 eventResize 类型：函数 默认值：undefined 需要 Interaction 插件 调整大小停止且事件持续时间已更改时触发的回调函数。
它在事件信息被修改之后和 eventResizeStop 回调被触发之后触发。
javascript function (info) { }
info 是一个具有以下属性的对象：
event：关联的 Event 对象 oldEvent：包含事件在调整大小前信息的 Event 对象 startDelta：表示事件开始日期移动时间量的 Duration 对象 endDelta：表示事件结束日期移动时间量的 Duration 对象 revert：一个函数，如果调用，将事件的结束日期恢复到调整大小前的值 jsEvent：包含低级信息（如点击坐标）的 JavaScript 原生事件对象 view：当前的 View 对象 eventResizeStart 类型：函数 默认值：undefined 需要 Interaction 插件 事件调整大小开始时触发的回调函数。
javascript function (info) { }
info 是一个具有以下属性的对象：
event：关联的 Event 对象 jsEvent：包含低级信息（如点击坐标）的 JavaScript 原生事件对象 view：当前的 View 对象 eventResizeStop 类型：函数 默认值：undefined 需要 Interaction 插件 事件调整大小停止时触发的回调函数。
它在事件信息被修改（如果持续时间更改）之前和 eventResize 回调被触发之前触发。
javascript function (info) { }
info 是一个具有以下属性的对象：
event：关联的 Event 对象 jsEvent：包含低级信息（如点击坐标）的 JavaScript 原生事件对象 view：当前的 View 对象 eventSources 类型：EventSource [] 默认值：[] 为 EventCalendar 提供事件数据的 EventSource 对象数组。
此选项替代 events 选项使用。
EventSource 应该是一个具有以下任一属性集的对象：
从 URL 获取事件 url：
日历将从中获取 Event 对象的 URL。每当日历需要新的事件数据时，将向此 URL 发送带有以下参数的 HTTP 请求：
start：日历需要事件的范围的开始日期
end：日历需要事件的范围的结束日期
method：HTTP 请求方法。默认 'GET'
extraParams：你想要发送到服务器的其他 GET/POST 数据。可以是普通对象或返回对象的函数。默认 {}
执行自定义函数 events：
每当 EventCalendar 需要新的事件数据时执行的自定义函数。
javascript function(fetchInfo, successCallback, failureCallback) { }
fetchInfo 是一个具有以下属性的对象：
start：日历需要事件的范围开始的 JavaScript Date 对象 end：日历需要事件的范围结束的 JavaScript Date 对象。注意：此值是排他的 startStr：开始日期的 ISO8601 字符串表示 endStr：结束日期的 ISO8601 字符串表示
自定义函数必须调用 successCallback 函数，并传入可解析的 Event 对象数组。
如果有任何失败（例如，AJAX 请求失败），则调用 failureCallback。它接受一个包含失败信息的参数。
除了调用 successCallback 和 failureCallback，你还可以返回事件结果数组或返回一个 Promise（或 thenable）对象。 eventStartEditable 类型：boolean 默认值：true 需要 Interaction 插件 确定日历上的事件是否可以被拖动。 eventTimeFormat 类型：对象或函数 默认值：{hour: 'numeric', minute: '2-digit'} 定义每个事件上显示的时间文本。
该值可以是一个包含原生 JavaScript Intl.DateTimeFormat 对象选项的对象，或者是一个返回带有格式化字符串的 Content 的回调函数：
javascript function (start, end) { // 返回带有格式化时间字符串的 Content }
start：
要格式化的时间范围开始的 JavaScript Date 对象
end：
要格式化的时间范围结束的 JavaScript Date 对象 eventTextColor 类型：字符串 默认值：undefined 设置日历事件（列表视图除外）的默认文本颜色。
你可以使用任何 CSS 颜色格式，如 '#f00'、'#ff0000'、'rgb (255,0,0)' 或 'red'。 filterEventsWithResources 类型：boolean 默认值：false 确定在 dayGrid/timeGrid/list 视图中是否隐藏不属于当前资源数组的事件。 filterResourcesWithEvents 类型：boolean 默认值：false 确定在资源视图中是否隐藏当前范围内没有事件的资源。 firstDay 类型：整数 默认值：0 每周开始的日子，其中星期日为 0，星期一为 1，依此类推。星期六为 6。 flexibleSlotTimeLimits 类型：boolean 或对象 默认值：false 确定 slotMinTime 和 slotMaxTime 是否应在事件超出范围时自动扩展。
如果设置为 true，则是否扩展限制的决定将基于对当前显示事件的分析，但不包括背景事件。
如果你希望不忽略背景事件，则可以传入一个具有以下属性的对象来代替 true：
eventFilter：
确定是否应考虑给定事件的函数。
javascript function(event) { // 返回 true 或 false }
event：
要分析的 Event 对象。
函数必须返回 true 以计算此事件，或返回 false 以忽略它 headerToolbar 类型：对象 默认值：{start: 'title', center: '', end: 'today prev,next'} 定义日历顶部的按钮和标题。
可以提供一个具有 start、center、end 属性的对象。这些属性包含用逗号 / 空格分隔值的字符串。用逗号分隔的值将相邻显示。用空格分隔的值将在中间显示一个小间隙。字符串可以包含以下任何值：
title：包含当前月份 / 星期 / 日期的文本
prev：将日历向后移动一个月 / 星期 / 天的按钮
next：将日历向前移动一个月 / 星期 / 天的按钮
today：将日历移动到当前月份 / 星期 / 天的按钮
类似 dayGridMonth 的视图名称：将日历切换到特定视图的按钮 height 类型：字符串 默认值：undefined 定义整个日历的高度。
这应该是一个有效的 CSS 值，如 '100%' 或 '600px'。 hiddenDays 类型：数组 默认值：[] 排除某些星期几不显示，其中星期日为 0，星期一为 1，依此类推。星期六为 6。 highlightedDates 类型：数组 默认值：[] 需要在日历中突出显示的日期数组。
每个日期可以是 ISO8601 日期字符串，如 '2022-12-31'，或 JavaScript Date 对象。 lazyFetching 类型：boolean 默认值：true 确定事件获取应何时发生。
当设置为 true（默认值）时，日历只会在绝对需要时才获取事件，以最小化 HTTP 请求。例如，假设你的日历开始时处于月视图，在 2 月。EventCalendar 将获取整个 2 月的事件并存储在其内部存储中。然后，假设用户切换到周视图并开始浏览 2 月的星期。日历将避免获取事件，因为它已经存储了这些信息。
当设置为 false 时，每当切换视图或更改当前日期（例如，用户点击上一个 / 下一个）时，日历都会获取事件。 listDayFormat 类型：对象或函数 默认值：{weekday: 'long'} 定义列表视图中日期标题左侧的文本。
该值可以是一个包含原生 JavaScript Intl.DateTimeFormat 对象选项的对象，或者是一个返回带有格式化字符串的 Content 的回调函数：
javascript function (date) { // 返回带有格式化日期字符串的 Content }
date：
需要格式化的 JavaScript Date 对象 listDaySideFormat 类型：对象或函数 默认值：{year: 'numeric', month: 'long', day: 'numeric'} 定义列表视图中日期标题右侧的文本。
该值可以是一个包含原生 JavaScript Intl.DateTimeFormat 对象选项的对象，或者是一个返回带有格式化字符串的 Content 的回调函数：
javascript function (date) { // 返回带有格式化日期字符串的 Content }
date：
需要格式化的 JavaScript Date 对象 loading 类型：函数 默认值：undefined 事件获取开始 / 停止时触发的回调函数。
javascript function (isLoading) { }
isLoading：
当日历开始获取事件时为 true，完成时为 false。 locale 类型：字符串 默认值：undefined 定义 EventCalendar 用于在 dayHeaderFormat、eventTimeFormat 等选项中格式化日期和时间字符串的原生 JavaScript Intl.DateTimeFormat 对象的 locales 参数。 longPressDelay 类型：整数 默认值：1000 对于触摸设备，用户必须按住点击多长时间（以毫秒为单位），事件才会变得可拖动 / 可调整大小或日期变得可选择。
有关更精细的配置，请参见 eventLongPressDelay 和 selectLongPressDelay。 moreLinkContent 类型：Content 或函数 默认值：undefined 定义显示的文本，代替由 dayMaxEvents 选项创建的默认 +2 more。
该值可以是 Content 或返回内容的函数：
javascript function (arg) { // 返回 Content }
arg 是一个具有以下属性的对象：
num：隐藏事件的数量 text：默认文本，如 +2 more noEventsClick 类型：函数 默认值：undefined 当用户点击列表视图中的 “无事件” 区域时触发的回调函数。
javascript function (info) { }
info 是一个具有以下属性的对象：
jsEvent：包含低级信息（如点击坐标）的 JavaScript 原生事件对象 view：当前的 View 对象 noEventsContent 类型：Content 或函数 默认值：'No events' 定义列表视图中没有事件可显示时显示的文本。
该值可以是 Content 或返回内容的函数：
javascript function () { // 返回 Content } nowIndicator 类型：boolean 默认值：false 启用在 timeGrid/resourceTimeGrid 视图中指示当前时间的标记。 pointer 类型：boolean 默认值：false 需要 Interaction 插件 在 timeGrid/resourceTimeGrid 和其他视图中启用鼠标光标指针。 resizeConstraint 类型：函数 默认值：undefined 需要 Interaction 插件 限制事件可调整大小的日期 / 时间范围的回调函数。
该函数在调整大小过程中针对每次光标移动触发，并接受与 eventResize 相同的参数。如果允许新的大小，函数应返回 true，否则返回 false。 resources 类型：数组 默认值：[] 将被解析为 Resource 对象以在资源视图中显示的普通对象数组。 resourceLabelContent 类型：字符串、对象或函数 默认值：undefined 定义在带有资源标题的元素内部渲染的内容。
该值可以是 Content 或返回内容的函数：
javascript function (info) { // 返回 Content }
info 是一个具有以下属性的对象：
resource：关联的 Resource 对象 date：如果是特定日期内的列，这将是一个 Date 对象 resourceLabelDidMount 类型：函数 默认值：undefined 元素被添加到 DOM 后立即触发的回调函数。如果资源数据发生变化，不会再次调用此函数。
javascript function (info) { }
info 是一个具有以下属性的对象：
el：标签的 HTML 元素 resource：关联的 Resource 对象 date：如果是特定日期内的列，这将是一个 Date 对象 scrollTime 类型：字符串、整数或对象 默认值：'06:00:00' 确定滚动面板初始向前滚动的距离。
这应该是一个可以解析为 Duration 对象的值。 select 类型：函数 默认值：undefined 需要 Interaction 插件 当进行日期 / 时间选择时触发的回调函数。
javascript function (info) { }
info 是一个具有以下属性的对象：
start：指示选择开始的 JavaScript Date 对象 end：指示选择结束的 JavaScript Date 对象 startStr：开始日期的 ISO8601 字符串表示 endStr：结束日期的 ISO8601 字符串表示 allDay：true 或 false。确定选择是否发生在全天时段中 jsEvent：包含低级信息（如点击坐标）的 JavaScript 原生事件对象 view：当前的 View 对象 resource：如果当前视图是资源视图，被选择的 Resource 对象 selectable 类型：boolean 默认值：false 需要 Interaction 插件 确定是否允许用户通过点击并移动指针来突出显示多个日期或时间段。 selectConstraint 类型：函数 默认值：undefined 需要 Interaction 插件 限制可选择的日期 / 时间范围的回调函数。
该函数在选择过程中针对每次光标移动触发，并接受与 select 相同的参数。如果允许选择的范围，函数应返回 true，否则返回 false。 selectBackgroundColor 类型：字符串 默认值：undefined 需要 Interaction 插件 设置指示当前选择的事件的背景颜色。参见 selectable。
你可以使用任何 CSS 颜色格式，如 '#f00'、'#ff0000'、'rgb (255,0,0)' 或 'red'。 selectLongPressDelay 类型：整数 默认值：undefined 需要 Interaction 插件 对于触摸设备，用户必须按住点击多长时间（以毫秒为单位），日期才会变得可选择。
如果未指定，则回退到 longPressDelay。 selectMinDistance 类型：整数 默认值：5 需要 Interaction 插件 定义用户的鼠标必须移动多少像素后才开始选择。 slotDuration 类型：字符串、整数或对象 默认值：'00:30:00' 视图对默认值的覆盖如下：
resourceTimelineMonth {days: 1}
定义显示时间段的频率。
这应该是一个可以解析为 Duration 对象的值。 slotEventOverlap 类型：boolean 默认值：true 确定在 timeGrid/resourceTimeGrid 视图中，当事件在时间上相交时是否应视觉上重叠。
如果设置为 false，则相交的事件将并排放置。 slotHeight 类型：整数 默认值：24 定义 timeGrid/resourceTimeGrid 视图中时间段的高度（以像素为单位）。更改设置时，你必须额外覆盖以下 CSS 样式：
css .ec-time-grid .ec-time, .ec-time-grid .ec-line { height: 24px; /* 覆盖此值 */ } slotLabelFormat 类型：对象或函数 默认值：{hour: 'numeric', minute: '2-digit'} 定义将在时间段内显示的文本。
该值可以是一个包含原生 JavaScript Intl.DateTimeFormat 对象选项的对象，或者是一个返回带有格式化字符串的 Content 的回调函数：
javascript function (time) { // 返回带有格式化时间字符串的 Content }
time：
需要格式化的 JavaScript Date 对象 slotLabelInterval 类型：字符串、整数或对象 默认值：undefined 在 timeGrid/resourceTimeline 视图中显示时间段标签的间隔。
这应该是一个可以解析为 Duration 对象的值。
如果未指定，则如果 slotDuration 小于 1 小时，则间隔被认为是两倍长，即每隔一个时间段显示标签。
如果间隔设置为零，则为所有时间段显示标签，包括在 timeGrid 视图中通常不显示的第一个时间段。 slotMaxTime 类型：字符串、整数或对象 默认值：'24:00:00' 定义每天将显示的最后一个时间段。
这应该是一个可以解析为 Duration 对象的值。 slotMinTime 类型：字符串、整数或对象 默认值：'00:00:00' 定义每天将显示的第一个时间段。
这应该是一个可以解析为 Duration 对象的值。 slotWidth 类型：整数 默认值：72 定义 resourceTimeline 视图中时间段的宽度（以像素为单位）。更改设置时，你必须额外覆盖以下 CSS 样式：
css .ec-timeline .ec-time, .ec-timeline .ec-line { width: 72px; /* 覆盖此值 */ }
主题（theme） 类型：对象或函数 默认值：{allDay: 'ec-all-day', active: 'ec-active', bgEvent: 'ec-bg-event', bgEvents: 'ec-bg-events', body: 'ec-body', button: 'ec-button', buttonGroup: 'ec-button-group', calendar: 'ec', container: 'ec-container', content: 'ec-content', day: 'ec-day', dayHead: 'ec-day-head', dayFoot: 'ec-day-foot', days: 'ec-days', daySide: 'ec-day-side', draggable: 'ec-draggable', dragging: 'ec-dragging', event: 'ec-event', eventBody: 'ec-event-body', eventTag: 'ec-event-tag', eventTime: 'ec-event-time', eventTitle: 'ec-event-title', events: 'ec-events', expander: 'ec-expander', extra: 'ec-extra', ghost: 'ec-ghost', handle: 'ec-handle', header: 'ec-header', hiddenScroll: 'ec-hidden-scroll', highlight: 'ec-highlight', icon: 'ec-icon', line: 'ec-line', lines: 'ec-lines', main: 'ec-main', minor: 'ec-minor', noEvents: 'ec-no-events', nowIndicator: 'ec-now-indicator', otherMonth: 'ec-other-month', pointer: 'ec-pointer', popup: 'ec-popup', preview: 'ec-preview', resizer: 'ec-resizer', resizingX: 'ec-resizing-x', resizingY: 'ec-resizing-y', resource: 'ec-resource', selecting: 'ec-selecting', sidebar: 'ec-sidebar', sidebarTitle: 'ec-sidebar-title', today: 'ec-today', time: 'ec-time', times: 'ec-times', title: 'ec-title', toolbar: 'ec-toolbar', view: 'ec-timeline ec-resource-week-view', weekdays: ['ec-sun', 'ec-mon', 'ec-tue', 'ec-wed', 'ec-thu', 'ec-fri', 'ec-sat'], withScroll: 'ec-with-scroll', uniform: 'ec-uniform'} 视图对默认值的覆盖如下： dayGridMonth 主题 => ({...theme, view: 'ec-day-grid ec-month-view'}) listDay 主题 => ({...theme, view: 'ec-list ec-day-view'}) listMonth 主题 => ({...theme, view: 'ec-list ec-month-view'}) listWeek 主题 => ({...theme, view: 'ec-list ec-week-view'}) listYear 主题 => ({...theme, view: 'ec-list ec-year-view'}) resourceTimeGridDay 主题 => ({...theme, view: 'ec-time-grid ec-resource-day-view'}) resourceTimeGridWeek 主题 => ({...theme, view: 'ec-time-grid ec-resource-week-view'}) resourceTimelineDay 主题 => ({...theme, view: 'ec-timeline ec-resource-day-view'}) resourceTimelineMonth 主题 => ({...theme, view: 'ec-timeline ec-resource-month-view'}) resourceTimelineWeek 主题 => ({...theme, view: 'ec-timeline ec-resource-week-view'}) timeGridDay 主题 => ({...theme, view: 'ec-time-grid ec-day-view'}) timeGridWeek 主题 => ({...theme, view: 'ec-time-grid ec-week-view'})
定义 EventCalendar 用于生成 HTML 标记的 CSS 类。
该值可以是包含所有必要属性的普通对象，也可以是一个接收默认主题对象并返回新对象的回调函数：
javascript function (theme) { // 返回实际的主题对象 }
theme：包含默认 CSS 类的对象 标题格式（titleFormat） 类型：对象或函数 默认值：{year: 'numeric', month: 'short', day: 'numeric'} 视图对默认值的覆盖如下： dayGridMonth：{year: 'numeric', month: 'long'} timeGridDay：{year: 'numeric', month: 'long', day: 'numeric'}
定义显示在头部工具栏标题中的文本。
该值可以是一个包含原生 JavaScript Intl.DateTimeFormat 对象选项的对象，或者是一个返回带有格式化字符串的 Content 的回调函数：
javascript function (start, end) { // 返回带有格式化日期字符串的Content }
start：需要格式化的时间范围开始的 JavaScript Date 对象 end：需要格式化的时间范围结束的 JavaScript Date 对象 取消选择（unselect） 类型：函数 默认值：undefined 需要 Interaction 插件
当前选择被清除时触发的回调函数。
选择可被清除的原因有多种：
用户点击当前选择区域外（当 unselectAuto 为 false 时不会发生）。 用户进行新的选择。unselect 回调将在新选择发生前触发。 用户在当前视图中向前 / 向后导航，或切换到新视图。 通过 API 调用 unselect 方法。
javascript function (info) { }
info 是一个具有以下属性的对象：
jsEvent：包含低级信息（如点击坐标）的原生 JavaScript 事件对象。若 unselect 通过 unselect 方法触发，jsEvent 将为 undefined view：当前的 View 对象 自动取消选择（unselectAuto） 类型：boolean 默认值：true 需要 Interaction 插件
确定点击页面其他位置是否会清除当前选择。参见 selectable。 取消选择例外（unselectCancel） 类型：字符串 默认值：'' 需要 Interaction 插件
一个 CSS 选择器，指定将忽略 unselectAuto 选项的元素。
点击与该 CSS 选择器匹配的元素将阻止当前选择被清除（由于 unselectAuto 选项）。 有效范围（validRange） 类型：对象 默认值：undefined
若设置，日历将只允许在指定日期范围内导航。导航按钮将变灰，防止用户导航到无效范围。
该范围应为一个具有以下属性的对象：
start：字符串或 Date。可以是 ISO8601 日期字符串（如 '2025-12-31'），或包含范围开始日期的 JavaScript Date 对象 end：字符串或 Date。可以是 ISO8601 日期字符串（如 '2025-12-31'），或包含范围结束日期的 JavaScript Date 对象
不必同时指定两个属性。范围可以只有 start 没有 end，反之亦然。 视图（view） 类型：字符串 默认值：'resourceTimeGridWeek'
日历中显示的视图。可以是 'dayGridMonth'、'listDay'、'listWeek'、'listMonth'、'listYear'、'resourceTimeGridDay'、'resourceTimeGridWeek'、'resourceTimelineDay'、'resourceTimelineWeek'、'resourceTimelineMonth'、'timeGridDay' 或 'timeGridWeek'。 视图挂载后（viewDidMount） 类型：函数 默认值：undefined
视图被添加到 DOM 后立即触发的回调函数。
javascript function (info) { }
info 是一个具有以下属性的对象：
view：已挂载的 View 对象 视图配置（views） 类型：对象 默认值：{}
可以指定仅适用于特定视图的选项。为此，在 views 选项中提供按视图名称作为键的单独选项对象。 周数内容（weekNumberContent） 类型：Content 或函数 默认值：undefined
定义显示在默认周数（如 W01）位置的文本。
该值可以是 Content 或返回内容的函数：
javascript function (arg) { // 返回Content }
arg 是一个具有以下属性的对象：
date：包含将显示周数的那一天的 JavaScript Date 对象 week：计算出的周数 周数显示（weekNumbers） 类型：boolean 默认值：false
确定是否在 dayGrid 视图中显示周数。
周数的编号取决于 firstDay 的值。当 firstDay 为 0 时，使用西方系统；其他值使用 ISO 系统。 方法（Methods） 方法允许在初始化后操作 EventCalendar。它们可从日历实例访问。
在 Svelte 中，方法可从组件实例访问：
svelte
重新获取事件 <Calendar bind:this={ec} plugins={[TimeGrid]} {options} /> getOption( name ) 参数：name（字符串，选项名称） 返回值：mixed 或 undefined
此方法允许获取任何日历选项的当前值。
javascript // 例如：获取当前日期 let date = ec.getOption('date'); setOption( name, value ) 参数： name（字符串，选项名称） value（mixed，新的选项值） 返回值：EventCalendar（用于链式调用的日历实例）
此方法允许为任何日历选项设置新值。
javascript // 例如：更改当前日期 ec.setOption('date', new Date()); addEvent( event ) 参数：event（对象，将被解析为 Event 对象的普通对象） 返回值：Event 对象或 null
向日历添加新事件。 getEventById( id ) 参数：id（字符串 | 整数，事件的 ID） 返回值：Event 对象或 null
返回具有匹配 ID 的单个事件。 getEvents() 返回值：Event []（Event 对象的数组）
返回日历在内存中的事件数组。 removeEventById( id ) 参数：id（字符串 | 整数，事件的 ID） 返回值：EventCalendar（用于链式调用的日历实例）
移除具有匹配 ID 的单个事件。 updateEvent( event ) 参数：event（对象，普通对象或 Event 对象） 返回值：EventCalendar（用于链式调用的日历实例）
更新具有匹配 event.id 的单个事件。 refetchEvents() 返回值：EventCalendar（用于链式调用的日历实例）
从所有源重新获取事件。 dateFromPoint( x, y ) 返回值：对象或 null
返回一个信息对象，包含如同在该点触发 dateClick 事件的数据。
info 对象包含以下属性：
date：日期和时间的 JavaScript Date 对象 allDay：true 或 false。确定该点是否在全天时段中。月视图和列表视图也被视为全天时段 dayEl：表示包含该点的整天的 HTML 元素 resource：若当前视图是资源视图，拥有该日期的 Resource 对象
使用此方法，例如可以找出在多日事件内部的点击发生在哪一天。为此，在 eventClick 中，将 jsEvent.clientX 和 jsEvent.clientY 坐标传递给 dateFromPoint 以获取所需日期。 getView() 返回值：View
返回当前视图的 View 对象。 next() 返回值：EventCalendar（用于链式调用的日历实例）
将当前日历日期向前移动 1 天 / 周 / 月（取决于当前视图）。 prev() 返回值：EventCalendar（用于链式调用的日历实例）
将当前日历日期向后移动 1 天 / 周 / 月（取决于当前视图）。 unselect() 返回值：EventCalendar（用于链式调用的日历实例）
清除当前选择。参见 selectable。 内容（Content） 内容值可以以下列形式呈现：
包含文本的字符串：'some text' 包含 HTML 字符串的对象：{html: '
some HTML
'} 包含 DOM 节点数组的对象：{domNodes: [node1, node2, ...]} 事件对象（Event object） 这是 EventCalendar 用于存储日历事件信息的 JavaScript 对象。Event 对象中存在的所有属性如下：
id：事件的唯一字符串标识符 resourceIds：事件关联的资源 ID 数组 allDay：true 或 false。确定事件是否显示在全天时段中 start：包含事件开始时间的 JavaScript Date 对象 end：包含事件结束时间的 JavaScript Date 对象 title：Content。显示在事件上的文本。参见 Content editable：true、false 或 undefined。覆盖此特定事件的 editable 设置的值 startEditable：true、false 或 undefined。覆盖此特定事件的 eventStartEditable 设置的值 durationEditable：true、false 或 undefined。覆盖此特定事件的 eventDurationEditable 设置的值 display：事件的渲染类型。可以是 'auto' 或 'background'。此外，在回调函数中，可能会为此属性获取 'ghost'、'preview' 和 'pointer'，这些是内部值，例如用于在拖放操作期间显示事件 backgroundColor：此特定事件的 eventBackgroundColor 覆盖值 textColor：此特定事件的 eventTextColor 覆盖值 classNames：此特定事件的附加 CSS 类数组 styles：此特定事件的附加内联样式声明数组 extendedProps：包含在解析期间在显式给定的 extendedProps 字段中指定的杂项属性的普通对象 从普通对象解析事件 当 EventCalendar 从 events 选项或作为对事件源 URL 的 HTTP 请求结果接收普通事件对象数组时，它会将输入对象解析为 proper Event 对象。
事件输入对象的所有允许字段如下：
id：字符串或整数。事件的唯一标识符。默认自动生成的值 allDay：boolean。确定事件是否显示在全天时段中。如果 start 和 end 都没有时间部分，则默认为 true，否则为 false start：字符串或 Date。可以是 ISO8601 日期时间字符串（如 '2022-12-31 09:00:00'），或包含事件开始时间的 JavaScript Date 对象 end：字符串或 Date。可以是 ISO8601 日期时间字符串（如 '2022-12-31 13:00:00'），或包含事件结束时间的 JavaScript Date 对象 title：Content。将显示在事件上的文本。参见 Content。默认 '' editable：boolean。覆盖此单个事件的全局 editable 选项。默认 undefined startEditable：boolean。覆盖此单个事件的全局 eventStartEditable 选项。默认 undefined durationEditable：boolean。覆盖此单个事件的全局 eventDurationEditable 选项。默认 undefined resourceIds 或 resourceId：字符串、整数或数组。资源的 ID 或事件关联的资源 ID 数组。默认 [] display：字符串。事件的渲染类型。可以是 'auto' 或 'background'。默认 'auto' backgroundColor：字符串。如同日历范围的 eventBackgroundColor 选项一样设置事件的背景颜色。默认 undefined textColor：字符串。如同日历范围的 eventTextColor 选项一样设置事件的文本颜色。默认 undefined color：字符串。目前是 backgroundColor 字段的别名。默认 undefined classNames 或 className：字符串或数组。为此单个事件设置附加 CSS 类。参见 eventClassNames。默认 [] styles 或 style：字符串或数组。为此单个事件设置附加内联样式声明。此值可以是包含样式的字符串（'font-size: 24px; border-radius: 4px; ...'）或字符串数组（['font-size: 24px', 'border-radius: 4px', ...]）。默认 [] extendedProps：对象。包含任何杂项属性的普通对象。它将直接传输到 Event 对象的 extendedProps 属性。默认 {} 持续时间对象（Duration object） 这是 EventCalendar 用于存储时间段信息的 JavaScript 对象，如 30 分钟或 1 天 6 小时。
Duration 对象中存在的所有属性如下：
years：持续时间中的年数 months：持续时间中的月数 days：持续时间中的天数 seconds：持续时间中的秒数。如果需要小时和分钟，需要对该属性进行除法运算 inWeeks：确定持续时间是否表示以周为单位的时间段。此值在解析输入数据时设置 从输入值解析持续时间 当 EventCalendar 接收 duration、scrollTime、slotDuration 等选项的值时，它会将其解析为 proper Duration 对象。
允许的输入值可以以三种格式之一指定：
具有以下任何键的对象：year、years、month、months、day、days、minute、minutes、second、seconds 格式为 hh:mm:ss 或 hh:mm 的字符串。例如，'05:00' 表示 5 小时 指定总秒数的整数 资源对象（Resource object） 这是 EventCalendar 用于存储资源信息的 JavaScript 对象。日历事件可以与资源关联，并使用资源视图单独显示。
Resource 对象中存在的所有属性如下：
id：资源的唯一字符串标识符 title：资源的标题。参见 Content eventBackgroundColor：此资源事件的默认背景颜色 eventTextColor：此资源事件的默认文本颜色 extendedProps：包含在解析期间在显式给定的 extendedProps 字段中指定的杂项属性的普通对象 从普通对象解析资源 当 EventCalendar 接收用于 resources 选项的普通资源对象数组时，它会将输入对象解析为 proper Resource 对象。
资源输入对象的所有允许字段如下：
id：整数或字符串。唯一标识资源。具有相应 resourceIds 字段的 Event 对象将链接到此资源。将被强制转换为字符串 title：Content。资源渲染时将显示的文本。参见 Content。默认 '' eventBackgroundColor：字符串。如同日历范围的 eventBackgroundColor 选项一样设置此资源事件的默认背景颜色。默认 undefined eventTextColor：字符串。如同日历范围的 eventTextColor 选项一样设置此资源事件的默认文本颜色。默认 undefined extendedProps：对象。包含任何杂项属性的普通对象。它将直接传输到 Resource 对象的 extendedProps 属性。默认 {} children：嵌套资源。见下文
时间线视图支持显示嵌套资源。嵌套资源可以使用出现在父资源名称前的附加按钮进行折叠或展开。要传递嵌套资源，请使用 children 字段：
javascript resources: [ { id: 1, title: '资源A', children: [ { id: 11, title: '资源A1' }, { id: 12, title: '资源A2' } ] } ] 视图对象（View object） View 对象包含关于日历视图的信息，如标题和日期范围。
View 对象中存在的所有属性如下：
type：视图的名称 title：显示在头部工具栏顶部的标题文本 currentStart：视图尝试表示的时间间隔的开始的 JavaScript Date。例如，在月视图中，这将是当月的第一天。此值忽略隐藏的日期 currentEnd：视图尝试表示的时间间隔的结束的 JavaScript Date。注意：此值是排他的。例如，在月视图中，这将是当月最后一天的后一天。此值忽略隐藏的日期 activeStart：第一个可见日的 JavaScript Date。在月视图中，此值通常在当月 1 日之前，因为大多数月份不是从一周的第一天开始的 activeEnd：最后一个可见日的 JavaScript Date。注意：此值是排他的 主题设置（Theming） 该库提供内置的暗色主题。可以通过向日历的任何父元素添加 ec-dark CSS 类来激活它，例如。
如果希望根据首选配色方案自动激活暗色主题，则改用 ec-auto-dark CSS 类。
请注意，暗色主题不会更改日历中的背景和字体颜色。这些被假定为由页面样式设置，日历会继承这些样式。
如果确实需要设置日历的背景或字体颜色，请使用本地 CSS 变量：
css .ec { --ec-bg-color: #22272e; --ec-text-color: #adbac7; }
所有可用 CSS 变量的列表可在此处找到。
