You can customize the calendar column headers using the onBeforeHeaderRender
event handler:
const calendar = new DayPilot.Calendar("calendar", {
// ...
headerHeight: 50,
onBeforeHeaderRender: args => {
const date = args.header.start.toString("d MMMM");
const dayOfWeek = args.header.start.toString("ddd");
args.header.html = `${date}<br>${dayOfWeek}`;
},
});
You may want to add this to the CSS to center the text lines:
.calendar_default_colheader_inner {
text-align: center;
}