0

我是react-big-calender 的新手。我在侧边栏上有一个小日历，在小日历中有一个日期的 onClick 我在大日历（周视图）中导航日期的单击周，它工作正常。但是，如果我首先通过单击小日历中的日期手动导航，则工具栏按钮（今天、返回、下一步）将停止工作，我将只能通过单击小日历进行导航。如果我在第一次渲染时使用 (Today,Back,Next) 按钮，这些按钮工作正常，但在我手动触发 onNavigate 方法后停止工作。有解决方法吗？提前致谢。 我的应用

// all imports here

const locales = {
  "en-US": require("date-fns/locale/en-US"),
};

const localizer = dateFnsLocalizer({
  format,
  parse,
  startOfWeek,
  getDay,
  locales,
});



function App() {
  const [newEvent, setNewEvent] = useState({ title: "", start: "", end: "" });
  const [clickedEvent, setClickedEvent] = useState({});
  const [clickedSlot, setClickedSlot] = useState({});
  const [showModal, setShowModal] = useState(false);
  const [smallDate, setSmallDate] = useState();
  const [date, setDate] = useState(smallDate);

  const showEvent = (event) => {
    console.log(clickedEvent);
    setClickedEvent(event);
  };

  const handleSlotClick = (slot) => {
    console.log(clickedSlot);
    setClickedSlot(slot);
  };

  //get clicked date from small calendar to App component
  const getDate = (arg) => {
    setSmallDate(arg);
    console.log(smallDate);
  };

  const eventStyleGetter = (event, start, end, isSelected) => {
    var backgroundColor = "#" + event.hexColor;
    var style = {
      backgroundColor: backgroundColor,
      borderRadius: "5px",
      opacity: 0.9,
      color: "black",
      border: "0px",
      display: "block",
      overflow: "scroll",
    };
    return {
      style: style,
    };
  };

  const calendarStyles = () => {
    return {
      height: 500,
      width: "100%",
      marginLeft: "50px",
      marginRight: "50px",
    };
  };

  return (
    <div className="App">
      <Sidebar getDate={getDate} />
      <Calendar
        popup={true}
        popupOffset={30}
        formats={{ timeGutterFormat: "HH:mm" }}
        localizer={localizer}
        events={events}
        selectable={true}
        startAccessor="start"
        endAccessor="end"
        style={calendarStyles()}
        defaultView="week"
        views={["week", "month"]}
        onSelectEvent={(event) => {
          showEvent(event);
          setShowModal(true);
        }}
        onSelectSlot={(slot) => {
          handleSlotClick(slot);
        }}
        eventPropGetter={eventStyleGetter}
        components={{
          event: CustomEvent,
        }}
        // defaultDate={date}
        date={smallDate}
        onNavigate={(date) => {
          setDate(date);
        }}
      />
      <Modal show={showModal} onClose={() => setShowModal(false)} />
    </div>
  );
}

export default App;
4

0 回答 0