WordPress中FullCalendar无法选择预订日期问题求助

问题根源 #

你的代码里有两个核心问题导致没法选择日期：

• 重复加载FullCalendar脚本：页面先后加载了CDN版的FullCalendar和本地路径的fullcalendar/dist/index.global.js，后者在WordPress环境里大概率路径不对，而且重复加载会引发脚本冲突，直接搞崩选择功能。
• 缺少年份范围选择的必要配置：只设selectable: true不够，得加专门的参数和事件监听才能实现范围选择。

修复后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prenotazione</title>
    <!-- 要是没用到jQuery UI的datepicker，可以直接删掉下面这两行，减少冲突 -->
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <!-- 只保留CDN版的FullCalendar，避免重复加载 -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/6.1.9/main.min.css" rel="stylesheet">
    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.9/index.global.min.js'></script>
    <!-- Chosen样式路径没问题的话保留 -->
    <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/chosen.min.css">

    <script>
        var stripePublicKey = 'pk_test_*************************************************';
    </script>

    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
        }
        .calendar-container {
            max-width: 600px;
            margin: 20px auto;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 5px;
            padding: 20px; /* 加内边距，别让内容贴容器 */
        }
        #calendar {
            margin-bottom: 20px; /* 日历和表单留点间距 */
        }
        label {
            display: block;
            margin-top: 10px;
        }
        input {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
        }
        button {
            margin-top: 15px;
            padding: 10px 20px;
            background-color: #0073aa;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #006799;
        }
    </style>
</head>
<body>
    <div class="calendar-container">
        <h2>Prenotazione</h2>
        <div id="calendar"></div>

        <label for="num-people">Numero di Persone (4 massimo):</label>
        <input type="number" id="num-people" min="1" max="4">

        <label for="name">Nome:</label>
        <input type="text" id="name">

        <label for="email">Email:</label>
        <input type="email" id="email">

        <label for="phone">Telefono:</label>
        <input type="tel" id="phone">
        
        <p>Prezzo Totale: <span id="total-price"></span>€</p>
        <div id="price-display"></div>

        <button id="prenota-button">Prenota e scopri il prezzo</button>
        
        <label for="card-element">
            Stripe Carta di Credito o Debito
        </label>
        <div id="card-element"></div>

        <div id="card-errors" role="alert"></div>

        <button id="submit">Paga ora</button>

        <div id="confirmation-message" style="display: none;">
            <h2>Grazie per la tua prenotazione!</h2>
            <p>Riceverai un'email di conferma a breve.</p>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var calendarEl = document.getElementById('calendar');
            // 存选中的日期范围，后面预订要用
            var selectedStart = null;
            var selectedEnd = null;

            var calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'dayGridMonth',
                selectable: true,
                selectMirror: true, // 显示选择的镜像效果，用户能看到选了啥
                selectOverlap: false, // 不让选已经被预订的日期（如果有事件的话）
                unselectAuto: false, // 点日历外面不会取消选择，方便用户调整范围
                // 选中日期时触发
                select: function(info) {
                    selectedStart = info.startStr;
                    selectedEnd = info.endStr;
                    console.log('选中的范围:', selectedStart, '到', selectedEnd);
                    // 这里可以加逻辑，比如算天数、更新总价
                },
                // 取消选择时清空变量
                unselect: function() {
                    selectedStart = null;
                    selectedEnd = null;
                }
            });
            calendar.render();
        });
    </script>
</body>
</html>

重点修复说明 #

• 删掉重复的FullCalendar脚本：把本地路径的那行script删了，只留CDN的，避免冲突和404错误。
• 加范围选择配置：新增了selectMirror、selectOverlap这些参数，还加了select事件来捕获选中的日期范围，存到变量里供后续预订逻辑用。
• 优化样式：给容器加了内边距，调整了表单元素的布局，用户体验更好。
• 可选优化：如果没用到jQuery UI的datepicker，直接删掉相关的CSS和JS，减少不必要的冲突。

额外建议 #

• 在WordPress里，最好把自定义脚本和样式通过functions.php用wp_enqueue_script和wp_enqueue_style加载，别直接写在模板里，符合WordPress的规范，也方便维护。
• 可以在select事件里加计算逻辑，比如根据选中的天数和人数算总价，实时更新页面上的价格。
• 测试的时候打开浏览器控制台（F12），看看有没有脚本错误，能快速定位问题。

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