Данные 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"}]')],

Я определенно что-то упускаю в коде. Ваша помощь будет оценена по достоинству, и спасибо заранее.

Что, если вы сделаете events: JSON.parse(...)? (без лишних []

— 22.03.2022 20:33

В будущем постарайтесь не задавать новый вопрос, если вы его уже задавали: stackoverflow.com/questions/71573777/…; вы можете просто отредактировать старый вопрос, чтобы добавить новые детали, и он будет «вверху» списка вопросов.

— 22.03.2022 20:41

laravel fullcalendar

22.03.2022 20:27

Стоит ли изучать PHP в 2023-2024 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Оживление вашего приложения Laravel: Понимание режима обслуживания

Здравствуйте, разработчики! В сегодняшней статье мы рассмотрим важный аспект управления приложениями, который часто упускается из виду в суете...

Коллекции в Laravel более простым способом

Привет, читатели, сегодня мы узнаем о коллекциях. В Laravel коллекции - это способ манипулировать массивами и играть с массивами данных. Благодаря...

Поиск нового уровня в Laravel с помощью MeiliSearch и Scout

Laravel Scout - это популярный пакет, который предоставляет простой и удобный способ добавить полнотекстовый поиск в ваше приложение Laravel. Он...

Освоение архитектуры микросервисов с Laravel: Лучшие практики, преимущества и советы для разработчиков

В последние годы архитектура микросервисов приобрела популярность как способ построения масштабируемых и гибких приложений. Laravel , популярный PHP...

Как построить CRUD-приложение в Laravel

Laravel - это популярный PHP-фреймворк, который позволяет быстро и легко создавать веб-приложения. Одной из наиболее распространенных задач в...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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();

23.03.2022 10:31

Другие вопросы по теме

Изменить стиль через флажок

FullCalendar Двухнедельное событие

Изменить ширину события в FullCalendar (React JS)

Как программно добавить всплывающее окно ngBootstrap к элементу?

Проблема с добавлением и загрузкой событий в полный календарь jQuery с использованием Sql Server и PHP

Полный календарь Не сортирует события дней в правильном порядке

Как изменить цвет фона ячейки и добавить текст (из выбранной кнопки) в полную ячейку календаря, нажав кнопку?

Полное событие отображения календаря из вызова ajax

Как вставить пользовательские данные в событие fullcalendar?

Проблема с использованием событий (как функции) v4

Данные JSON не отображаются в FullCalendar

Ответы 1

Другие вопросы по теме

Похожие вопросы