- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在基于 Big Calendar 为我的非营利组织开发一个应用程序。我需要使用拖放功能。我可以将事件从插槽拖到另一个位置,但事件不会停留在原位并返回到其先前位置。
所有其他功能都运行良好:创建和编辑事件。
这是代码
import React, { useState, useEffect } from 'react';
import { Calendar, momentLocalizer } from 'react-big-calendar';
import withDragAndDrop from 'react-big-calendar/lib/addons/dragAndDrop';
import moment from 'moment';
import 'moment/locale/fr';
import Modal from 'react-bootstrap/Modal';
import CalendarForm from './CalendarForm';
import { observer } from 'mobx-react';
import { getCalendar } from './requests';
const localizer = momentLocalizer(moment);
const DnDCalendar = withDragAndDrop(Calendar);
const HomePage = ({ calendarStore }) => {
const [showAddModal, setShowAddModal] = useState(false);
const [showEditModal, setShowEditModal] = useState(false);
const [calendarEvent, setCalendarEvent] = useState({});
const [initialized, setInitialized] = useState(false);
let today = new Date();
const hideModals = () => {
setShowAddModal(false);
setShowEditModal(false);
};
const getCalendarEvents = async () => {
const response = await getCalendar();
const evs = response.data.map((d) => {
return {
...d,
start: new Date(d.start),
end: new Date(d.end),
};
});
calendarStore.setCalendarEvents(evs);
setInitialized(true);
};
const handleSelect = (event, e) => {
const { start, end } = event;
const data = { title: '', subject: '', start, end, allDay: false };
setShowAddModal(true);
setShowEditModal(false);
setCalendarEvent(data);
};
const handleSelectEvent = (event, e) => {
setShowAddModal(false);
setShowEditModal(true);
let { id, title, subject, start, end, allDay } = event;
start = new Date(start);
end = new Date(end);
const data = { id, title, subject, start, end, allDay };
setCalendarEvent(data);
};
const handleDragEvent = (event, e) => {
setShowAddModal(false);
setShowEditModal(false);
let { id, title, subject, start, end, allDay } = event;
start = new Date(start);
end = new Date(end);
const data = { id, title, subject, start, end, allDay };
setCalendarEvent(data);
};
useEffect(() => {
if (!initialized) {
getCalendarEvents();
}
});
return (
<div className="page">
<Modal show={showAddModal} onHide={hideModals}>
<Modal.Header closeButton>
<Modal.Title>Ajouter une session</Modal.Title>
</Modal.Header>
<Modal.Body>
<CalendarForm
calendarStore={calendarStore}
calendarEvent={calendarEvent}
onCancel={hideModals.bind(this)}
edit={false}
/>
</Modal.Body>
</Modal>
<Modal show={showEditModal} onHide={hideModals}>
<Modal.Header closeButton>
<Modal.Title>Editer la session</Modal.Title>
</Modal.Header>
<Modal.Body>
<CalendarForm
calendarStore={calendarStore}
calendarEvent={calendarEvent}
onCancel={hideModals.bind(this)}
edit={true}
/>
</Modal.Body>
</Modal>
<DnDCalendar
localizer={localizer}
events={calendarStore.calendarEvents}
startAccessor="start"
endAccessor="end"
defaultView="week"
selectable={true}
resizable={true}
onEventDrop={handleDragEvent}
style={{ height: '70vh' }}
onSelectSlot={handleSelect}
onSelectEvent={handleSelectEvent}
min={
new Date(today.getFullYear(), today.getMonth(), today.getDate(), 8)
}
max={
new Date(today.getFullYear(), today.getMonth(), today.getDate(), 23)
}
messages={{
month: 'mois',
week: 'semaine',
day: 'jour',
today: "aujourd'hui",
next: 'suiv.',
previous: 'préc.',
}}
resource="Test ressource"
eventPropGetter={(event) => ({
style: {
backgroundColor: event.isDone === true ? '#ad4ca4' : '#3174ad',
},
})}
/>
</div>
);
};
export default observer(HomePage);
最佳答案
拖放不会显式更新您的 events
.您必须提供 onEventDrop
prop,带有方法签名 ({event, start, end, isAllDay}) => update your events
.
const onEventDrop = ({event, start, end, isAllDay}) => {
const updatedEvent = {...event, start, end, isAllDay};
// Any other logic. If async saving your change, you'll probably
// do the next line in a `.then()`
setEvents((prevEvents) => {
const filtered = prevEvents.filter((item) => item.id !== event.id);
return [...filtered, updatedEvent];
});
};
关于javascript - 通过拖放响应大日历,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62882026/
这个问题在这里已经有了答案: Difference between Property and Field in C# 3.0+ (10 个答案) 关闭 10 年前。 我不明白静态属性之间的区别: p
当元素被拖放时,有没有办法从被拖动的元素中获取 id(或其他属性值)? 例如,在左侧,我有一堆 div,我可以将图像放入其中。右边有一个 div 用来保存图像。当我将图像从右侧拖动到左侧的 div 时
每当我更改其中一个类属性时,我想设置一个修改标志,如下所示 public bool Modified { get; set; } public bool Enabled { get; set { Mo
由于某种原因,我下面的代码曾经可以正常工作,但现在却引发了一个异常: public static async Task HttpPut(string inUrl, string inFilePath)
为什么将 ; 放在最佳实践中?在函数定义的末尾。 例如 var tony = function () { console.log("hello there"); }; 优于: var tony
我在容器内有一个位图。当我拖动容器时,光标变为编辑文本形状,图像也跳到光标的右下角(好像我从左上角拿着图像并拖动它)。 这是我的代码,所以你可以看到我有 RTFM: function createIc
这个问题已经有答案了: C# 3.0 auto-properties — useful or not? [closed] (17 个回答) 已关闭 6 年前。 当我让 Visual Studio 20
以类中的以下代码为例: public class Employee : IEntity { public string FirstName { get; set; } public s
我有 json 数据: { "products": [ { "productId" : 0, "productImg" : "../img/product-ph
这个问题在这里已经有了答案: What is the difference between a field and a property? (33 个答案) 关闭 9 年前。 我在一本书上找到这样声
我正在设置多个方法,想知道如何继续将一个变量(“顶部”变量)传递给不同的方法。 主要方法: public static void Main(string[] args) { i
我正在尝试使用 crontab 编写一个简单的任务,将一些文件从本地复制到 HDFS。我的代码是这样的: #!/bing/ksh ANIO=$(date +"%Y") MES=$(date +"%m"
有人可以告诉我如何使用这个解决方案来解决我的问题吗?我也想限制 id 中包含文本“not”的节点的拖/放。 jsTree drag and drop restrict folders by class
我的情况如下 - 我正在对可能包含链接行的表进行排序: row 1 row 2 row 3 row 4 row 5 我需要的是禁止在.linked-to-p
我想知道是否有人知道是否有一个预先制定的解决方案:我在 ASP.net 网站上有一个列表,我希望用户能够通过拖放对列表进行重新排序。此外,我希望有第二个列表,用户可以将第一个列表中的项目拖到其中。 到
我在理解似乎不一致的方案中的破坏性操作时遇到问题。即为什么下例中bar没有变化 (define foo '(a b)) (define bar foo) (set! foo '(c d)) foo >
我想知道是否有人知道是否有一个预先制定的解决方案:我在 ASP.net 网站上有一个列表,我希望用户能够通过拖放对列表进行重新排序。此外,我希望有第二个列表,用户可以将第一个列表中的项目拖到其中。 到
我在理解似乎不一致的方案中的破坏性操作时遇到问题。即为什么下例中bar没有变化 (define foo '(a b)) (define bar foo) (set! foo '(c d)) foo >
我在我的 Web 应用程序中使用 Ajax ControlToolkit 中的 ModalPopupExtender。我将其 Drag 属性设置为 true,但是当我拖动弹出面板并将其放到新位置时,它
所以,基于this answer ,我有一组可以拖放并卡入到位的 div。唯一的问题是,可拖动的 div 具有不同的高度,我需要它们始终捕捉到目标的底部,而不是顶部。 您可以在this JsFiddl
我是一名优秀的程序员,十分优秀!