FullCalendar与示例效果不符：无头部按钮、无法拖拽等问题求助

嗨，我帮你梳理下你遇到的这几个问题，大概率是这几个关键环节没处理到位，咱们一步步来解决：

1. 拖拽失效的核心原因：缺失jQuery UI依赖 #

FullCalendar 3.x版本的可拖拽（editable: true）功能是依赖jQuery UI的sortable、draggable组件实现的，你当前的代码里完全没引入jQuery UI，这直接导致事件没法拖拽。

2. 资源加载顺序与位置不规范 #

你的CSS和JS资源放置位置有点问题：<link>样式标签应该放在HTML的<head>区域，这样页面加载时就能先渲染样式；JS脚本建议放在<body>末尾，确保DOM元素（比如你的#calendar容器）加载完成后再初始化FullCalendar，避免找不到元素导致功能异常。

3. 打印样式影响正常显示 #

你引入的fullcalendar.print.min.css没有添加media="print"属性，它会默认在屏幕显示时也生效，干扰了正常的日历样式，这也是样式和示例不一致的原因之一。

修正后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>FullCalendar Demo</title>
    <!-- 核心日历样式 -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.0/fullcalendar.min.css" rel="stylesheet"/>
    <!-- 打印样式仅在打印场景生效 -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.0/fullcalendar.print.min.css" rel="stylesheet" media="print"/>
</head>
<body>
    <div id="calendar"></div>

    <!-- 严格按照依赖顺序加载脚本 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
    <!-- 新增jQuery UI，解决拖拽问题 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.0/fullcalendar.min.js"></script>

    <script>
        $(function() {
            $('#calendar').fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,basicWeek,basicDay'
                },
                defaultDate: '2018-01-12',
                navLinks: true,
                editable: true,
                eventLimit: true,
                events: [
                    { title: 'All Day Event', start: '2018-01-01' },
                    { id: 999, title: 'Repeating Event', start: '2018-01-09T16:00:00' },
                    { id: 999, title: 'Repeating Event', start: '2018-01-16T16:00:00' },
                    { title: 'Conference', start: '2018-01-11', end: '2018-01-13' },
                    { title: 'Meeting', start: '2018-01-12T10:30:00', end: '2018-01-12T12:30:00' },
                    { title: 'Lunch', start: '2018-01-12T12:00:00' },
                    { title: 'Meeting', start: '2018-01-12T14:30:00' },
                    { title: 'Dinner', start: '2018-01-12T20:00:00' },
                    { title: 'Click for Google', url: 'http://google.com/', start: '2018-01-28' }
                ]
            });
        });
    </script>
</body>
</html>

关键修复点总结 #

• 补全jQuery UI：新增jquery-ui.min.js，这是拖拽功能生效的必要条件；
• 调整资源位置：把CSS放在<head>确保样式优先加载，JS放在<body>末尾避免DOM未就绪的问题；
• 修正打印样式：给打印样式添加media="print"，让它只在打印时生效，不干扰正常显示；
• 严格依赖顺序：必须按照jQuery → Moment → jQuery UI → FullCalendar的顺序加载脚本，FullCalendar需要依赖前三者才能正常初始化所有功能。

你可以直接用上面的代码测试，应该能解决头部按钮不显示、样式异常和拖拽失效的问题啦！

内容的提问来源于stack exchange，提问作者Lin Fan-Chiang