javascript - Using fullcalendaricalendar with script tags - Stack Overflow

admin2025-04-20 0

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="/[email protected]/main.min.css"
      rel="stylesheet"
    />
    <link href="./style.css" rel="stylesheet" />
        <link href="./style.css" rel="stylesheet" />
    <script src=".js/0.0.3/ical.js"></script>
    <script src="/[email protected]/main.min.js"></script>
    <script src="/[email protected]/locales-all.min.js"></script>
    <script src="/@fullcalendar/[email protected]/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: ".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 uping events on a page of the site using fullcalendar similar to this site.

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/npm/[email protected]/main.min.css"
      rel="stylesheet"
    />
    <link href="./style.css" rel="stylesheet" />
        <link href="./style.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare./ajax/libs/ical.js/0.0.3/ical.js"></script>
    <script src="https://cdn.jsdelivr/npm/[email protected]/main.min.js"></script>
    <script src="https://cdn.jsdelivr/npm/[email protected]/locales-all.min.js"></script>
    <script src="https://cdn.jsdelivr/npm/@fullcalendar/[email protected]/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>

Share Improve this question asked Mar 25, 2021 at 14:41 user3299471 611 silver badge2 bronze badges

1 If you're including via script tags then AFAIK there's no need to use the plugins option at all. Just include the files and you're good to go. – ADyson Commented Mar 25, 2021 at 14:44
Ooh, thank you that did help! (New error messages now!) – user3299471 Commented Mar 25, 2021 at 16:07
No worries. Do you need help with those? Another minor thing: initialDate: today is redundant - the default value for initialDate is already today's date - fullcalendar.io/docs/initialDate – ADyson Commented Mar 25, 2021 at 16:11

Add a ment |

1 Answer 1

Sorted by: Reset to default 7

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/npm/[email protected]/main.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare./ajax/libs/ical.js/1.4.0/ical.min.js"></script>
<script src="https://cdn.jsdelivr/npm/[email protected]/main.min.js"></script>
// <script src="https://cdn.jsdelivr/npm/[email protected]/locales-all.min.js"></script>
<script src="https://cdn.jsdelivr/npm/@fullcalendar/[email protected]/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>

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1745125854a286420.html

javascriptUsing fullcalendaricalendar with script tagsStack Overflow

最新回复(0)