Using fullcalendar/icalendar with script tags

user_3299471 0
Viewed 1015

sorry if this is a super-basic question, but I'd like to use fullcalendar's icalendar package, using script tags.

I see that icalendar isn't on the list of pre-built bundles, but I'm hoping that it's still possible.

My problem is that I'm not sure how to import the plugins (this line 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>

For context, I use sphinx as a static site generator for various projects, all of which are hosted using GitHub pages. 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.

fullcalendar icalendar javascript
1 Answers

Finally got this to work.

  • First I had to pull the .ics file into my flask backend and serve it from a local URL to circumvent the CORS policy.
  • Then I hade to use and updated version of the AJAX iCal library you had.

This code worked for me:

<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>
user_143050960
Related