JSON 数据未显示在 FullCalendar 中
我是 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;
}
我试图通过它获取事件。
刀片视图日历
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"}]')],
我肯定在代码中丢失了某些内容。我们将感谢您的帮助，并提前致谢。
I am new to Laravel, coding and learning from YouTube and Stack Overflow. Thanks to all members of Stack Overflow who help me to understand the mistakes.
Now here I am Trying to show data in FullCalendar where I am getting data from controller
Below is code
Controller
$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;
}
by this I am trying to get events.
Blade View Calendar
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();
Calendar is showing but no event is showing in the same... if i check page source data is shwoing like
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"}]')],
I am definitely missing something in the code. Your help will be appreciated and thanks is advance.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
只需删除事件上的括号即可
根据您的数据和 FullCalendar 版本，您可能还需要为您的事件指定
"allDay": true，如下所示你没有出现在start和end中发送时间数据在我的屏幕截图中工作的完整代码
Simply remove the parenthesis on the events, and it works
Depending on your data and FullCalendar version, you may also want to specify
"allDay": truefor your events, as you do not appear to be sending time data instartandendFull code working in my screenshot