按fullcalendar.io文档更新文件后FullCalendar不显示，不清楚JS代码放在PHP文件哪个位置

问题排查与代码放置方案 #

• 第一步：先确认依赖引入正确
  你需要先在PHP文件的<head>标签内引入FullCalendar的必要资源，顺序不能错：

  <!-- 先引入FullCalendar核心CSS -->
  <link rel="stylesheet" href="你存放fullcalendar核心css的路径">
  <!-- 再引入核心JS、dayGrid插件JS等你用到的功能模块JS -->
  <script src="你存放fullcalendar核心js的路径"></script>
  <script src="你存放fullcalendar dayGrid插件js的路径"></script>
  

• 第二步：添加日历DOM容器
  在PHP文件<body>标签内你想要显示日历的位置，添加对应ID的容器：

  <!-- 建议手动给容器设置高度，避免默认高度为0导致看不见日历 -->
  <div id="calendar" style="height: 600px;width: 100%;"></div>
  

• 第三步：放置你提供的JS代码
  你这段JS代码有两种合法放置位置：
  1. 放在<body>标签的最末尾，所有DOM元素之后，用<script>标签包裹即可
  2. 放在<head>标签内，依赖引入代码的后面，用<script>标签包裹即可，你这段代码已经监听了DOMContentLoaded事件，会等页面DOM全部加载完成后再执行，不会出现找不到元素的问题

额外排查项 #

如果按上面操作还是不显示，打开浏览器开发者工具的控制台 tab，查看报错信息：

• 如果报FullCalendar is not defined，说明依赖没有正确引入，检查资源路径是否正确、引入顺序是否对
• 如果报Cannot read properties of null之类的错误，说明没找到id=calendar的DOM元素，检查容器ID是否写对、JS是否在容器加载前就执行了

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