@event-calendar事件更新回退至今日&日期选择不跳转问题求助
使用@event-calendar开发日历功能遇到的两个问题
我正在基于@event-calendar库开发日历功能,该库原生支持事件的增删改查,以及通过拖拽、调整尺寸更新事件,但目前碰到两个关键问题:
- 修改历史日期的事件后,事件会自动回退到今日日期,无法保留更新后的位置
- 日期选择器功能正常,但选择日期后日历不会自动跳转到对应日期
我尝试通过设置initialDate、datesSet和visibleRange属性解决第二个问题,但均未达到预期效果。
附上相关代码片段:
import { EventCalendar } from '@event-calendar/core'; import { useState } from 'react'; const Calendar = () => { const [selectedDate, setSelectedDate] = useState(new Date()); const [events, setEvents] = useState([ // 示例事件 { id: '1', title: '历史事件', start: new Date('2024-05-10'), end: new Date('2024-05-10') } ]); // 事件更新处理 const handleEventUpdate = (updatedEvent) => { setEvents(prevEvents => prevEvents.map(evt => evt.id === updatedEvent.id ? updatedEvent : evt) ); }; // 日期选择处理 const handleDatePick = (e) => { const pickedDate = new Date(e.target.value); setSelectedDate(pickedDate); // 曾尝试通过更新visibleRange触发跳转,无效 // setVisibleRange({ start: pickedDate, end: new Date(pickedDate.setDate(pickedDate.getDate() + 6)) }); }; return ( <div> <input type="date" value={selectedDate.toISOString().split('T')[0]} onChange={handleDatePick} /> <EventCalendar initialDate={selectedDate} datesSet={(range) => console.log('当前可见范围:', range)} visibleRange={{ start: selectedDate, end: new Date(selectedDate.setDate(selectedDate.getDate() + 6)) }} events={events} onEventUpdate={handleEventUpdate} draggableEvents resizableEvents /> </div> ); }; export default Calendar;
恳请有@event-calendar使用经验的开发者帮忙排查问题原因,给出解决方向。
内容的提问来源于stack exchange,提问作者Sabela merry
相关产品推荐
相关产品推荐

