使用带有脚本标签的 fullcalendar/icalendar

Question

对不起，如果这是一个超级基本的问题，但我想使用 fullcalendar 的icalendar package，使用脚本标签。

我看到 icalendar 不在预建捆绑列表中，但我希望它仍然是可能的。

我的问题是我不确定如何导入插件（这一行plugins: [DayGridPlugin, iCalendarPlugin], ）。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link
      href="https://cdn.jsdelivr.net/npm/fullcalendar@5.5.1/main.min.css"
      rel="stylesheet"
    />
    <link href="./style.css" rel="stylesheet" />
        <link href="./style.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ical.js/0.0.3/ical.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.5.1/main.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.5.1/locales-all.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/icalendar@5.5.1/main.global.min.js"></script>

    <script>
      document.addEventListener("DOMContentLoaded", function () {
        var calendarEl = document.getElementById("calendar");
        var today = new Date().toISOString().split("T")[0];

        var calendar = new FullCalendar.Calendar(calendarEl, {
          initialView: "dayGridMonth",
          initialDate: today,
          headerToolbar: {
            left: "prev,next today",
            center: "title",
            right: "dayGridMonth,timeGridWeek,timeGridDay",
          },
          plugins: [DayGridPlugin, iCalendarPlugin],
          events: {
            url: "https://www.gov.uk/bank-holidays/england-and-wales.ics",
            format: "ics",
          },
        });

        calendar.render();
      });
    </script>
  </head>
  <body>
    <div id="calendar"></div>
  </body>
</html>

---

对于上下文，我使用sphinx作为 static 站点生成器，用于各种项目，所有项目都使用 GitHub 页面托管。 I've written a sphinx extension which builds a.ics file from the markdown YAML in my static site, and I hope to display the calendar and upcoming events on a page of the site using fullcalendar similar to this site.

Answer 1

终于让这个工作了。

• 首先，我必须将.ics 文件拉入我的 flask 后端并从本地 URL 提供它以规避 CORS 策略。
• 然后我不得不使用和更新您拥有的 AJAX iCal 库的版本。

这段代码对我有用：

<div id='calendar' style="max-height: 80vh;"></div>

<link href="https://cdn.jsdelivr.net/npm/fullcalendar@5.5.1/main.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/ical.js/1.4.0/ical.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.5.1/main.min.js"></script>
// <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.5.1/locales-all.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/icalendar@5.5.1/main.global.min.js"></script>

<script>
document.addEventListener("DOMContentLoaded", function () {
  var calendarEl = document.getElementById("calendar");

  var calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: "dayGridMonth",
    headerToolbar: {
      left: "prev,next today",
      center: "title",
      right: "dayGridMonth,timeGridWeek,timeGridDay",
    },
    // plugins: [DayGridPlugin, iCalendarPlugin],
    events: {
      url: "/calendar/demo/ics_file",
      // url: "https://www.gov.uk/bank-holidays/england-and-wales.ics",
      format: "ics",
    },
  });

  calendar.render();
});
</script>