将 fullcalendar/icalendar 与脚本标签一起使用

Question

将 fullcalendar/icalendar 与脚本标签一起使用

use*_*471 5 javascript icalendar fullcalendar

抱歉，如果这是一个超级基本的问题，但我想使用 fullcalendar 的icalendar包，使用脚本标签。

我看到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>

Run Code Online (Sandbox Code Playgroud)

对于上下文，我使用sphinx作为各种项目的静态站点生成器，所有这些项目都使用 GitHub 页面托管。我编写了一个 sphinx 扩展，它从我的静态站点中的 markdown YAML 构建了一个 .ics 文件，并且我希望使用类似于此站点的 fullcalendar 在站点页面上显示日历和即将发生的事件。

Answer 1

Zaf*_*fer 6

终于让这个工作了。

首先，我必须将 .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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	4 年，11 月前
查看次数：	2179 次
最近记录：	4 年，9 月前