使用 react-big-calendar 将数据保存在 localStorage

Question

I'm implementing react-big-calendar in my toy project, and I want the events in the calendar to stay even after refreshing the page. I was planning to save the events in localStorage and then retrieve them back. However, even after saving the events in localStorage, all the events are gone after page is rendered.

export default function Calendar() {
  const localizer = momentLocalizer(moment);

  const [events, setEvents] = useState<any[]>([]);

  const handleSelectSlot = useCallback(
    ({ start, end }) => {
      const title = window.prompt("create an event");
      if (title) {
        setEvents((prev) => [...prev, { start, end, title }]);
      }
    },
    [setEvents]
  );

  useEffect(() => {
    localStorage.setItem("events", JSON.stringify(events));
  }, [events]);

  useEffect(() => {
    if (events.length) {
      localStorage.getItem("events" || "[]");
    }
  }, []);

  const onClickRemoveEvent = (event: any) => {
    const newEvents = events.filter((el) => el.start !== event.start);
    setEvents([...newEvents, events]);
  };

  const { defaultDate, scrollToTime } = useMemo(
    () => ({
      defaultDate: new Date(),
      scrollToTime: new Date(2000, 1, 1, 6),
    }),
    []
  );

  const eventStyleGetter = (event: any) => {
    console.log("eventGetter:", event.hexColor);
    // const backgroundColor = "#" + event.hexColor;
    const style = {
      backgroundColor: "beige",
      borderRadius: "0px",
      opacity: 0.8,
      color: "black",
      border: "0px",
      display: "block",
    };
    return {
      style,
    };
  };

  return (
    <>
      <S.Wrapper>
        <S.ScheduleCalendar
          localizer={localizer}
          events={events}
          selectable={true}
          views={["month", "week", "day"]}
          defaultDate={defaultDate}
          onSelectSlot={handleSelectSlot}
          onSelectEvent={onClickRemoveEvent}
          scrollToTime={scrollToTime}
          eventPropGetter={eventStyleGetter}
        />
      </S.Wrapper>
    </>
  );
}

Is there a way I could save the events data?

Answer 1

You can store and retrieve events data in localStorage , but...

You have to remember that localStorage does not preserve data types, meaning you must manually convert all event start and end dates back to JS Date objects prior to putting them in your events prop. See Big Calendar's documentation on Understanding Dates