javascript - 多个完整日历的完整日历按钮事件

Question

我对我现在正在使用的 Fullcalendar 有疑问。所以我现在正在做的是使用 foreach 创建多个 Fullcalendar。例如，如果循环执行 3 次，就会有 3 个 fullcalendar 对吗？他们每个人都有上一个和下一个按钮。我想要一个事件，该事件将根据我单击的完整日历触发，以便我可以调用 api 调用来为每个完整日历显示不同的事件。当它发生时，我也给了每个完整的日历唯一ID。

例子：

• FULLCALENDAR -> 下一个/上一个
• FULLCALENDAR1 -> NEXT/PREV <-- 单击此 Next 或 prev 按钮将调用和事件使用函数，因此我可以获得日期并传递给我的 api 调用以返回 json 数据并重新呈现此日历
• FULLCALENDAR2 -> 下一个/上一个

我将在下面发布我的代码。从下面的代码可以看出。我正在使用名为“calendarSize”的类名创建具有自己唯一 ID 的 div 标签，并将 unqiue id 传递给名为“createBiWeeklyCalendar”的函数并呈现该日历。

function createBiweeklyCalendar(a) {
  var calendarEl = document.getElementById(a);
  var calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: "dayGridWeek",
   
  });
  calendar.render();
}

function createLocation(data) {
  data.features.forEach(function (store, i) {
    if (i <= 2) {
      let prop = store.properties;

      let listings = document.getElementById("listings");
      let listing = listings.appendChild(document.createElement("div"));
      listing.id = "listing-" + prop.id;
      listing.className = "item";

      let details = listing.appendChild(document.createElement("div"));
      let roundedDistance = Math.round(prop.distance * 100) / 100;
      details.innerHTML =
        "<strong>Distance:</strong> " + roundedDistance + " miles ";
      details.innerHTML += "<br/> <strong>Address:</strong> " + prop.address;

      let link = listing.appendChild(document.createElement("div"));
      link.className = "fieldOffice";
      link.innerHTML = "<strong>Field Office:</strong> " + prop.name;
      link.innerHTML +=
        "<br/><button onClick='callToModal(\"" +
        prop.code +
        "\");return false;' class='btn mini red-stripe' role='button'>Notes</button>";
      link.innerHTML +=
        '<div id="' + prop.code + '" class="calendarSize")></div>';
      createBiweeklyCalendar(prop.code);
    }
  });
}

标签： javascripthtmlcssapifullcalendar