首页 > 解决方案 > 无法通过 CDN 识别 FullCalendar 插件

问题描述

我正在尝试在 CodePen 上运行一个简单的组件。在settings->JS中有一个部分可以通过 CDN 添加外部脚本。我添加了以下内容:

https://unpkg.com/react/umd/react.development.js
https://unpkg.com/react-dom/umd/react-dom.development.js
https://cdn.jsdelivr.net/npm/@fullcalendar/react@5.9.0/dist/main.cjs.min.js
https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@5.9.0/main.global.min.js
https://cdn.jsdelivr.net/npm/@fullcalendar/list@5.9.0/main.global.min.js

前三个没有问题 - 我可以使用反应状态和组件,并且<FullCalendar />组件被识别。但是,daygridorlist插件不起作用。控制台中出现以下错误:ReferenceError: dayGridPlugin is not defined

关于为什么 CodePen 无法从导入中识别这一点的任何想法?或者这应该如何实现?在这里查看

const { useState } = React;

function Calendar (props) {
  const [modalOpen, setModalOpen] = useState(false);

  function addEvent () {
    setModalOpen(true);
  }
  
  return (
    <FullCalendar
      plugins={[ dayGridPlugin, listPlugin ]}
      headerToolbar={{
        start: "prev,next today addEvent",
        center: "title",
        end: "dayGridMonth listWeek",
      }}
      customButtons={{
        addEvent: {
          text: "+",
          click: addEvent,
        }
      }}
      initialView="dayGridMonth"
    />
  );
}

ReactDOM.render(
  <Calendar />,
  document.getElementById('root')
);

标签: reactjspluginsfullcalendarcdncodepen

解决方案


推荐阅读