前端UI组件【免费下载链接】react-big-calendargcal/outlook like calendar component项目地址https://gitcode.com/gh_mirrors/re/react-big-calendar点击查看免费下载react-big-calendar 是一款面向现代浏览器而非 IE的 React 事件日历组件采用 flexbox 布局替代传统的 table-caption 方案提供了月、周、工作日、日、议程agenda等多种视图。本指南以仓库根目录 README.md 为主干结合src/目录下的真实源码带你完成从安装、本地运行示例、选择日期本地化方案到定制样式的完整落地读完即可在业务项目中接入一个可用的日历并理解其本地化与样式机制。安装与基础使用react-big-calendar 通过 npm 或 yarn 安装yarn add react-big-calendar # 或 npm install --save react-big-calendar安装完成后需要引入编译好的样式文件import react-big-calendar/lib/css/react-big-calendar.css同时必须保证日历容器的元素具有高度否则日历不会显示样式文件中的.rbc-calendar采用height: 100%的 flex 纵向布局见 src/sass/styles.scss父容器没有确定高度时日历高度会塌缩为 0。注意根据仓库 package.json本库的 peerDependencies 为react ^16.14.0 || ^17 || ^18 || ^19与对应的react-dom请在兼容的 React 版本下使用。官方 Starter 项目仓库 README 推荐了三个可直接克隆的入门工程react-big-calendar基础 starter演示最小可用的日历接入方式react-big-calendar with drag and drop集成拖拽DnD插件的 starterreact-big-calendar with TypeScript and React hooks bundled with Vite使用 TypeScript、React hooks 并以 Vite 打包的 starter。对于需要拖拽、缩放事件能力的场景直接以 DnD starter 起步可以省去大量配置工作。本地运行 Storybook 示例本仓库自带 Storybook 示例工程本地运行方式如下$ git clone gitgithub.com:bigcalendar/react-big-calendar.git $ cd react-big-calendar $ yarn $ yarn storybook在当前仓库的 package.json 中storybook脚本实际执行start-storybook -p 9002端口为 9002README 中提到的 3000 端口为旧版示例页面地址。启动后浏览器打开 Storybook 界面即可浏览 stories/demos 与 stories/props 下丰富的交互式示例。Storybook 中的示例代码是学习 API 的最佳入口例如 stories/demos/exampleCode/basic.js 展示了views、defaultDate、max、showMultiDayTimes、step、components等常用 prop 的组合用法。必须选择一种 Localizer四种日期本地化方案react-big-calendar 本身不直接处理日期格式化与国际化而是要求你从四种日期库中选择一个作为 Localizer本地化器。这是使用本库的硬性前置条件——Calendar组件的localizerprop 为必填项见 src/Calendar.js。可选的方案为Moment.js 目录moment.js、globalize.js、date-fns.js、dayjs.js另有兼容旧版 Globalize 的oldGlobalize.js。所有 Localizer 最终都会构造一个DateLocalizer实例向其注入format、firstOfWeek、startOf、add、diff、merge、range、inRange等日期运算方法。Calendar内部通过mergeWithDefaults将 Localizer 的默认formats、culture与用户传入的formatOverrides合并再交给各视图组件做展示。Moment.jsimport { Calendar, momentLocalizer } from react-big-calendar import moment from moment const localizer momentLocalizer(moment) const MyCalendar (props) ( div Calendar localizer{localizer} events{myEventsList} startAccessorstart endAccessorend style{{ height: 500 }} / /div )momentLocalizer的实现见 src/localizers/moment.js它以DateLocalizer为基座重写了全部日期算术方法并利用 moment 的localeData().firstDayOfWeek()获取文化对应的每周首日src/localizers/moment.js。若安装了moment-timezone还可以获得时区感知的能力Localizer 会通过moment.tz.guess()或_z.name推断时区并计算 DST 偏移src/localizers/moment.js。Globalize.js v0.1.1import { Calendar, globalizeLocalizer } from react-big-calendar import globalize from globalize const localizer globalizeLocalizer(globalize) const MyCalendar (props) ( div Calendar localizer{localizer} events{myEventsList} startAccessorstart endAccessorend style{{ height: 500 }} / /div )globalizeLocalizer的实现见 src/localizers/globalize.js。它依赖 CLDRUnicode 通用区域数据仓库判断每周首日优先从cldr.get(supplemental).weekData.firstDay读取地区对应的周首日若 CLDR supplemental 数据未加载则回退到基于formatDate(date, { raw: e })的旧算法并在非生产环境输出一条错误提示src/localizers/globalize.js。需要说明的是源码首行注释明确标注TODO: fix the globalizeLocalizer to work with globalize 1.x即当前实现针对的是 README 中标注的Globalize.js v0.1.1版本如果传入的globalize对象没有load方法会直接退化为使用oldGlobalizesrc/localizers/globalize.js。如果你的项目使用的是 Globalize 1.x请谨慎评估此方案。date-fns v2import { Calendar, dateFnsLocalizer } from react-big-calendar import format from date-fns/format import parse from date-fns/parse import startOfWeek from date-fns/startOfWeek import getDay from date-fns/getDay import enUS from date-fns/locale/en-US const locales { en-US: enUS, } const localizer dateFnsLocalizer({ format, parse, startOfWeek, getDay, locales, }) const MyCalendar (props) ( div Calendar localizer{localizer} events{myEventsList} startAccessorstart endAccessorend style{{ height: 500 }} / /div )注意与其他 Localizer 不同dateFnsLocalizer不是直接传入一个库实例而是接收一个配置对象format、parse、startOfWeek、getDay四个函数以及一个locales映射culture 名 → date-fns locale 对象。实现见 src/localizers/date-fns.js其firstOfWeek(culture)通过getDay(startOfWeek(new Date(), { locale: locales[culture] }))计算周首日format(value, formatString, culture)则将日期与 locale 交给 date-fns 的format完成。这也是 README 中示例必须显式引入format、startOfWeek、getDay与 locale 对象的原因。Day.jsimport { Calendar, dayjsLocalizer } from react-big-calendar import dayjs from dayjs const localizer dayjsLocalizer(dayjs) const MyCalendar (props) ( div Calendar localizer{localizer} events{myEventsList} startAccessorstart endAccessorend style{{ height: 500 }} / /div )dayjsLocalizer会自动为 Day.js 扩展以下插件见 src/localizers/dayjs.js无需手动注册IsBetween实现inRange区间判断isBetween含端点[]IsLeapYear处理闰年下firstVisibleDay的特殊修正src/localizers/dayjs.jsIsSameOrAfter / IsSameOrBefore支撑gte/lte等比较运算LocaleData通过localeData(culture).firstDayOfWeek()获取每周首日src/localizers/dayjs.jsLocalizedFormat提供LT、L等本地化格式串MinMax支撑min/max日期取值UTC支撑时区偏移计算utcOffset。源码注释特别说明timezone 插件不在此列需要时区功能时必须由使用者自行dayjs.extend(dayjsPluginTimezone)加载Localizer 在构造时检测到dayjsLib.tz存在便会切换到时区感知模式src/localizers/dayjs.js。四种方案的格式体系一览每种 Localizer 都内置了一套默认formats分别见 moment.js、date-fns.js、globalize.js、dayjs.js统一覆盖以下展示位格式键作用位置Moment/Day.js 默认值示例dateFormat日期单元格内的日期数字DDdayFormat日期头部DD dddweekdayFormat表头星期dddtimeGutterFormat左侧时间刻度LTmonthHeaderFormat月视图标题MMMM YYYYdayHeaderFormat日视图标题dddd MMM DDdayRangeHeaderFormat周/工作日视图标题动态区间如MMMM DD – DDagendaHeaderFormat议程视图标题日期区间L – LselectRangeFormat选中时间区间LT – LTeventTimeRangeFormat事件时间区间LT – LT这些默认格式可以通过Calendar的formatsprop 覆盖经mergeWithDefaults与 Localizer 默认格式浅合并见 src/localizer.js也可以在渲染阶段传入culture属性切换语言环境。更多可覆盖的格式键及配套示例可参考 stories/props/formats.mdx 及其对应 story 文件。自定义样式从编译 CSS 到 SASS 变量覆盖开箱即用有两种方式直接引入编译好的 CSS见上文安装一节或者引入随包分发的 SASS 源码import react-big-calendar/lib/sass/styles; import react-big-calendar/lib/addons/dragAndDrop/styles; // 仅在使用 DnD 插件时需要第二行对应拖拽插件自身的样式其源文件位于 src/addons/dragAndDrop/styles.scss另提供 Less 版本 src/addons/dragAndDrop/styles.less。SASS 实现的核心是variables 文件src/sass/variables.scss它定义了大量颜色与尺寸变量供你在引入 styles 之前覆盖从而让日历外观贴合应用主题变量默认值作用$calendar-border/$cell-border#ddd日历与单元格边框颜色$event-bg#3174ad事件背景色$event-borderdarken(#3174ad, 10%)事件边框默认取事件背景加深 10%$event-color#fff事件文字颜色$event-border-radius5px事件圆角$event-padding2px 5px事件内边距$event-zindex4事件层叠层级$btn-color/$btn-bg/$btn-border#373a3c/#fff/#ccc工具栏按钮配色$current-time-color#74ad31当前时间指示线颜色$today-highlight-bg#eaf6ff今日单元格高亮背景$out-of-range-color/$out-of-range-bg-colorlighten(#333, 40%)/lighten(#333, 70%)月视图中非当月日期颜色$time-selection-bg-colorrgba(0, 0, 0, 0.5)时间选择遮罩色$date-selection-bg-colorrgba(0, 0, 0, 0.1)日期选择遮罩色$segment-width0.14286%每个日历列宽占整周的 1/7所有变量均带!default标记因此你可以在引入styles之前自行声明同名变量实现覆盖。例如$event-bg: #1a73e8; $today-highlight-bg: #fff3e0; import react-big-calendar/lib/sass/styles;注意README 明确提示覆盖/重写样式可能引起渲染异常应逐项仔细测试。此外styles.scss通过import ./variables与import ./reset组织并按模块引入toolbar、event、month、agenda、time-grid等分文件见 src/sass/styles.scss自定义时可以直接针对这些分文件中的类名如.rbc-event、.rbc-today、.rbc-header做精准覆写。扩展信息社区与翻译项目欢迎社区贡献README 提供了 Slack 频道入口邀请链接会过期过期时可通过提交 issue 获取新链接。仓库另提供阿拉伯语文档 docs/README-ar.mdREADME 中Translations一节即指向该翻译文件。小结react-big-calendar 的使用要点可以概括为三件事装包 引入 CSS 并给容器设定高度从 Moment.js、Globalize.js、date-fns、Day.js 中必选一个 Localizer 传入Calendar通过formats、culture与 SASS variables 控制日期展示与视觉风格。需要拖拽、跨日事件、时区等高级能力时可进一步阅读仓库 src/addons/dragAndDrop/README.md 与 stories/demos/exampleCode 中的相关示例结合本库各视图组件的源码如 src/Month.js、src/Week.js、src/Agenda.js深入定制自己的日历应用。赞分享前端UI组件【免费下载链接】react-big-calendargcal/outlook like calendar component项目地址https://gitcode.com/gh_mirrors/re/react-big-calendar点击查看免费下载相关推荐react-big-calendar 上手指南安装配置、四种本地化方案与 SASS 自定义样式详解react big calendar 上手指南安装配置、四种本地化方案与 SASS 自定义样式详解 react big calendar 是一个专为 Reac前端UI组件突破技术瓶颈GitHub精选数学资源库的三大实战应用场景突破技术瓶颈GitHub精选数学资源库的三大实战应用场景 你是否曾经在优化算法时感到数学基础不够扎实或者在设计高性能系统时发现数学理论能提供更优雅的解决方文档教程知识库summon高级技巧掌握!var、!file标签灵活处理各种密钥场景summon高级技巧掌握!var、!file标签灵活处理各种密钥场景 summon是一款为常见DevOps工具提供按需密钥访问的CLI工具能够帮助开发者在上一篇Front-End-Checklist 图像性能清单渐进式 JPEGProgressive JPEG编码实践、检测与代码审查指南下一篇世界模型资源清单怎么读Awesome World Models 从入门到实战通关指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考