Блог

Главная - Вопросы по программированию - FullCalendar — не удается получить данные в формате json и отобразить события в календаре

FullCalendar — не удается получить данные в формате json и отобразить события в календаре

#laravel #fullcalendar

#laravel #полный календарь

Вопрос:

У меня есть «calendar.js » файл, который инициализирует календарь и извлекает события в формате json на маршруте «{{route (‘allCourse’)}}». к сожалению, файл js не может получить доступ к маршруту для извлечения событий (ошибка 404). Тем не менее, мне удается получить их через URL-адрес в браузере. Пожалуйста, помогите мне, спасибо.

ошибка — xhr

 Request URL: http://univinfo.test/admin/{{ route('allCourse') }}?start=2020-10-01amp;end=2020-11-01amp;_=1601837725221
Request Method: GET
State code: 404 Not Found
Remote address: 127.0.0.1:80
Access point strategy: no-referrer-when-downgrade

calendar.js

 $(function () {
    'use strict'

    // Initialize tooltip
    $('[data-toggle="tooltip"]').tooltip()

    // Sidebar calendar
    $('#calendarInline').datepicker({
        showOtherMonths: true,
        selectOtherMonths: true,
        beforeShowDay: function (date) {

            // add leading zero to single digit date
            var day = date.getDate();
            console.log(day);
            return [true, (day < 10 ? 'zero' : '')];
        }
    });

    // Initialize fullCalendar
    $('#calendar').fullCalendar({
        height: 'parent',
        locale: 'fr',
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay,listWeek'
        },
        navLinks: true,
        selectable: true,
        selectLongPressDelay: 100,
        editable: true,
        nowIndicator: true,
        defaultView: 'listMonth',
        views: {
            agenda: {
                columnHeaderHtml: function (mom) {
                    return '<span>'   mom.format('ddd')   '</span>'  
                        '<span>'   mom.format('DD')   '</span>';
                }
            },
            day: {
                columnHeader: false
            },
            listMonth: {
                listDayFormat: 'ddd DD',
                listDayAltFormat: false
            },
            listWeek: {
                listDayFormat: 'ddd DD',
                listDayAltFormat: false
            },
            agendaThreeDay: {
                type: 'agenda',
                duration: {
                    days: 3
                },
                titleFormat: 'MMMM YYYY'
            }
        },

        events: "{{ route('allCourse') }}",

        eventAfterAllRender: function (view) {
            if (view.name === 'listMonth' || view.name === 'listWeek') {
                var dates = view.el.find('.fc-list-heading-main');
                dates.each(function () {
                    var text = $(this).text().split(' ');
                    var now = moment().format('DD');

                    $(this).html(text[0]   '<span>'   text[1]   '</span>');
                    if (now === text[1]) {
                        $(this).addClass('now');
                    }
                });
            }

            console.log(view.el);
        },
        eventRender: function (event, element) {

          if (event.description) {
              element.find('.fc-list-item-title').append('<span class="fc-desc">'   event.description   '</span>');
              element.find('.fc-content').append('<span class="fc-desc">'   event.description   '</span>');
          }

          var eBorderColor = (event.source.borderColor) ? event.source.borderColor : event.borderColor;
          element.find('.fc-list-item-time').css({
              color: eBorderColor,
              borderColor: eBorderColor
          });

          element.find('.fc-list-item-title').css({
              borderColor: eBorderColor
          });

          element.css('borderLeftColor', eBorderColor);
      },
      
    });

    var calendar = $('#calendar').fullCalendar('getCalendar');

    // change view to week when in tablet
    if (window.matchMedia('(min-width: 576px)').matches) {
        calendar.changeView('agendaWeek');
    }

    // change view to month when in desktop
    if (window.matchMedia('(min-width: 992px)').matches) {
        calendar.changeView('month');
    }

    // change view based in viewport width when resize is detected
    calendar.option('windowResize', function (view) {
        if (view.name === 'listWeek') {
            if (window.matchMedia('(min-width: 992px)').matches) {
                calendar.changeView('month');
            } else {
                calendar.changeView('listWeek');
            }
        }
    });

    // Display calendar event modal
    calendar.on('eventClick', function (calEvent, jsEvent, view) {

        var modal = $('#modalCalendarEvent');

        modal.modal('show');
        modal.find('.event-title').text(calEvent.title);

        if (calEvent.description) {
            modal.find('.event-desc').text(calEvent.description);
            modal.find('.event-desc').prev().removeClass('d-none');
        } else {
            modal.find('.event-desc').text('');
            modal.find('.event-desc').prev().addClass('d-none');
        }

        modal.find('.event-start-date').text(moment(calEvent.start).format('LLL'));
        modal.find('.event-end-date').text(moment(calEvent.end).format('LLL'));

        //styling
        modal.find('.modal-header').css('backgroundColor', (calEvent.source.borderColor) ? calEvent.source.borderColor : calEvent.borderColor);
    });


    //display current date
    var dateNow = calendar.getDate();
    calendar.option('select', function (startDate, endDate) {
        $('#modalCreateEvent').modal('show');
        $('#eventStartDate').val(startDate.format('LL'));
        $('#eventEndDate').val(endDate.format('LL'));

        $('#eventStartTime').val('07:00:00').trigger('change');
        $('#eventEndTime').val('10:00:00').trigger('change');
    });

    $('.select2-modal').select2({
        minimumResultsForSearch: Infinity,
        dropdownCssClass: 'select2-dropdown-modal',
    });

    $('.calendar-add').on('click', function (e) {
        e.preventDefault()

        $('#modalCreateEvent').modal('show');
    });


})

web.php

 <?php

use IlluminateSupportFacadesRoute;

/*
|--------------------------------------------------------------------------
| Laravel Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/ 

/* Courses Routes */
Route::get('index', 'CoursesController@index')->name('allCourse');

когда я получаю доступ к маршруту «allCourse» напрямую через URL

 {
  
        "backgroundColor": "rgba(91,71,251,.2)",
        "borderColor": "#5b47fb",
        "events": [{
            "start": "2020-10-07T07:00:00",
            "end": "2020-10-07T10:00:00",
            "title": "statistiques",
            "description": "drink Coffee"
        }]
   
};

Комментарии:

1. Файл .js не является блейд-файлом laravel. Поэтому "{{ route('allCourse') }}" интерпретатор PHP не оценивает его и не превращает в URL. Если вы хотите использовать этот синтаксис для указания URL-адреса, он должен находиться в блейд-файле, иначе PHP / Laravel даже не посмотрит на него. Файлы JS просто обслуживаются веб-сервером как есть, они не проходят сначала через движок PHP.

2. большое вам спасибо. Я воспользовался вашим советом и заменил маршрут «{{route (…)}}» на URL » / index «, и он работает » code 200 «. К сожалению, событие не происходит, все еще не отображается в календаре, есть идеи?