前端UI组件【免费下载链接】react-big-calendargcal/outlook like calendar component项目地址https://gitcode.com/gh_mirrors/re/react-big-calendar点击查看免费下载导读本文是 react-big-calendar 官方 Drag and Drop 扩展位于 src/addons/dragAndDrop/README.md的深度实战解析。你将掌握如何通过withDragAndDrop高阶组件HOC为日历开启事件拖拽移动与拖拽缩放能力理解onEventDrop、onEventResize、onDragStart、onDropFromOutside、onDragOver等回调的完整签名与语义并了解行式row渲染与时间式渲染下事件时间保留的微妙差异。读完本文你将能够直接在自己的 React 项目中集成一个可拖拽、可缩放的日历组件。一、什么是 withDragAndDropwithDragAndDrop是 react-big-calendar 提供的社区维护 Addons 之一参见 src/addons/README.md它本质是一个高阶组件HOC接收一个Calendar组件作为输入返回一个支持事件拖拽移动与缩放的增强版DragAndDropCalendar组件。其核心入口实现位于 withDragAndDrop.js。该 HOC 通过 mergeComponents 将三个内部包装组件注入到日历的组件体系中EventWrapperEventWrapper.js负责给单个事件挂载拖拽与缩放的交互手柄resize anchorEventContainerWrapperEventContainerWrapper.js负责时间视图中Day/Week 的时间列事件的移动与缩放计算WeekWrapperWeekWrapper.js负责行式视图月视图、allDay 头行中事件的横向移动与横向缩放计算。这些包装组件之间通过DnDContextReact Context见 DnDContext.js共享拖拽状态正在拖拽的事件、动作类型move/resize、方向等并由 withDragAndDrop.js 在渲染时通过DnDContext.Provider提供给整棵日历组件树。基本用法import { Calendar } from react-big-calendar import withDragAndDrop from react-big-calendar/lib/addons/dragAndDrop import react-big-calendar/lib/addons/dragAndDrop/styles.css const DnDCalendar withDragAndDrop(Calendar) /* ... */ return ( DnDCalendar localizer{myLocalizer} events{events} draggableAccessor{event true} / )要点说明引入路径react-big-calendar/lib/addons/dragAndDrop对应源码中的 index.js其默认导出即withDragAndDrop必须同时引入styles.css源码为 styles.scss构建产物为 styles.css否则拖拽预览、缩放锚点等视觉效果不会出现如果不需要事件缩放可在日历组件上设置resizable{false}——resizable默认值为true见 withDragAndDrop.js 中的defaultProps。二、新增的 Props 与回调签名HOC 在保留原Calendar全部 props 的基础上额外新增以下 propsPropTypes 定义见 withDragAndDrop.jsProp类型作用onEventDropfunc事件被移动drop后触发onEventResizefunc事件被缩放resize后触发onDragStartfunc拖拽/缩放动作开始时触发onDragOverfunc外部可拖拽元素划过日历上方时触发onDropFromOutsidefunc外部可拖拽元素被放到日历上时触发dragFromOutsideItemfunc返回当前正在拖拽的外部 item 对象用于渲染预览draggableAccessoraccessor判断单个事件是否可拖拽resizableAccessoraccessor判断单个事件是否可缩放resizablebool是否启用缩放默认true回调签名function onEventDrop({ event, start, end, allDay }) {...} function onEventResize(type, { event, start, end, allDay }) {...} // type is always drop function onDragStart({ event, action, direction }) {...}逐项解读onEventDrop({ event, start, end, allDay })当用户把事件拖拽到新位置并松开鼠标时触发。event是被移动的事件对象保留原引用及其原有字段start/end是拖拽落点的新时间范围allDay表示落点是否为 allDay 区如月视图或周视图的顶部头行。你通常需要在此回调中更新自己的事件状态数组。onEventResize(type, { event, start, end, allDay })事件缩放结束时触发。type目前恒为字符串drop。同样需要在该回调中把新时间范围写回事件。onDragStart({ event, action, direction })拖拽action: move或缩放action: resize动作开始时触发。direction仅在缩放时有效取值为UP、DOWN、LEFT、RIGHT方向锚点定义见 EventWrapper.js。可用于隐藏原事件、展示占位元素等交互反馈。从源码实现看这些回调的触发链路是EventWrapper捕获onMouseDown/onTouchStart后调用onBeginActionwithDragAndDrop.js 将其转发为onDragStart当EventContainerWrapper或WeekWrapper结束一次交互时调用draggable.onEnd(interactionInfo)再由 handleInteractionEnd 根据action分发到onEventDrop或onEventResize。三、关键语义行式渲染与时间保留文档特别提醒事件的移动与缩放存在一个需要留意的细节在某些场景下非 allDay 事件也会以“行式row”渲染例如月视图中的所有事件以及日/周视图中跨多天multi-day的事件除非设置了showMultiDayTimes。当把非 allDay 事件拖到头部区域header area或者因为行式渲染而横向缩放它们时事件的时间时分秒会被保留只有日期发生改变。也就是说行式布局下你拖动的是一整个“天”块事件在几点几分并不参与计算。对应的底层逻辑可见 WeekWrapper.js移动时通过getSlotAtX根据鼠标横坐标定位目标槽位再用localizer.merge(date, start)把原事件的时分秒“合并”到新日期上同时用eventTimes计算出的duration毫秒推算出新的结束时间。用 allDay 参数区分落点如果你需要精确处理这些边界情况可以检查回调中提供的allDay参数判断用户到底是把事件放到了 allDay 区头行还是时间槽中const moveEvent useCallback( ({ event, start, end, isAllDay: droppedOnAllDaySlot false }) { const { allDay } event if (!allDay droppedOnAllDaySlot) { event.allDay true } setMyEvents((prev) { const existing prev.find((ev) ev.id event.id) ?? {} const filtered prev.filter((ev) ev.id ! event.id) return [...filtered, { ...existing, start, end, allDay }] }) }, [setMyEvents] )这段代码来自仓库示例 dndOutsideSource.js当非 allDay 事件被放到 allDay 槽时自动把事件的allDay置为true从而保证事件在月视图/头行中正确显示。此外还有两个底层行为值得注意来自 common.js时长计算通过localizer.diff(start, end, milliseconds)完成移动时保持时长不变零时长事件start 与 end 在同一分钟内会被自动扩展为至少 1 天localizer.add(end, 1, day)避免“瞬间事件”无法参与拖拽布局。四、外部元素拖入日历onDropFromOutside 与 onDragOver除了日历内部事件的拖拽该 HOC 还支持把日历之外的 DOM 元素拖入日历从而创建新事件。默认行为默认情况下日历不会响应外部可拖拽元素draggabletrue的 DOM的落下。一旦传入了onDropFromOutside回调外部元素被放到日历上时就会触发该回调接收一个包含start、end时间以及allDay布尔值的对象。function onDropFromOutside({ start, end, allDay }) {...} function onDragOver(DragEvent: event) {...}onDragOver 的判别机制如果只传了onDropFromOutside而没有传onDragOver那么任何可拖拽事件默认都可以放进日历如果传了onDragOver则由它来判别某个外部元素是否可以落入日历在onDragOver内部调用event.preventDefault()表示允许落下不调用则不允许。从源码看默认的onDragOver实现就是无条件event.preventDefault()见 withDragAndDrop.js并且只有当传入了onDropFromOutside时该onDragOver才会被挂到日历根节点的elementProps上withDragAndDrop.js。结合仓库示例dndOutsideSource.js可以按需做条件放行const customOnDragOverFromOutside useCallback( (dragEvent) { // 仅当被拖元素不是 undroppable 时才放行 if (draggedEvent ! undroppable) { dragEvent.preventDefault() } }, [draggedEvent] )示例中两个计数器卡片和“Draggable but not for calendar”卡片都是draggabletrue的外部源后者由于在onDragOver中没有调用preventDefault因此永远无法落入日历。dragFromOutsideItem预览渲染可选的dragFromOutsideItem回调用于返回“当前正在被拖拽的外部 item”本身日历会据此在鼠标所在槽位渲染一个预览事件对应 EventContainerWrapper.js 与 WeekWrapper.js 的dragOverFromOutside分支。预览事件的结束时间按原 item 的时长推算若 item 没有可计算的时长则默认占一个槽位EventContainerWrapper.js。一个完整的落库处理示例dndOutsideSource.jsconst onDropFromOutside useCallback( ({ start, end, allDay: isAllDay }) { const { name } draggedEvent const event { title: formatName(name, counters[name]), start, end, isAllDay, } setDraggedEvent(null) setCounters((prev) { const { [name]: count } prev return { ...prev, [name]: count 1 } }) newEvent(event) // 把新事件追加进事件数组 }, [draggedEvent, counters, setDraggedEvent, setCounters, newEvent] )五、draggableAccessor 与 resizableAccessor按事件控制能力这两个 accessor 用于对单个事件精细控制拖拽与缩放能力未传入时默认所有事件均可拖拽/可缩放draggableAccessor: null, resizableAccessor: null, resizable: true,默认值见 withDragAndDrop.js。它们的实际判定发生在 EventWrapper.js如果draggableAccessor返回 falsy则该事件直接返回原始children不做任何包装isResizable则同时取决于全局resizable与resizableAccessor。示例 dndOutsideSource.js 中给一半事件加了isDraggable: false再通过draggableAccessorisDraggable让这些事件在日历中保持静态。缩放方向与锚点EventWrapper.js 决定显示哪些缩放锚点日期型date事件行式、按天排布显示LEFT/RIGHT东-西向锚点时间型time事件时间列中显示UP/DOWN南-北向锚点如果事件跨出当前显示边界continuesPrior/continuesAfter则不在越界一侧显示锚点。对应的视觉样式在 styles.scssns锚点呈水平双线、ew锚点呈垂直双线默认隐藏、事件 hover 时显示并分别使用ns-resize与ew-resize光标。拖拽中的视觉反馈拖拽期间HOC 会给日历根节点追加rbc-addons-dnd-is-dragging类给被拖事件追加rbc-addons-dnd-dragged-event类withDragAndDrop.js 与 EventWrapper.js。样式层面styles.scss表现为被拖事件透明度降为 0其余事件统一降为 0.5 不透明度从而突出当前拖拽目标。六、一个完整可运行的示例将以上内容组合起来得到一个同时具备“日历内移动/缩放 外部拖入创建”能力的完整日历import { useCallback, useState } from react import { Calendar, momentLocalizer, Views } from react-big-calendar import moment from moment import withDragAndDrop from react-big-calendar/lib/addons/dragAndDrop import react-big-calendar/lib/addons/dragAndDrop/styles.css import react-big-calendar/lib/css/react-big-calendar.css const localizer momentLocalizer(moment) const DnDCalendar withDragAndDrop(Calendar) export default function App() { const [myEvents, setMyEvents] useState([]) const [draggedEvent, setDraggedEvent] useState(null) const moveEvent useCallback(({ event, start, end, allDay }) { setMyEvents((prev) prev.map((ev) ev.id event.id ? { ...ev, start, end, allDay } : ev )) }, []) const resizeEvent useCallback(({ event, start, end }) { setMyEvents((prev) prev.map((ev) ev.id event.id ? { ...ev, start, end } : ev )) }, []) const onDropFromOutside useCallback(({ start, end, allDay }) { setMyEvents((prev) [ ...prev, { id: prev.length 1, title: draggedEvent, start, end, allDay }, ]) setDraggedEvent(null) }, [draggedEvent]) return ( div style{{ height: 600 }} div draggable onDragStart{() setDraggedEvent(外部任务)} style{{ padding: 8, marginBottom: 8, border: 1px solid #aaa, cursor: grab }} 拖我进日历 /div DnDCalendar localizer{localizer} events{myEvents} defaultView{Views.MONTH} draggableAccessor{(event) true} resizable selectable onEventDrop{moveEvent} onEventResize{resizeEvent} onDropFromOutside{onDropFromOutside} / /div ) }该示例汇总了本文的核心 APIwithDragAndDrop包装、draggableAccessor、resizable、三个日历内回调以及外部拖入回调。更完整的参考实现可在仓库的 dndOutsideSource.js 与对应的 outside.stories.js 中找到。七、进阶理解底层的选择器与预览机制若想深入掌握这套拖拽系统可关注两个底层组件时间视图Day/WeekEventContainerWrapper在挂载时创建Selection选择器EventContainerWrapper.js监听beforeSelect/selecting/select/click/reset等事件。移动时通过slotMetrics.closestSlotFromPoint把鼠标坐标换算成最近的时间槽再保持时长不变推算出新结束时间EventContainerWrapper.js缩放时按UP/DOWN方向分别重新计算 start 或 endEventContainerWrapper.js。拖拽预览通过TimeGridEvent以绝对定位渲染在对应 top/height 处EventContainerWrapper.js。行式视图月视图/头行WeekWrapper使用getSlotAtX按横坐标定位列槽位移动时“只换日期、保留时间”localizer.merge(date, start)横向缩放则分别调整 end 或 start 的日期WeekWrapper.js并通过EventRow渲染拖拽预览行WeekWrapper.js。两个组件还会在拖拽接近容器边缘时通过updateParentScroll自动滚动父容器EventContainerWrapper.js提升长列表下的拖拽体验。最后提醒上述源码文件均位于 src/addons/dragAndDrop/ 目录相关 Storybook 示例位于 stories/addons/dragAndDrop/它们是阅读与验证本文所述行为的最佳参考资料。赞分享前端UI组件【免费下载链接】react-big-calendargcal/outlook like calendar component项目地址https://gitcode.com/gh_mirrors/re/react-big-calendar点击查看免费下载相关推荐WebTorrent CLI核心功能解密为何它是命令行 torrent 工具的佼佼者WebTorrent CLI核心功能解密为何它是命令行 torrent 工具的佼佼者 WebTorrent CLI 是一款功能强大的命令行 torrent 客react-big-calendar 拖拽与缩放插件Drag and Drop Addon完整使用指南react big calendar 拖拽与缩放插件Drag and Drop Addon完整使用指南 本指南以 react big calendar 仓库前端UI组件react-big-calendar事件拖拽边界限制自定义范围与约束条件react big calendar事件拖拽边界限制自定义范围与约束条件 在日程管理应用中事件拖拽功能常需限制在特定时间范围或资源内。本文将介绍如何通过 r前端UI组件上一篇RedisInsight深度解析3大核心功能让Redis管理变得前所未有的简单下一篇NetworkX 2.8.8 发布解读Python 3.11 支持、adjlist 读写计数修复与测试质量改进创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
前端UI组件【免费下载链接】react-big-calendargcal/outlook like calendar component项目地址https://gitcode.com/gh_mirrors/re/react-big-calendar点击查看免费下载导读本文是 react-big-calendar 官方 Drag and Drop 扩展位于 src/addons/dragAndDrop/README.md的深度实战解析。你将掌握如何通过withDragAndDrop高阶组件HOC为日历开启事件拖拽移动与拖拽缩放能力理解onEventDrop、onEventResize、onDragStart、onDropFromOutside、onDragOver等回调的完整签名与语义并了解行式row渲染与时间式渲染下事件时间保留的微妙差异。读完本文你将能够直接在自己的 React 项目中集成一个可拖拽、可缩放的日历组件。一、什么是 withDragAndDropwithDragAndDrop是 react-big-calendar 提供的社区维护 Addons 之一参见 src/addons/README.md它本质是一个高阶组件HOC接收一个Calendar组件作为输入返回一个支持事件拖拽移动与缩放的增强版DragAndDropCalendar组件。其核心入口实现位于 withDragAndDrop.js。该 HOC 通过 mergeComponents 将三个内部包装组件注入到日历的组件体系中EventWrapperEventWrapper.js负责给单个事件挂载拖拽与缩放的交互手柄resize anchorEventContainerWrapperEventContainerWrapper.js负责时间视图中Day/Week 的时间列事件的移动与缩放计算WeekWrapperWeekWrapper.js负责行式视图月视图、allDay 头行中事件的横向移动与横向缩放计算。这些包装组件之间通过DnDContextReact Context见 DnDContext.js共享拖拽状态正在拖拽的事件、动作类型move/resize、方向等并由 withDragAndDrop.js 在渲染时通过DnDContext.Provider提供给整棵日历组件树。基本用法import { Calendar } from react-big-calendar import withDragAndDrop from react-big-calendar/lib/addons/dragAndDrop import react-big-calendar/lib/addons/dragAndDrop/styles.css const DnDCalendar withDragAndDrop(Calendar) /* ... */ return ( DnDCalendar localizer{myLocalizer} events{events} draggableAccessor{event true} / )要点说明引入路径react-big-calendar/lib/addons/dragAndDrop对应源码中的 index.js其默认导出即withDragAndDrop必须同时引入styles.css源码为 styles.scss构建产物为 styles.css否则拖拽预览、缩放锚点等视觉效果不会出现如果不需要事件缩放可在日历组件上设置resizable{false}——resizable默认值为true见 withDragAndDrop.js 中的defaultProps。二、新增的 Props 与回调签名HOC 在保留原Calendar全部 props 的基础上额外新增以下 propsPropTypes 定义见 withDragAndDrop.jsProp类型作用onEventDropfunc事件被移动drop后触发onEventResizefunc事件被缩放resize后触发onDragStartfunc拖拽/缩放动作开始时触发onDragOverfunc外部可拖拽元素划过日历上方时触发onDropFromOutsidefunc外部可拖拽元素被放到日历上时触发dragFromOutsideItemfunc返回当前正在拖拽的外部 item 对象用于渲染预览draggableAccessoraccessor判断单个事件是否可拖拽resizableAccessoraccessor判断单个事件是否可缩放resizablebool是否启用缩放默认true回调签名function onEventDrop({ event, start, end, allDay }) {...} function onEventResize(type, { event, start, end, allDay }) {...} // type is always drop function onDragStart({ event, action, direction }) {...}逐项解读onEventDrop({ event, start, end, allDay })当用户把事件拖拽到新位置并松开鼠标时触发。event是被移动的事件对象保留原引用及其原有字段start/end是拖拽落点的新时间范围allDay表示落点是否为 allDay 区如月视图或周视图的顶部头行。你通常需要在此回调中更新自己的事件状态数组。onEventResize(type, { event, start, end, allDay })事件缩放结束时触发。type目前恒为字符串drop。同样需要在该回调中把新时间范围写回事件。onDragStart({ event, action, direction })拖拽action: move或缩放action: resize动作开始时触发。direction仅在缩放时有效取值为UP、DOWN、LEFT、RIGHT方向锚点定义见 EventWrapper.js。可用于隐藏原事件、展示占位元素等交互反馈。从源码实现看这些回调的触发链路是EventWrapper捕获onMouseDown/onTouchStart后调用onBeginActionwithDragAndDrop.js 将其转发为onDragStart当EventContainerWrapper或WeekWrapper结束一次交互时调用draggable.onEnd(interactionInfo)再由 handleInteractionEnd 根据action分发到onEventDrop或onEventResize。三、关键语义行式渲染与时间保留文档特别提醒事件的移动与缩放存在一个需要留意的细节在某些场景下非 allDay 事件也会以“行式row”渲染例如月视图中的所有事件以及日/周视图中跨多天multi-day的事件除非设置了showMultiDayTimes。当把非 allDay 事件拖到头部区域header area或者因为行式渲染而横向缩放它们时事件的时间时分秒会被保留只有日期发生改变。也就是说行式布局下你拖动的是一整个“天”块事件在几点几分并不参与计算。对应的底层逻辑可见 WeekWrapper.js移动时通过getSlotAtX根据鼠标横坐标定位目标槽位再用localizer.merge(date, start)把原事件的时分秒“合并”到新日期上同时用eventTimes计算出的duration毫秒推算出新的结束时间。用 allDay 参数区分落点如果你需要精确处理这些边界情况可以检查回调中提供的allDay参数判断用户到底是把事件放到了 allDay 区头行还是时间槽中const moveEvent useCallback( ({ event, start, end, isAllDay: droppedOnAllDaySlot false }) { const { allDay } event if (!allDay droppedOnAllDaySlot) { event.allDay true } setMyEvents((prev) { const existing prev.find((ev) ev.id event.id) ?? {} const filtered prev.filter((ev) ev.id ! event.id) return [...filtered, { ...existing, start, end, allDay }] }) }, [setMyEvents] )这段代码来自仓库示例 dndOutsideSource.js当非 allDay 事件被放到 allDay 槽时自动把事件的allDay置为true从而保证事件在月视图/头行中正确显示。此外还有两个底层行为值得注意来自 common.js时长计算通过localizer.diff(start, end, milliseconds)完成移动时保持时长不变零时长事件start 与 end 在同一分钟内会被自动扩展为至少 1 天localizer.add(end, 1, day)避免“瞬间事件”无法参与拖拽布局。四、外部元素拖入日历onDropFromOutside 与 onDragOver除了日历内部事件的拖拽该 HOC 还支持把日历之外的 DOM 元素拖入日历从而创建新事件。默认行为默认情况下日历不会响应外部可拖拽元素draggabletrue的 DOM的落下。一旦传入了onDropFromOutside回调外部元素被放到日历上时就会触发该回调接收一个包含start、end时间以及allDay布尔值的对象。function onDropFromOutside({ start, end, allDay }) {...} function onDragOver(DragEvent: event) {...}onDragOver 的判别机制如果只传了onDropFromOutside而没有传onDragOver那么任何可拖拽事件默认都可以放进日历如果传了onDragOver则由它来判别某个外部元素是否可以落入日历在onDragOver内部调用event.preventDefault()表示允许落下不调用则不允许。从源码看默认的onDragOver实现就是无条件event.preventDefault()见 withDragAndDrop.js并且只有当传入了onDropFromOutside时该onDragOver才会被挂到日历根节点的elementProps上withDragAndDrop.js。结合仓库示例dndOutsideSource.js可以按需做条件放行const customOnDragOverFromOutside useCallback( (dragEvent) { // 仅当被拖元素不是 undroppable 时才放行 if (draggedEvent ! undroppable) { dragEvent.preventDefault() } }, [draggedEvent] )示例中两个计数器卡片和“Draggable but not for calendar”卡片都是draggabletrue的外部源后者由于在onDragOver中没有调用preventDefault因此永远无法落入日历。dragFromOutsideItem预览渲染可选的dragFromOutsideItem回调用于返回“当前正在被拖拽的外部 item”本身日历会据此在鼠标所在槽位渲染一个预览事件对应 EventContainerWrapper.js 与 WeekWrapper.js 的dragOverFromOutside分支。预览事件的结束时间按原 item 的时长推算若 item 没有可计算的时长则默认占一个槽位EventContainerWrapper.js。一个完整的落库处理示例dndOutsideSource.jsconst onDropFromOutside useCallback( ({ start, end, allDay: isAllDay }) { const { name } draggedEvent const event { title: formatName(name, counters[name]), start, end, isAllDay, } setDraggedEvent(null) setCounters((prev) { const { [name]: count } prev return { ...prev, [name]: count 1 } }) newEvent(event) // 把新事件追加进事件数组 }, [draggedEvent, counters, setDraggedEvent, setCounters, newEvent] )五、draggableAccessor 与 resizableAccessor按事件控制能力这两个 accessor 用于对单个事件精细控制拖拽与缩放能力未传入时默认所有事件均可拖拽/可缩放draggableAccessor: null, resizableAccessor: null, resizable: true,默认值见 withDragAndDrop.js。它们的实际判定发生在 EventWrapper.js如果draggableAccessor返回 falsy则该事件直接返回原始children不做任何包装isResizable则同时取决于全局resizable与resizableAccessor。示例 dndOutsideSource.js 中给一半事件加了isDraggable: false再通过draggableAccessorisDraggable让这些事件在日历中保持静态。缩放方向与锚点EventWrapper.js 决定显示哪些缩放锚点日期型date事件行式、按天排布显示LEFT/RIGHT东-西向锚点时间型time事件时间列中显示UP/DOWN南-北向锚点如果事件跨出当前显示边界continuesPrior/continuesAfter则不在越界一侧显示锚点。对应的视觉样式在 styles.scssns锚点呈水平双线、ew锚点呈垂直双线默认隐藏、事件 hover 时显示并分别使用ns-resize与ew-resize光标。拖拽中的视觉反馈拖拽期间HOC 会给日历根节点追加rbc-addons-dnd-is-dragging类给被拖事件追加rbc-addons-dnd-dragged-event类withDragAndDrop.js 与 EventWrapper.js。样式层面styles.scss表现为被拖事件透明度降为 0其余事件统一降为 0.5 不透明度从而突出当前拖拽目标。六、一个完整可运行的示例将以上内容组合起来得到一个同时具备“日历内移动/缩放 外部拖入创建”能力的完整日历import { useCallback, useState } from react import { Calendar, momentLocalizer, Views } from react-big-calendar import moment from moment import withDragAndDrop from react-big-calendar/lib/addons/dragAndDrop import react-big-calendar/lib/addons/dragAndDrop/styles.css import react-big-calendar/lib/css/react-big-calendar.css const localizer momentLocalizer(moment) const DnDCalendar withDragAndDrop(Calendar) export default function App() { const [myEvents, setMyEvents] useState([]) const [draggedEvent, setDraggedEvent] useState(null) const moveEvent useCallback(({ event, start, end, allDay }) { setMyEvents((prev) prev.map((ev) ev.id event.id ? { ...ev, start, end, allDay } : ev )) }, []) const resizeEvent useCallback(({ event, start, end }) { setMyEvents((prev) prev.map((ev) ev.id event.id ? { ...ev, start, end } : ev )) }, []) const onDropFromOutside useCallback(({ start, end, allDay }) { setMyEvents((prev) [ ...prev, { id: prev.length 1, title: draggedEvent, start, end, allDay }, ]) setDraggedEvent(null) }, [draggedEvent]) return ( div style{{ height: 600 }} div draggable onDragStart{() setDraggedEvent(外部任务)} style{{ padding: 8, marginBottom: 8, border: 1px solid #aaa, cursor: grab }} 拖我进日历 /div DnDCalendar localizer{localizer} events{myEvents} defaultView{Views.MONTH} draggableAccessor{(event) true} resizable selectable onEventDrop{moveEvent} onEventResize{resizeEvent} onDropFromOutside{onDropFromOutside} / /div ) }该示例汇总了本文的核心 APIwithDragAndDrop包装、draggableAccessor、resizable、三个日历内回调以及外部拖入回调。更完整的参考实现可在仓库的 dndOutsideSource.js 与对应的 outside.stories.js 中找到。七、进阶理解底层的选择器与预览机制若想深入掌握这套拖拽系统可关注两个底层组件时间视图Day/WeekEventContainerWrapper在挂载时创建Selection选择器EventContainerWrapper.js监听beforeSelect/selecting/select/click/reset等事件。移动时通过slotMetrics.closestSlotFromPoint把鼠标坐标换算成最近的时间槽再保持时长不变推算出新结束时间EventContainerWrapper.js缩放时按UP/DOWN方向分别重新计算 start 或 endEventContainerWrapper.js。拖拽预览通过TimeGridEvent以绝对定位渲染在对应 top/height 处EventContainerWrapper.js。行式视图月视图/头行WeekWrapper使用getSlotAtX按横坐标定位列槽位移动时“只换日期、保留时间”localizer.merge(date, start)横向缩放则分别调整 end 或 start 的日期WeekWrapper.js并通过EventRow渲染拖拽预览行WeekWrapper.js。两个组件还会在拖拽接近容器边缘时通过updateParentScroll自动滚动父容器EventContainerWrapper.js提升长列表下的拖拽体验。最后提醒上述源码文件均位于 src/addons/dragAndDrop/ 目录相关 Storybook 示例位于 stories/addons/dragAndDrop/它们是阅读与验证本文所述行为的最佳参考资料。赞分享前端UI组件【免费下载链接】react-big-calendargcal/outlook like calendar component项目地址https://gitcode.com/gh_mirrors/re/react-big-calendar点击查看免费下载相关推荐WebTorrent CLI核心功能解密为何它是命令行 torrent 工具的佼佼者WebTorrent CLI核心功能解密为何它是命令行 torrent 工具的佼佼者 WebTorrent CLI 是一款功能强大的命令行 torrent 客react-big-calendar 拖拽与缩放插件Drag and Drop Addon完整使用指南react big calendar 拖拽与缩放插件Drag and Drop Addon完整使用指南 本指南以 react big calendar 仓库前端UI组件react-big-calendar事件拖拽边界限制自定义范围与约束条件react big calendar事件拖拽边界限制自定义范围与约束条件 在日程管理应用中事件拖拽功能常需限制在特定时间范围或资源内。本文将介绍如何通过 r前端UI组件上一篇RedisInsight深度解析3大核心功能让Redis管理变得前所未有的简单下一篇NetworkX 2.8.8 发布解读Python 3.11 支持、adjlist 读写计数修复与测试质量改进创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
