CodePen通过CDN引入FullCalendar的daygrid等插件无法识别如何解决

问题原因 #

• 你引入的@fullcalendar/daygrid和@fullcalendar/list的全局版本CDN资源，不会直接将dayGridPlugin、listPlugin作为顶层全局变量注入，而是分别暴露为FullCalendarDayGrid和FullCalendarList两个全局变量，代码中直接调用未声明的dayGridPlugin自然会触发引用错误。
• 你引入的@fullcalendar/react全局版本已经将<FullCalendar />组件挂载为全局变量，所以组件本身可以正常识别。

正确实现方式 #

仅需要修改代码中plugins数组传入的插件变量名即可，修改后的完整代码如下：

const { useState } = React;

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

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

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

内容的提问来源于stack exchange，提问作者isoaxe