Javascript FullCalendar Dragable JS如何在重新加载/刷新时持久化日历

因此，在过去的几天里，我一直在努力使我的完整日历在重新加载/刷新页面时保持不变。我可以使日历右侧的可拖动事件保持不变，但不能在日历本身上

我有以下代码：

let draggableEl = document.getElementById("external-events");

        new Draggable(draggableEl, {
          itemSelector: ".fc-event",
          eventData: function(eventEl) {
              let title = eventEl.getAttribute("title");
              let id = eventEl.getAttribute("data");
              let ranking = eventEl.getAttribute("ranking");
              let rating = eventEl.getAttribute("rating");
              let thumbnail = eventEl.getAttribute("thumbnail")
              let photo = eventEl.getAttribute("photo")
              let price = eventEl.getAttribute('price')
              let address = eventEl.getAttribute('address')
              return {
                title: title,
                ranking: ranking,
                rating: rating,
                id: id,
                thumbnail: thumbnail,
                photo: photo,
                price: price,
                address: address
              };
          }
        });

我的渲染方法：

 render() {
    return (
      <div className="animated fadeIn p-4 demo-app">
        <Row>
          <Col lg={8} sm={8} md={8} style={{paddingLeft: "100px"}}>
            <div className="demo-app-calendar" id="mycalendartest">
              <FullCalendar
                defaultView="dayGridMonth"
                validRange= {{
                  start: this.props.startDate,
                  end: this.props.endDate
                }}
                header={{
                  left: "prev,next today",
                  center: "title",
                  right: "dayGridMonth,timeGridWeek,timeGridDay,listWeek"
                }}
                rerenderDelay={10}
                eventDurationEditable={true}
                editable={true}
                droppable={true}
                plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
                ref={this.calendarComponentRef}
                weekends={this.state.calendarWeekends}
                events={this.state.calendarEvents}
                eventDrop={this.drop}
                // drop={this.drop}
                eventReceive={this.eventReceive}
                eventClick={this.eventClick}
                // selectable={true}
              />
            </div>
          </Col>

          <Col lg={3} sm={3} md={3}>
            <div
              id="external-events"
              className="external-eve"
            >
              <p align="center">
                <strong style={{fontSize: "22px", paddingRight: "20px"}}>Drag Your Preferences!</strong>
                <AddToPhotosIcon className="plusbtn" onClick={() => this.addPersonalisedEvent()}>+</AddToPhotosIcon>
                <GetAppIcon className="downloadbtn" onClick={() => this.downloadImage()}>Download Itinerary</GetAppIcon>
                <FacebookShareButton url={localStorage.getItem('myUrl')}>
                  <FacebookIcon size={26} round={true} />
                </FacebookShareButton>
              </p>
              {this.state.events.map(event => (
                <div
                  className="fc-event"
                  title={event.title}
                  ranking={event.ranking}
                  rating={event.rating}
                  thumbnail={event.thumbnail}
                  photo={event.photo}
                  price={event.price}
                  address={event.address}
                  data={event.id}
                  key={event.id}
                  style={{
                      padding: "7px",
                      margin: "10px",
                      backgroundColor: "rgb(253, 192, 80)",
                      border: "2px solid orange",
                      color: "#555",
                      fontWeight: "bold"
                  }}
                >
                  <img src={event.thumbnail} alt="feature" height="40px" width="40px" style={{borderRadius: "30px", margin: "8px"}} />
                  {event.title}
                </div>
              ))}
            </div>
          </Col>
        </Row>
      </div>
    );
  }
}

render（）{
返回(

拖动您的首选项！
this.addPersonalisedEvent（）}>+
this.downloadImage（）}>下载行程

{this.state.events.map（event=>(
{event.title}
))}
);
}
}

---

如果我能在刷新页面时，将事件拖到日历上，使其保持在相同的位置/日期/日期，我将不胜感激。

除非您说事件在服务器中，否则唯一的方法就是将其存储在客户端。通过本地存储或。如果你愿意创建一个我会尽力帮助的。