JSON 数据未显示在 FullCalendar 中

Question

我是 Laravel 的新手，在 YouTube 和 Stack Overflow 上编码和学习。感谢所有帮助我理解错误的 Stack Overflow 成员。

现在我正在尝试在 FullCalendar 中显示数据，我从控制器获取数据下面是代码

控制器

$totalbuffalomilkforcalendar = Buffalomilkrecord::select(
        DB::raw('SUM(totalmilk) as "Buffalo", (date) as start')
    )
    ->groupBy('start')
    ->orderBy('start', 'asc')
    ->get();
        
$events = [];
                    
foreach ($totalbuffalomilkforcalendar as $values) {
    $start_time_format = $values->start;
    $end_time_format = $values->start;
    $event = [];
    $event['title'] = $values->Buffalo;
    $event['start'] = $start_time_format;
    $event['end'] = $end_time_format;
    $events[] = $event;
}

通过这个我正在尝试获取事件。

Blade 查看日历

var date = new Date()
var d    = date.getDate(),
    m    = date.getMonth(),
    y    = date.getFullYear()

var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridMonth',
    headerToolbar: {
        left: 'prev,next today',
        center: 'title',
        left: 'dayGridMonth'
    },
    eventSources:   [{
        color: 'red',   
        textColor: '#ffffff',
        events: [JSON.parse('{!! json_encode($events) !!}')],
    }]   
});

calendar.render();

正在显示日历，但没有事件显示...如果我检查页面源数据是否显示

events: [JSON.parse('[{"title":"7.90","start":"2022-01-01","end":"2022-01-01"},{"title":"8.00","start":"2022-01-09","end":"2022-01-09"},{"title":"8.20","start":"2022-01-10","end":"2022-01-10"},{"title":"22.90","start":"2022-01-16","end":"2022-01-16"},{"title":"24.35","start":"2022-02-17","end":"2022-02-17"},{"title":"23.75","start":"2022-02-18","end":"2022-02-18"},{"title":"23.35","start":"2022-02-19","end":"2022-02-19"},{"title":"24.20","start":"2022-02-20","end":"2022-02-20"},{"title":"24.25","start":"2022-02-21","end":"2022-02-21"},{"title":"15.25","start":"2022-02-22","end":"2022-02-22"},{"title":"27.00","start":"2022-03-01","end":"2022-03-01"},{"title":"30.00","start":"2022-03-03","end":"2022-03-03"},{"title":"42.00","start":"2022-03-04","end":"2022-03-04"},{"title":"39.00","start":"2022-03-05","end":"2022-03-05"},{"title":"14.00","start":"2022-03-10","end":"2022-03-10"},{"title":"45.00","start":"2022-03-14","end":"2022-03-14"},{"title":"44.30","start":"2022-03-15","end":"2022-03-15"},{"title":"40.00","start":"2022-03-16","end":"2022-03-16"},{"title":"48.00","start":"2022-03-17","end":"2022-03-17"},{"title":"7.60","start":"2022-03-22","end":"2022-03-22"},{"title":"15.05","start":"2022-03-23","end":"2022-03-23"},{"title":"30.00","start":"2022-03-24","end":"2022-03-24"},{"title":"24.00","start":"2022-03-25","end":"2022-03-25"},{"title":"16.00","start":"2022-03-26","end":"2022-03-26"},{"title":"42.00","start":"2022-03-28","end":"2022-03-28"}]')],

我肯定在代码中遗漏了一些东西。感谢您的帮助，在此先致谢。

Answer 1

只需删除事件上的括号，就可以了

events: JSON.parse('[{"title":"7.90","start":"2022-01-01","end":"2022-01-01"},{"title":"8.00","start":"2022-01-09","end":"2022-01-09"},{"title":"8.20","start":"2022-01-10","end":"2022-01-10"},{"title":"22.90","start":"2022-01-16","end":"2022-01-16"},{"title":"24.35","start":"2022-02-17","end":"2022-02-17"},{"title":"23.75","start":"2022-02-18","end":"2022-02-18"},{"title":"23.35","start":"2022-02-19","end":"2022-02-19"},{"title":"24.20","start":"2022-02-20","end":"2022-02-20"},{"title":"24.25","start":"2022-02-21","end":"2022-02-21"},{"title":"15.25","start":"2022-02-22","end":"2022-02-22"},{"title":"27.00","start":"2022-03-01","end":"2022-03-01"},{"title":"30.00","start":"2022-03-03","end":"2022-03-03"},{"title":"42.00","start":"2022-03-04","end":"2022-03-04"},{"title":"39.00","start":"2022-03-05","end":"2022-03-05"},{"title":"14.00","start":"2022-03-10","end":"2022-03-10"},{"title":"45.00","start":"2022-03-14","end":"2022-03-14"},{"title":"44.30","start":"2022-03-15","end":"2022-03-15"},{"title":"40.00","start":"2022-03-16","end":"2022-03-16"},{"title":"48.00","start":"2022-03-17","end":"2022-03-17"},{"title":"7.60","start":"2022-03-22","end":"2022-03-22"},{"title":"15.05","start":"2022-03-23","end":"2022-03-23"},{"title":"30.00","start":"2022-03-24","end":"2022-03-24"},{"title":"24.00","start":"2022-03-25","end":"2022-03-25"},{"title":"16.00","start":"2022-03-26","end":"2022-03-26"},{"title":"42.00","start":"2022-03-28","end":"2022-03-28"}]')

根据您的数据和 FullCalendar 版本，您可能还想为您的事件指定 "allDay": true，因为您似乎没有在 start 和 end 中发送时间数据

我的屏幕截图中的完整代码

var date = new Date()
var d    = date.getDate(),
    m    = date.getMonth(),
    y    = date.getFullYear()

var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridMonth',
    headerToolbar: {
        left: 'prev,next today',
        center: 'title',
        left: 'dayGridMonth'
    },
    eventSources:   [{
        color: 'red',   
        textColor: '#ffffff',
        events: JSON.parse('[{"title":"7.90","start":"2022-01-01","end":"2022-01-01"},{"title":"8.00","start":"2022-01-09","end":"2022-01-09"},{"title":"8.20","start":"2022-01-10","end":"2022-01-10"},{"title":"22.90","start":"2022-01-16","end":"2022-01-16"},{"title":"24.35","start":"2022-02-17","end":"2022-02-17"},{"title":"23.75","start":"2022-02-18","end":"2022-02-18"},{"title":"23.35","start":"2022-02-19","end":"2022-02-19"},{"title":"24.20","start":"2022-02-20","end":"2022-02-20"},{"title":"24.25","start":"2022-02-21","end":"2022-02-21"},{"title":"15.25","start":"2022-02-22","end":"2022-02-22"},{"title":"27.00","start":"2022-03-01","end":"2022-03-01"},{"title":"30.00","start":"2022-03-03","end":"2022-03-03"},{"title":"42.00","start":"2022-03-04","end":"2022-03-04"},{"title":"39.00","start":"2022-03-05","end":"2022-03-05"},{"title":"14.00","start":"2022-03-10","end":"2022-03-10"},{"title":"45.00","start":"2022-03-14","end":"2022-03-14"},{"title":"44.30","start":"2022-03-15","end":"2022-03-15"},{"title":"40.00","start":"2022-03-16","end":"2022-03-16"},{"title":"48.00","start":"2022-03-17","end":"2022-03-17"},{"title":"7.60","start":"2022-03-22","end":"2022-03-22"},{"title":"15.05","start":"2022-03-23","end":"2022-03-23"},{"title":"30.00","start":"2022-03-24","end":"2022-03-24"},{"title":"24.00","start":"2022-03-25","end":"2022-03-25"},{"title":"16.00","start":"2022-03-26","end":"2022-03-26"},{"title":"42.00","start":"2022-03-28","end":"2022-03-28"}]'),

    }]   
});

calendar.render();

JSON 数据未显示在 FullCalendar 中

JSON data not showing in FullCalendar

fullcalendar

laravel