#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 «. К сожалению, событие не происходит, все еще не отображается в календаре, есть идеи?