FullCalendar无法显示求助：引入@json($events)后日历消失

核心原因 #

当你添加var booking = @json($events);或JSON.parse('@json($events)')时，JS代码出现语法错误，导致后续的日历初始化代码被中断执行，所以日历无法显示。注释掉这行后，JS正常执行，日历就能正常渲染。

排查与解决步骤 #

1. 先查看浏览器控制台的报错 #

按F12打开开发者工具，切换到Console标签，刷新页面，查看是否有语法错误或其他JS报错。这是定位问题的核心依据。

2. 修正@json的使用方式 #

不要用JSON.parse('@json($events)')，因为@json已经会输出合法的JSON格式，直接赋值给变量即可：

var events = @json($events);

注：如果$events是Laravel后端的集合/数组，@json会自动转成合法的JS对象/数组，不需要额外解析。

3. 检查后端$events的格式是否合规 #

FullCalendar的事件数组每个元素需要包含至少title和start字段（例如{title: "测试预约", start: "2024-05-20"}）。如果后端返回的$events格式不符合要求，即使变量赋值成功，也可能导致日历异常，但你的情况是日历直接不显示，优先级更高的排查点还是JS语法错误。

4. 修复可能的转义问题 #

如果@json($events)输出的内容里包含单引号，使用JSON.parse('...')会导致字符串提前闭合，比如：

// 错误示例：@json输出的JSON里有单引号，破坏了外层单引号结构
JSON.parse('[{"title":"John's Booking", "start":"2024-05-20"}]')

这种情况直接用var events = @json($events);就能避免，因为@json会自动转义双引号，输出合法的JS对象。

修正后的完整代码示例 #

$(document).ready(function() {
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    
    // 直接赋值，无需JSON.parse
    var booking = @json($events);
    
    $('#calendar').fullCalendar({
        header: {
            left: 'prev, next today',
            center: 'title',
            right: 'month, agendaWeek, agendaDay'
        },
        // 如果需要渲染事件，将变量传入events选项
        events: booking
    });
});

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