将 Google Calendar/fullcalendar.io 集成到 Squarespace 上的页面中

编程问答 2022-05-14

问题描述

我的小组还没有发布网站，所以我们仍在编辑模式下工作，我们正在尝试集成 fullcalendar。我们引用 this 来这样做。到目前为止，我们所做的是转到页面设置>高级并在此代码中添加到头部：

<style> 
  html,body {
    margin: 0;
    padding: 0;
    font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
    font-size: 14px;
  }

  #calendar {
    max-width: 900px;
    margin: 40px auto;
  }
</style>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
  document.addEventListener('DOMContentLoaded',function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl,{
    plugins: [ 'dayGrid','list','googleCalendar' ],header: {
      left: 'prev,next today',center: 'title',right: 'dayGridMonth,listYear'
    },displayEventTime: false,// don't show the time column in list view

    // To make your own Google Api key,follow the directions here:
    // http://fullcalendar.io/docs/google_calendar/
    googleCalendarapiKey: 'AIzaSyDcnW6WejpTOCffshGDDb4neIrXVUA1EAE',// US Holidays
    events: 'en.usa#holiday@group.v.calendar.google.com',eventClick: function(arg) {

      // opens events in a popup window
      window.open(arg.event.url,'_blank','width=700,height=600');

      // prevents current tab from navigating
      arg.jsEvent.preventDefault();
    }

  });

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

然后，我们回去编辑页面，添加一个代码块，选择html，输入这个html：

<div id='calendar'></div>

但没有任何显示。我们做错了什么吗？

解决方法

查看您设置的页面，您没有加载必要的外部库是正确的。所以这是第一步。

要查看正在使用的外部库，您可以转到 Codepen 中的设置。看这里：

enter image description here

这些外部库需要在之前加载您的自定义代码。因此，在您拥有用于加载 JQuery 的 // don't do this const oops = dynamicKeys( Math.random() < 0.5 ? "one" : "two",Math.random() < 0.5 ? "three" : "four" ); /* const oops: { one: {}; two: {}; three: []; four: []; } */ try { console.log(oops.three.length + oops.four.length); } catch (e) { console.log(e); // oops.three is undefined (or maybe oops.four is undefined) } 的地方，您需要添加：

<script>

有关修改后的示例，请参阅 this Codepen，其中外部库作为 HTML 的一部分明显加载。

然后，确保您将 JavaScript（包括上面提到的 <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/core@4.0.2/main.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@4.0.1/main.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/list@4.0.1/main.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/google-calendar@4.0.1/main.min.js"></script> 元素）放在页脚代码注入中，而不是页眉中。

那至少可以加载东西。

顺便说一句，编写的代码似乎不需要 JQuery，尽管您网站上的其他一些代码可能需要。

htmljavascriptsquarespace