You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

@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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.15 09:46:01