时间戳

首页 > 解决方案 > 将 Google Calendar/fullcalendar.io 集成到 Squarespace 的页面中

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

问题描述

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

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

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

标签： javascripthtmlcsssquarespace

解决方案

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

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

在此处输入图像描述

这些外部库需要在您的自定义代码之前加载。因此，您可以在<script>加载 JQuery 的地方添加：

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

请参阅此 Codepen以获取修改后的示例，其中外部库作为 HTML 的一部分可见加载。

然后，确保将 JavaScript（包括script上面提到的元素）放在页脚代码注入中，而不是页眉中。

这至少会加载东西。

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

推荐阅读