如何为FullCalendar自定义按钮添加跳转至指定日期功能？

嘿，我来帮你完善这个跳转日期的功能！其实FullCalendar本身就提供了专门的方法来实现日期跳转，咱们只需要在自定义按钮的click事件里补充逻辑就行，下面给你两种可行的方案：

方案一：使用原生弹窗获取日期（简单快捷） #

这是最基础的实现方式，用prompt让用户输入日期，然后验证格式并跳转：

$('#calendar').fullCalendar({ 
    header: { 
        left: 'prev,next today', 
        center: 'title', 
        right: 'month,basicWeek,basicDay, myCustomButton' 
    }, 
    customButtons: { 
        myCustomButton: { 
            text: '跳转至指定日期！', 
            click: function() { 
                // 弹出输入框，提示用户按指定格式输入
                const targetDateStr = prompt('请输入要跳转的日期（格式：YYYY-MM-DD）：');
                if (targetDateStr) {
                    // 将输入的字符串转为Date对象
                    const targetDate = new Date(targetDateStr);
                    // 验证日期是否有效
                    if (!isNaN(targetDate.getTime())) {
                        // 调用FullCalendar的gotoDate方法完成跳转
                        $('#calendar').fullCalendar('gotoDate', targetDate);
                    } else {
                        alert('输入的日期格式无效，请重新输入！');
                    }
                }
            } 
        } 
    }
});

关键细节说明： #

• prompt弹窗可以快速获取用户输入，同时明确提示日期格式（YYYY-MM-DD是Date对象能直接解析的标准格式）
• 用isNaN(targetDate.getTime())判断日期是否有效——无效日期的getTime()会返回NaN
• FullCalendar的gotoDate方法是核心，传入合法的Date对象就能让日历直接跳转到目标日期

方案二：使用日期选择器（更友好的交互） #

如果想避免用户输入错误格式的问题，可以用专门的日期选择组件（比如jQuery UI Datepicker），交互体验更好：

$('#calendar').fullCalendar({ 
    header: { 
        left: 'prev,next today', 
        center: 'title', 
        right: 'month,basicWeek,basicDay, myCustomButton' 
    }, 
    customButtons: { 
        myCustomButton: { 
            text: '跳转至指定日期！', 
            click: function() { 
                // 创建临时输入框用于触发日期选择器
                const $tempDateInput = $('<input type="text" id="temp-date-picker">').appendTo('body');
                
                // 初始化jQuery UI Datepicker
                $tempDateInput.datepicker({
                    dateFormat: 'yy-mm-dd', // 设置日期格式
                    onSelect: function(selectedDate) {
                        // 选择日期后跳转
                        $('#calendar').fullCalendar('gotoDate', new Date(selectedDate));
                        $tempDateInput.remove(); // 移除临时输入框
                    },
                    onClose: function() {
                        $tempDateInput.remove(); // 关闭选择器后清理临时元素
                    }
                }).focus(); // 自动弹出日期选择器
            } 
        } 
    }
});

注意事项： #

• 使用这个方案需要先引入jQuery UI的样式文件和脚本文件（如果项目里还没加的话）
• 临时创建的输入框在选择完成或关闭选择器后会自动移除，不会污染DOM

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