I want to custom header in calendar with mode Week as my layout. How can I do.
Thanks
Configure the allDayEvents
with a dayCellRenderer
which looks a little like this:
dayCellRenderer(cellData) {
const
{ date, day, tomorrow } = cellData,
ret = [{
className : 'b-day-name-day',
html : DH.getDayShortName(day)
}, {
className : 'b-day-name-date',
html : date.getDate()
},
getAdditionalChildDomConfig(cellData) //<- Implement this to add extra
// It can return null or a DomConfig
// object for an extra element
];
if (this?.dayTime?.startShift) {
ret[0].html += `-${DH.getDayShortName(tomorrow.getDay())}`;
ret[1].html += `-${tomorrow.getDate()}`;
}
return ret;
}
It should be a little bit easier, here's an FR ticket: https://github.com/bryntum/support/issues/3934
OK, I have created a dayHeaderRenderer
concept, so the example which demonstrates it looks like this:
The code will be
week : {
dayHeaderRenderer(dayHeaderDomConfig, cellData) {
// Add extra element on special date
if (!(cellData.date - new Date(2020, 9, 14))) {
dayHeaderDomConfig.children.push({
cls : 'b-highlight-day',
text : '\u26F3 Day off'
});
}
}
}
Caching issue? Because that's what this example uses: https://bryntum.com/examples/calendar/custom-rendering/