Javascript 如何向FullCalendar事件添加关闭按钮？

我正在学习如何在FullCalendar中为动态创建的可选事件添加关闭按钮。我发现了一个演示，它使用eventRender回调在创建可选事件时向其附加一个关闭按钮。但是，我不明白为什么在这个回调中的“event.\u id”中添加了下划线“\u”。有必要用下划线吗？有人能解释一下这个概念吗？这是我指的演示。谢谢

HTML

---

我的理解是，

。\u id

表示将事件添加到日历时，fullCalendar生成的内部唯一id。所以，当你想删除它时，你会用它来识别它。只是一个猜测，但我假设这个惯例在某个时候被继承了。那是我见过的唯一一个用这个的地方。Mongo在JS社区中非常普遍。在Mongo中，这是用来访问其名为的版本的。所以你们都认为eventRender回调在“event.\u id”中没有下划线的情况下可以工作吗？不，我根本没说。我刚刚告诉过你id字段代表什么。如果您自己在传递给fullCalendar的事件数据中显式设置了一个

id

字段，那么它可能只在没有下划线的情况下工作。但我可能错了…为什么不试试看呢？

<div id='calendar'></div>

    $(document).ready(function() {
  $("#calendar").fullCalendar({
    header: {
      left: "prev,next today",
      center: "title",
      right: "month,agendaWeek,agendaDay"
    },
    defaultView: "month",
    navLinks: true, // can click day/week names to navigate views
    selectable: true,
    selectHelper: false,
    editable: true,
    eventLimit: true, // allow "more" link when too many events

    select: function(start, end) {
      var title = prompt("Event Content:");
      var eventData;
      if (title) {
        eventData = {
          title: title,
          start: start,
          end: end
        };
        $("#calendar").fullCalendar("renderEvent", eventData, true); // stick? = true
      }
      $("#calendar").fullCalendar("unselect");
    },

    eventRender: function(event, element) {
      element
        .find(".fc-content")
        .prepend("<span class='closeon material-icons'>&#xe5cd;</span>");
      element.find(".closeon").on("click", function() {
        $("#calendar").fullCalendar("removeEvents", event._id);
      });
    },

    eventClick: function(calEvent, jsEvent) {
      var title = prompt("Edit Event Content:", calEvent.title);
      calEvent.title = title;
      $("#calendar").fullCalendar("updateEvent", calEvent);
    }
  });
});

    body {
  margin: 40px 10px;
  padding: 0;
  font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
  font-size: 14px;
}

#calendar {
  max-width: 900px;
  margin: 0 auto;
}

#wrap {
  width: 1100px;
  margin: 0 auto;
}

.closeon {
  border-radius: 5px;
}

/*info btn*/
.dropbtn {
    /*background-color: #4CAF50;*/
    background-color: #eee;
    margin: 10px;
    padding: 8px 16px 8px 16px;
    font-size: 16px;
    border: none;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  margin-left: 100px;
  margin-top: -200px;
}

.dropdown-content p {
    color: black;
    padding: 4px 4px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: grey;}

.dropdown:hover .dropbtn span {color: white}