javascript - Använda fullcalendar/icalendar med skript-taggar

förlåt om detta är en superenkel fråga, men jag skulle vilja använda fullcalendars icalendar-paket, med script-taggar.

Jag ser att icalendar inte finns med på listan över förbyggda paket, men jag hoppas att det fortfarande är möjligt.

Mitt problem är att jag inte är säker på hur man importerar pluginsen (denna rad plugins: [DayGridPlugin, iCalendarPlugin],).

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link
      href="https://cdn.jsdelivr.net/npm/[email /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/[email /main.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email /locales-all.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/[email /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>

Som bakgrund använder jag Sphinx som en statisk webbplatsbyggare för olika projekt, som alla är hostade på GitHub Pages. Jag har skrivit en Sphinx-tillägg som bygger en .ics-fil från markdown-YAML i min statiska webbplats, och jag hoppas kunna visa kalendern och kommande händelser på en sida på webbplatsen med hjälp av FullCalendar på ett sätt liknande den här webbplatsen.

Svar #1

Fick det här att fungera till slut.

• Först var jag tvungen att dra in .ics-filen i min Flask-backend och servera den från en lokal URL för att kringgå CORS-polisen.
• Then I hade to use and updated version of the AJAX iCal library you had.

Denna kod fungerade för mig:

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

<link href="https://cdn.jsdelivr.net/npm/[email /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/[email /main.min.js"></script>
// <script src="https://cdn.jsdelivr.net/npm/[email /locales-all.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/[email /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>