javascript - Fullcalendar.js can't add events
one text
I have a Laravel project and I want to add events before fullcalendar.js renders the calendar. But can't do it by giving event objects array and ajax URL. Here is what I try tried:
document.addEventListener('DOMContentLoaded', function() {
const calendarEl = document.getElementById('calendar');
const calendar = new FullCalendar.Calendar(calendarEl, {
themeSystem: 'bootstrap',
height: '100%',
expandRows: true,
slotMinTime: '08:00',
slotMaxTime: '20:00',
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
initialView: 'dayGridMonth',
initialDate: '2020-09-12',
navLinks: true, // can click day/week names to navigate views
editable: true,
events: '/getConcerts',
locale: 'tr',
selectable: true,
nowIndicator: true,
});
calendar.render();
});
Even pre-configured events doesn't render:
document.addEventListener('DOMContentLoaded', function() {
const calendarEl = document.getElementById('calendar');
const calendar = new FullCalendar.Calendar(calendarEl, {
themeSystem: 'bootstrap',
height: '100%',
expandRows: true,
slotMinTime: '08:00',
slotMaxTime: '20:00',
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
initialView: 'dayGridMonth',
initialDate: '2020-09-12',
navLinks: true, // can click day/week names to navigate views
editable: true,
events: [
{
title: 'Deneme',
start: '2021-09-13',
allDay: true
}
],
locale: 'tr',
selectable: true,
nowIndicator: true,
});
calendar.render();
Here is the /getConcerts
route function:
$concerts = Concert::query()->whereStatus('1')->get();
$collection = collect();
foreach($concerts as $concert){
$start_date = new DateTime($concert->start_date);
$collection->push([
'title' => json_decode($concert->title, true)['tr'],
'start' => $start_date->format('Y-m-d'),
'startTime' => $start_date->format('H:i')
]);
}
return response()->json(['concerts' => $collection]);
Also tried this in my view:
const eventsObj = [];
$.ajax({
url: '/getConcerts',
method: 'GET',
success: function(response){
for (const concert of response.concerts) {
eventsObj.push({
title: concert.title,
start: concert.start,
startTime: concert.startTime
});
}
}
});
console.log(eventsObj);
document.addEventListener('DOMContentLoaded', function() {
const calendarEl = document.getElementById('calendar');
const calendar = new FullCalendar.Calendar(calendarEl, {
themeSystem: 'bootstrap',
height: '100%',
expandRows: true,
slotMinTime: '08:00',
slotMaxTime: '20:00',
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
initialView: 'dayGridMonth',
initialDate: '2020-09-12',
navLinks: true, // can click day/week names to navigate views
editable: true,
events: eventsObj,
locale: 'tr',
selectable: true,
nowIndicator: true,
});
calendar.render();
});
I don't understand why I can't add events to the calendar in these 2 ways.
Source