动态修改FullCalendar的slotDuration：滑块拖动后视图未更新问题

问题 #

拖动1-1440分钟范围的滑块时，已更新slotDuration变量，但FullCalendar视图未同步更新。

核心原因 #

FullCalendar初始化后不会自动监听外部变量变化，必须通过官方提供的setOption()方法修改配置，再调用render()重新渲染才能生效。此外原代码中calendar实例作用域局限在DOM加载回调内，外部无法访问。

修改方案 #

1. 将calendar变量提升到全局作用域，让滑块事件能访问到实例
2. 滑块值变化时，用calendar.setOption()修改slotDuration配置
3. 调用calendar.render()重新渲染日历
4. 修正变量名拼写错误（slotduartion → slotDuration）
5. 移除重复引入的jQuery库，避免版本冲突
6. 优化滑块值格式化逻辑，生成符合FullCalendar要求的HH:mm:ss格式

修改后的完整代码 #

HTML #

<head>
     <meta charset='utf-8' />
<script src='https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@6.1.9/index.global.min.js'></script>
<script src="http://momentjs.com/downloads/moment-with-locales.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>
<body>
    <div class="slidecontainer">
        <h3 id="displayValue">
            <span id="hours">小时</span> :
            <span id="minutes">分钟</span>
            <span id="seconds" style="display:none;">秒</span>
        </h3>
        <input type="range" min="1" max="1440" value="500" class="slider" id="myRange">
    </div>
    <br />
    <div id='calendar'></div>
</body>

CSS #

a {
    color: var(--bs-link-color);
    text-decoration: none;
}

#storlekslider {
    width: 30%;
}

JavaScript #

var datetime = moment().format('YYYY-MM-DDTHH:mm:ss');
let today = new Date().toISOString().slice(0, 10);
var slotDuration = '';
var calendar; // 全局声明calendar实例

document.addEventListener('DOMContentLoaded', function () {
    var calendarEl = document.getElementById('calendar');
    calendar = new FullCalendar.Calendar(calendarEl, {
        timeZone: 'UTC',
        slotMinTime: '06:00',
        slotMaxTime: '19:00',
        slotDuration: slotDuration || '00:30:00', // 设置默认时间间隔
        initialView: 'resourceTimelineWeek',
        schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
        height: 650,
        headerToolbar: {
            left: 'prev,next',
            center: 'title',
            right: 'resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth'
        },
        slotLabelFormat: { hour: 'numeric', minute: '2-digit', hour12: false },
        allDay: false,
        editable: true,
        resourceAreaHeaderContent: 'Manager',
        initialDate: today,
        businessHours: [
            {
                daysOfWeek: [0, 1, 2, 3, 4, 5, 6],
                startTime: '07:00',
                endTime: '18:00'
            }
        ],
        resourceAreaWidth: '15%',
        resources: [
            { id: 'a', title: 'Employee 1' },
            { id: 'b', title: 'Employee 2' },
            { id: 'c', title: 'Employee 3' },
            { id: 'd', title: 'Employee 4' }
        ],
        events: [
            { title: 'Event 1', start: today + 'T07:30:00', end: today + 'T12:00:00', resourceId: 'a' },
            { title: 'Event 2', start: today + 'T09:30:00', end: today + 'T14:00:00', resourceId: 'b' },
            { title: 'Event 3', start: today + 'T08:30:00', end: today + 'T12:00:00', resourceId: 'c' },
            { title: 'Event 4', start: today + 'T10:30:00', end: today + 'T14:00:00', resourceId: 'd' }
        ]
    });
    calendar.render();
});

// 滑块值格式化与显示更新函数
var slider = document.getElementById("myRange");
var hourOutput = $("#hours")[0];
var minuteOutput = $("#minutes")[0];
var secondOutput = $("#seconds")[0];

function updateSliderDisplay(value) {
    var hours = Math.floor(value / 60);
    var minutes = value % 60;
    // 滑块为分钟数，秒数固定为0
    hourOutput.innerHTML = hours;
    minuteOutput.innerHTML = minutes;
    secondOutput.innerHTML = '00';
    // 生成HH:mm:ss格式的字符串
    return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:00`;
}

// 初始化滑块显示与日历配置
slotDuration = updateSliderDisplay(slider.value);
if (calendar) {
    calendar.setOption('slotDuration', slotDuration);
    calendar.render();
}

// 滑块实时更新事件
$('.slider').on('input change', function () {
    slotDuration = updateSliderDisplay(this.value);
    // 修改日历配置并重新渲染
    calendar.setOption('slotDuration', slotDuration);
    calendar.render();
});

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