Develop Reference

How can i modify duration days with resourceTimelineWeek header

i using resourceTimelinePlugin, and always it displayed 7 days in the header, i need change that, how can i do that?
my calendar
my calendarOptions json:
calendarOptions: CalendarOptions = {
plugins: [resourceTimelinePlugin, interactionPlugin, momentPlugin],
schedulerLicenseKey: ConstanteCalendario.schedulerLicenseKey,
headerToolbar: {
left: "today prev,next",
center: "title",
right: "",
},
initialView: OpcionVistaCalendarioEnum.LineaTiempoRecursoSemana,
slotLabelFormat: [
{ weekday: "short", day: "2-digit" }, // lower level of text
],
firstDay: moment().day(),
resourceAreaColumns: [
{
field: "nombreJuez",
headerContent: "Jueces",
},
],
editable: true,
selectable: true,
unselectAuto: true,
slotDuration: { days: 1 },
droppable: true,
locale: "es",
views: {
resourceTimelinePlugin: {
type: 'timelineWeek',
},
week: {
titleFormat: { year: "numeric", month: "long", day: "2-digit" },
titleRangeSeparator: " hasta ",
},
},
timeZone: ConstanteCalendario.timeZone,
displayEventTime: false,

You can modify the duration of a custom view using 'duration', see https://fullcalendar.io/docs/duration.
For instance, if you want to set up a separate view which allows you to view more days you can do that using https://fullcalendar.io/docs/v3/timeline-view.
e.g.
type: 'resourceTimeline',
duration: { days: 3 },
buttonText: '3 days'

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.

Change view when windowResize triggers

I am trying to update Fullcalender view, when the calender resizes.
I am using windowResize event.
This is how it looks now.
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('kt_calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'bootstrap', 'interaction', 'dayGrid', 'timeGrid', 'list' ],
defaultView: 'timeGridWeek',
views: {
timeGridWeek: {
buttonText: 'week',
dayCount: 4,
duration: { days: 4 },
},
test: {
buttonText: 'week',
dayCount: 1,
duration: { days: 1 },
},
abc: {
buttonText: 'week',
dayCount: 2,
duration: { days: 2 },
}
},
windowResize: function(view) {
this.changeView("test");
}
});
calendar.render();
});
windowResize does trigger as it should, but i get this error:
The FullCalendar view "test" does not exist. Make sure your plugins
are loaded correctly
Am I not defining the custom views correct or what am i missing?

After a bit of testing it appears that if you correctly define your custom view with the type property, as documented at https://fullcalendar.io/docs/v4/custom-view-with-settings, then it doesn't throw the error.
views: {
timeGridWeek: {
buttonText: 'week',
dayCount: 4,
duration: { days: 4 },
},
test: {
type: 'timeGrid',
buttonText: 'week',
dayCount: 1,
duration: { days: 1 },
},
abc: {
type: 'timeGrid',
buttonText: 'week',
dayCount: 2,
duration: { days: 2 },
}
(N.B. It shouldn't be needed for the timeGridWeek one since you've simply overwritten the name of a view which is already available in the timeGrid plugin).
Demo: https://codepen.io/ADyson82/pen/ZEWKXRL

FullCalendar v1.6.0 Events

I have the following code which works in FullCalendar v2.4.0:
$('#calendar').fullCalendar({
header: {
center: 'title',
left: 'nothing',
right: 'nothing'
},
selectable: false,
defaultView: 'month',
titleFormat: 'MMMM',
events: [{
start: "2018-03-01",
end: "2018-03-01",
rendering: "background",
color: "red"
}]
});
https://jsfiddle.net/5x2dL5Ls/74/
How could I do the same but with FullCalendar v1.6.0? (I have to do it with that version :-/)

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