FullCalendar Luxon 3 日期格式化插件：安装接入、Luxon 格式串配置与源码级格式化原理-北京尧图网络

前端UI组件【免费下载链接】fullcalendarFull-sized drag drop event calendar in JavaScript项目地址https://gitcode.com/gh_mirrors/fu/fullcalendar点击查看免费下载FullCalendar 7 的fullcalendar/format-luxon3插件把日历的标题、单元格、事件时间等文本格式交给 Luxon 为骨架先给出可直接运行的安装与接入示例再结合插件源码拆解cmdFormatter调用链、范围格式化去重逻辑与日期字段转换细节帮助你正确配置并具备独立排查格式化问题的能力。插件定位FullCalendar 格式化体系中的 cmdFormatterFullCalendar 的格式化输入FormatterInput支持三种形态Intl 风格对象、字符串、函数。从 packages/preact/src/datelib/formatting.ts 可以看到分发逻辑对象 →NativeDateFormatter默认能力无需任何插件字符串 →CmdDateFormatter必须依赖某个插件提供的cmdFormatter来解析格式串函数 →FuncDateFormatter。也就是说只有在使用字符串格式串时日期格式化插件才会真正参与。fullcalendar/format-luxon3的核心职责就是注册一个名为luxon3、cmdFormatter指向formatWithCmdStr的插件对象见 packages/format-luxon3/src/index.tsimport { formatWithCmdStr } from ./format export default { name: luxon3, cmdFormatter: formatWithCmdStr, }仓库中 packages/format-moment 是同类实现面向 Moment.jsfullcalendar/format-luxon3则是面向 Luxon 3 的版本两者在 format.ts 中的结构高度一致先解析命令串再分别处理单日期与日期范围两种场景。安装与依赖按 README 的安装步骤首先确保安装 Luxon 3npm install luxon3随后安装 FullCalendar 核心包、Luxon 插件以及所需的其它插件如 daygrid 月视图npm install fullcalendar fullcalendar/format-luxon3 temporal-polyfill从 packages/format-luxon3/package.json 可以看到完整的依赖约束当前版本 7.0.2peerDependenciesluxon: ^3.0.0、temporal-polyfill: ^1.0.1——两者是运行时对等依赖必须与插件同装这也是安装命令中出现temporal-polyfill的原因dependenciesfull-ui/headless-calendar与fullcalendar/coreworkspace 内同版本 7.0.2前者提供了VerboseFormattingData等类型与CmdDateFormatter基础设施devDependenciestypes/luxon提供 TypeScript 类型luxon用于构建期。快速上手完整可运行示例README 给出了一个最小可运行示例这里完整继承并补充逐行说明import { Calendar } from fullcalendar import classicThemePlugin from fullcalendar/themes/classic import dayGridPlugin from fullcalendar/daygrid import luxon3Plugin from fullcalendar/format-luxon3 import fullcalendar/skeleton.css import fullcalendar/themes/classic/theme.css import fullcalendar/themes/classic/palette.css const calendarEl document.getElementById(calendar) const calendar new Calendar(calendarEl, { plugins: [ luxon3Plugin, dayGridPlugin, classicThemePlugin ], initialView: dayGridMonth, titleFormat: LLLL d, yyyy, // use Luxon format strings }) calendar.render()要点拆解Calendar从fullcalendar包导入即 packages/vanilla/src/Calendar.tsx 中导出的原生 JS 入口plugins数组必须包含luxon3Plugin或通过全局脚本自动注册见下文全局脚本构建否则字符串格式串会落到原生/Intl 处理路径titleFormat设置为 Luxon 格式串LLLL d, yyyy对应月份全名日四位年例如September 30, 2026三个 CSS 分别是骨架样式、classic 主题与主题调色板对应仓库中 packages/vanilla/src/themes/classic/index.ts 再导出fullcalendar/preact/themes/classic的主题资源。哪些选项可以使用 Luxon 格式串并非所有日期选项都接受字符串。从 packages/preact/src/options.ts 的选项定义看以下选项的类型是FormatterInput字符串/对象/函数三选一因此字符串形态都会经过cmdFormatter交给 Luxon选项用途源码位置titleFormat日历/视图标题文本options.tseventTimeFormat事件时间文本options.tsslotLabelFormat时间网格纵轴时隙标签options.tsdayHeaderFormat日头如 Sat 11options.tsdayCellFormat日单元格数字options.tsweekNumberFormat周号options.tslistDayFormat/listDayAltFormat列表视图日文本options.tspopoverFormat更多事件弹层标题options.tssingleMonthTitleFormat/monthStartFormat多月视图options.ts / #L398注意这些选项传入对象如{ month: long, day: numeric }时走NativeDateFormatter与 Luxon 插件无关只有传入字符串才启用 Luxon 格式串。以titleFormat为例月视图标题的生成入口在 packages/preact/src/reducers/title-formatting.ts当显式设置titleFormat时buildTitle通过createFormatter(viewOptions.titleFormat)构造CmdDateFormatter再调用dateEnv.formatRangeToParts(start, end, formatter)由于是字符串输入CmdDateFormatter.formatRangeToParts最终会回调插件的cmdFormatter见 packages/headless-calendar/src/formatting-cmd.ts。未显式设置时title-formatting.ts 会按视图单位自动推算默认格式月视图为{ year: numeric, month: long }这种情况不走 Luxon。源码原理1. 从日历字段到 Luxon DateTimearrayToLuxon格式化第一步是数据转换。packages/format-luxon3/src/convert.ts 的arrayToLuxon把 FullCalendar 内部以数组表示的日历字段重建为 LuxonDateTimeexport function arrayToLuxon(arr: number[], timeZone: string, locale?: string): LuxonDateTime { return LuxonDateTime.fromObject({ year: arr[0], month: arr[1] 1, // convert 0-based to 1-based day: arr[2], hour: arr[3], minute: arr[4], second: arr[5], millisecond: arr[6], }, { locale, zone: timeZone, }) }两个关键细节月份基准转换FullCalendar 内部使用 0-based 月份arr[1]Luxon 使用 1-based因此必须1时区与 locale 直接透传插件假定数组字段已是日历timeZone下的墙上时间直接用zone: timeZone重建DateTime并用localeCodes[0]作为 Luxon 的 locale。这样 Luxon 能按目标语言输出月份、星期名称同时不会产生二次时区偏移。数组的来源是 packages/headless-calendar/src/formatting-interface.ts 的createVerboseFormattingArg它把ZonedMarker展开为ExpandedZonedMarker并组装出VerboseFormattingData含date/start/end、timeZone、localeCodes。2. 单日期格式化与部件化输出formatWithCmdStrpackages/format-luxon3/src/format.ts 是插件核心formatWithCmdStr当data.end存在时走范围格式化否则走单日期格式化const lux arrayToLuxon( data.date.array, data.timeZone, data.localeCodes[0], ) const singleCmdStr cmd.whole const singleOutStr lux.toFormat(singleCmdStr) return emulateParts(singleCmdStr, singleOutStr) || singleOutStr单日期路径直接调用 Luxon 的DateTime#toFormat即格式串 token 完全遵循 Luxon 语法LLLL月份全名、d日、yyyy四位年与 README 示例LLLL d, yyyy一致。emulateParts做了一层部件化补偿format.ts当输出串恰好只包含一组数字且格式串中含有d/dd日号 token时插件会把输出拆成Intl.DateTimeFormatPart[]结构{ type: day, value: 30 }夹在两个literal部件之间。从实现看这是为了让依赖部件结构的调用方如格式化导航链接等可访问性文本在 Luxon 路径下也能获得与 Intl 路径类似的部件数据若无法拆分则直接返回字符串。3. 范围格式化与{ }共享去重标题、事件时间常涉及日期范围如月视图标题跨两个月的场景。范围路径的关键是parseCmdStr与formatRangeformat.tsparseCmdStr用正则/^(.*?)\{(.*)\}(.*)$/把格式串拆成head / middle / tail三段且支持嵌套{ }formatRange分别对 start、end 格式化 head/middle/tail当head 与 tail 相同时只保留一份middle 不同才插入分隔符。这与 FullCalendar 内部格式串中的{ }用法对应把跨范围可能重复的部分放进花括号插件即可生成June 26 – July 2, 2026这样的紧凑文本年份只出现一次。范围模式统一使用DEFAULT_RANGE_SEPARATOR – en dash 两端加窄不换行空格format.ts该常量注释标明它模仿了Intl.DateTimeFormat.formatRangeToParts在 en-US 下的输出。注意范围路径返回的是纯字符串因此CmdDateFormatter.formatRangeToParts会把它包装成单个literal部件见 formatting-cmd.ts。4. 插件钩子的合并与优先级cmdFormatter是插件系统的一个钩子。packages/preact/src/plugin-system.ts 中合并规则为hooks1.cmdFormatter || hooks0.cmdFormatter——即后注册的插件优先该钩子最终通过CalendarDataManager的pluginHooks.cmdFormatter见 packages/preact/src/reducers/CalendarDataManager.ts注入格式化上下文供CmdDateFormatter回调。这也是必须在plugins中显式传入插件或使用全局构建自动注册的原因。全局脚本构建Global / UMD若使用script全局脚本方式packages/format-luxon3/src/global.ts 会在脚本加载时执行FullCalendar.globalPlugins.push(plugin)即插件自动注册无需再写进plugins数组。对应的构建配置见 package.json导出./globalformat: global、primary并把luxon声明为外部全局externalGlobals: { luxon: luxon }。因此全局模式下需保证页面中存在luxon全局对象否则插件无法工作。常见问题与注意事项别漏掉对等依赖luxon3与temporal-polyfill是peerDependencies漏装会导致插件加载或运行时报错请始终使用 README 中的两条安装命令。格式串语法是 Luxon 的不是 Intl 的例如月份全名要用LLLL而非 Intl 对象的month: long、四位年用yyyy。写错 token 时 Luxon 会原样输出或忽略需对照 Luxon 文档核对。对象式配置不受插件影响把titleFormat等写成{ year: numeric, month: long }对象仍走NativeDateFormatter此时不依赖本插件。时区名需 Luxon 支持插件按日历timeZone重建 DateTime时区值应为 Luxon/IANA 可识别的名称如America/New_York、UTC。范围文本使用{ }去重若自定义范围类文本可把首尾共有部分置于花括号内以生成紧凑的June 26 – July 2式输出。全局构建需luxon全局变量全局脚本模式自动注册插件但必须先行加载 Luxon 的全局脚本。相关文件索引官方接入说明packages/format-luxon3/README.md插件定义与全局注册packages/format-luxon3/src/index.ts、packages/format-luxon3/src/global.ts核心格式化实现packages/format-luxon3/src/format.ts日期字段转换packages/format-luxon3/src/convert.ts依赖与构建配置packages/format-luxon3/package.json格式化基础设施packages/headless-calendar/src/formatting-interface.ts、packages/headless-calendar/src/formatting-cmd.ts格式化输入分发packages/preact/src/datelib/formatting.ts标题生成逻辑packages/preact/src/reducers/title-formatting.ts插件钩子合并packages/preact/src/plugin-system.ts对照实现Moment 版packages/format-moment/src/format.ts赞分享前端UI组件【免费下载链接】fullcalendarFull-sized drag drop event calendar in JavaScript项目地址https://gitcode.com/gh_mirrors/fu/fullcalendar点击查看免费下载相关推荐免费开源的 LibreHardwareMonitor把温度、转速、电压、频率一次盯住免费开源的 LibreHardwareMonitor把温度、转速、电压、频率一次盯住 LibreHardwareMonitor 是一个免费开源的硬件监控工具指标监控Luxon日期时间格式化全指南从基础到高级应用Luxon日期时间格式化全指南从基础到高级应用一、格式化概述在Luxon日期时间库中格式化功能是将DateTime对象转换为可读字符串的核心能力。根据使开发工具Luxon格式化与解析完全手册Luxon格式化与解析完全手册本文全面介绍了Luxon库在日期时间处理方面的强大功能重点涵盖了ISO 8601标准格式处理、国际化本地化字符串格式化、自定义开发工具上一篇如何利用机器学习提升金融交易策略Py4AT项目中的Scikit-Learn和TensorFlow实战指南下一篇告别跨设备困扰h2ogpt全平台兼容性测试实战指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

FullCalendar Luxon 3 日期格式化插件：安装接入、Luxon 格式串配置与源码级格式化原理

相关推荐

mdBook 渲染器（Backend）配置完全指南：从输出表、自定义命令到 HTML 渲染器的全部选项

Java+AI的SSE流式输出：从显式调用到虚拟线程实战

Wan2.1 安装实战：pip 与 Poetry 依赖安装、flash-attn 编译问题排查及推理验证

更多资讯

遗传算法优化BP神经网络：解决预测模型过拟合与局部极小值问题

PAT链表去重：数组模拟静态链表，避开指针误区

HTML三级导航菜单栏避坑指南：CSS定位、hover动画与触屏兼容

B200 NVLS失效根因：Fabric Manager版本不一致详解

社区助老志愿服务平台开发全记录：需求、架构与实操要点

sokit 1.3 win32中文版使用指南：TCP/UDP调试与HEX报文实战

今日更新

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

本周精选

如何彻底离线使用 Laya-CoreML：Hugging Face 下载、缓存机制与 local_files_only 详解

基于1Panel 部署MySQL MCP 服务：TaoToken 统一 Key 接入与 config.toml 配置实战

崇州园区营销网站建设避坑指南：5大注意事项保备案安全

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？