I'm implementing a 5 year view in resourceTimeline type.
resource5YearsSlide: {
type: 'resourceTimeline',
buttonText: '5 Years',
dateIncrement: {
year: 1
},
slotDuration: {
month: 3
},
slotLabelInterval: {
month: 3
},
slotLabelFormat: function(arg) {
const date = new Date(arg.date.marker);
const month = date.getMonth();
const year = date.getFullYear();
const quarter = Math.floor(month / 3) + 1;
return 'T' + quarter + ' ' + year;
},
visibleRange: function(currentDate) {
const start = new Date(currentDate);
start.setMonth(0);
start.setDate(1);
const end = new Date(currentDate);
end.setFullYear(start.getFullYear() + 4);
end.setMonth(11); // Décembre
end.setDate(31);
return {
start: start.toISOString(),
end: end.toISOString()
};
}
},
This works great, but I would find a way to have a 2 row titles, first for year, and second for quarters.
I've tried :
slotLabelFormat: [{
year: 'numeric',
},
{
custom: function(arg) {
// Conversion explicite en objet Date natif
const date = new Date(arg.date.marker);
const month = date.getMonth();
const quarter = Math.floor(month / 3) + 1;
return 'T' + quarter;
}
}
],
and other key instead of 'custom', but the function is not called at all, but the year row well printed.
Is there any way to circumvent that?
As you've noticed, the Timeline view supports an array of values for the slotLabelFormat
setting (as per https://fullcalendar.io/docs/slotLabelFormat).
Each item in that array must be something which is compatible with fullCalendar's Date formatter specification.
Therefore, if you want complete control of the second row you can provide a callback function which returns a string instead of a hard-coded config object, as mentioned in the date formatting documentation.
You had attempted this but the syntax was wrong - the function definition should entirely replace the object, not be in a property within that object (because fullCalendar has no expectation of that, and won't know to look for it there).
This version will work:
slotLabelFormat:
[
{ year: "numeric" },
function(arg) {
// Conversion explicite en objet Date natif
const date = new Date(arg.date.marker);
const month = date.getMonth();
const quarter = Math.floor(month / 3) + 1;
return 'T' + quarter;
}
],
Live demo: https://codepen.io/ADyson82/pen/MYwMWJQ