Develop Reference

Fullcalendar.js can't add events

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.

Events are not displayed with timeline plugin

i try to display events with timeline plugin. I only see the start date. first image
plugins: [ 'timeline' ],
views: {
timelineThreeYear: {
type: 'timeline',
duration: { year: 3 },
buttonText: '3 ans'
}
},
timeZone: 'local',
height: 400,
defaultView: 'timelineThreeYear',
aspectRatio: 0.5,
header: {
left: 'prev,next',
center: 'title',
right: 'timelineMonth,timelineYear,timelineThreeYear',
},
timeline view
with the same events, with daygrid plugin, i see the events.second image
i don't understand the problem.
plugins: [ 'dayGrid' ],
timeZone: 'UTC',
defaultView: 'dayGridMonth',
editable: true,
daygridMonth view

fullcalendar V4 dayClick not firing

I am trying to convert an old Fullcalendar based web app to V4. I can not get dayClick to fire.
I have this CodePen example: https://codepen.io/anon/pen/YMMEyN?&editable=true&editors=001
The example was initialized via a lik=nk from the FC web site. See below. It brings up a dayGridMonth view by default. It includes the interaction plugin but the dayClick method does not fire, no matter what day cell i click in.
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'interaction', 'dayGrid', 'timeGrid' ],
defaultView: 'dayGridMonth',
defaultDate: '2019-04-07',
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
dayClick: function(info) {
alert("dayClick ");
},
events: [
{
title: 'All Day Event',
start: '2019-04-01'
},
{
title: 'Long Event',
start: '2019-04-07',
end: '2019-04-10'
},
{
groupId: '999',
title: 'Repeating Event',
start: '2019-04-09T16:00:00'
},
{
groupId: '999',
title: 'Repeating Event',
start: '2019-04-16T16:00:00'
},
{
title: 'Conference',
start: '2019-04-11',
end: '2019-04-13'
},
{
title: 'Meeting',
start: '2019-04-12T10:30:00',
end: '2019-04-12T12:30:00'
},
{
title: 'Lunch',
start: '2019-04-12T12:00:00'
},
{
title: 'Meeting',
start: '2019-04-12T14:30:00'
},
{
title: 'Birthday Party',
start: '2019-04-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2019-04-28'
}
]
});
calendar.render();
});

I think you meant dateClick instead of dayClick:
dateClick: function(info) {
alert("dateClick");
},
for reference: dateClick() docs

How group by date and resource with FullCalendar.js?

I use FullCalendar to generate my agenda with 3 sections each day. I add attribute groupByDateAndResource and resources like there:
$('#calendar').fullCalendar({
header: {
left: 'prev,next',
center: 'title',
right: 'agendaWeek,agendaDayTrucks'
},
views: {
agendaDayTrucks: {
type: 'agenda',
duration: { day: 1 },
buttonText: 'Truck View Per Day'
}
},
buttonText: {
week: 'Week View'
},
nowIndicator: true,
defaultView: 'agendaWeek',
defaultDate: moment().format('YYYY-MM-DD'),
slotDuration: '01:00:00',
snapDuration: '00:05:00',
groupByDateAndResource: true,
resources: [
{ id: 'truck1', title: 'Truck 1' },
{ id: 'truck2', title: 'Truck 2' },
{ id: 'truck3', title: 'Truck 3' }
]
...
});
My calendar show perfectly, but my columns doesn't divided in 3 sections. See image
How can I make divide all my days in sections with FullCalendar.js?
Thanks!
SOLUTION:
I installed extension scheduler.js. This extension of FullCalender display all my resources exactly like I want.

You need to do like this, This is in header, and in body you will have to divide cells again.

$('#calendar').fullCalendar({
header: {
left: 'prev,next',
center: 'title',
right: 'agendaWeek,agendaDayTrucks'
},
groupByDateAndResource: true,
views: {
agendaDayTrucks: {
type: 'agenda',
duration: { day: 1 },
buttonText: 'Truck View Per Day'
}
},
buttonText: {
week: 'Week View'
},
nowIndicator: true,
defaultView: 'agendaWeek',
defaultDate: moment().format('YYYY-MM-DD'),
slotDuration: '01:00:00',
snapDuration: '00:05:00',
groupByDateAndResource: true,
resources: [
{ id: 'truck1', title: 'Truck 1' },
{ id: 'truck2', title: 'Truck 2' },
{ id: 'truck3', title: 'Truck 3' }
]
...
});
you have to put groupByDateAndResource: true
https://fullcalendar.io/docs/v3/groupByDateAndResource

JS Fullcalendar background color not setting

I am trying to set the background color of an event with FullCalendar JS http://arshaw.com/fullcalendar/
Here is my JS:
<script>
$('#calendar').fullCalendar({
events: [
{
title: 'Test',
start: '2014-08-07',
url: '#',
backgroundColor: '#FF0000',
editable: true
},
]
});
</script>
And here is what that produces
Why is it not producing the result I want, the event background colored as red.

You can change the backgroundColor property for your events like:
$('#calendar').fullCalendar({
{
title: '1',
start: new Date(2014, 02, 25, 10, 30),
allDay: false,
editable: false,
backgroundColor: '#ED1317'
},
{
title: '2',
start: new Date(2014, 02, 26, 10, 30),
allDay: false,
editable: false,
backgroundColor: '#ED1317'
},
...
});
For the other dates, just use the .fc-future and .fc-today CSS properties :
.fc-future,
.fc-today {
background-color: #10CC55;
}
Updated :
$('#calendar').fullCalendar({
eventSources: [
{
events: [
{
title : 'event1',
start : '2010-01-01'
},
{
title : 'event2',
start : '2010-01-05',
end : '2010-01-07'
},
{
title : 'event3',
start : '2010-01-09 12:30:00',
}
],
backgroundColor: '#ED1317'
}
]