如何在PHP/HTML页面引入JS？示例无法运行求助

作为编程新手遇到这种情况很正常，咱们一步步排查问题：

1. 你可能缺少FullCalendar的核心资源 #

那个示例用到的是FullCalendar日历插件，但你的页面只引入了jQuery，没加载FullCalendar的CSS和JS文件——这是最常见的问题！

你需要在页面头部补充这些必要资源（注意版本要和示例匹配，旧版FullCalendar还依赖moment.js）：

<!-- FullCalendar 样式文件 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.css">
<!-- Moment.js（旧版FullCalendar的依赖库） -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
<!-- FullCalendar 核心JS文件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.js"></script>

2. 确保你的my.js代码完整且规范 #

打开/js/my.js文件，确认里面完整复制了示例中的JavaScript代码，并且包裹在DOM就绪事件里（保证页面元素加载完成后再执行日历初始化）：

$(document).ready(function() {
    $('#fullcalendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        // 这里粘贴原示例中的事件数据和其他配置
        events: [
            {
                title: '示例事件1',
                start: '2024-05-01'
            },
            {
                title: '示例事件2',
                start: '2024-05-10',
                end: '2024-05-12'
            }
        ]
    });
});

3. 检查文件路径是否正确 #

打开浏览器的开发者工具（按F12），切换到「网络」标签页后刷新页面：

• 如果/js/my.js显示404错误，说明路径不对：比如你的PHP页面不在网站根目录，就把路径改成相对路径（比如js/my.js去掉前面的斜杠）
• 如果FullCalendar的资源显示404，换个同版本的CDN链接即可

4. 完整的页面参考示例 #

把这些内容整合后，你的PHP页面应该是这样的：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>我的日历页面</title>
    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <!-- FullCalendar 依赖资源 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.js"></script>
    <!-- 自定义JS文件 -->
    <script src="/js/my.js"></script>
</head>
<body>
    <div id="fullcalendar"></div>
</body>
</html>

按照上面的步骤调整后，应该就能正常显示日历了。如果还是有问题，打开开发者工具的「控制台」标签页，把报错信息贴出来，我可以帮你进一步排查~

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