Force FullCalendar weekly dayheader on day mode

Question

So I'm using FullCalendar v4 library for reservation system, and I need to override DayHeader while using day-mode (timeGridDay or timeGridWeek with duration set to {days: 1}). Basically I have this sketch:

I want to get day-mode system (as I told) with week-based DayHeader (because I use days labels in my JavaScript code for day switching). I want just to display single day in calendar, with preserving header (header that displays 7 days).

I was trying to override header to duration: {days: 7}, copy header using jQuery .html() method, and then change duration to {days: 1} and paste header using .html() on the same div. But changing duration using method from GitHub destroy cells style alignment, so it does not display nicely as you were using duration: {days: 1} on Calendar init.

What can I do? Thanks in advance for solutions.

@EDIT:

I want to mention that the answer how to restyle FullCalendar (set automatically width for DayHeader cells (labels)) after changing durations is also adequate for me and fits into my wished solution - so if you have something in mind, tell me.

Answer 1

So, I resolved my problem by using this code:

if(view.viewSpec.type === 'customDayGrid'){
    let views = calendar.getOption('views');
    views.customDayGrid.duration.days = 1;
    calendar.setOption('views', views);
}

setTimeout(() => {
    $(headerSel).html(getHeaderHTML);
    calendar.updateSize();
}, 100)

I wish I didn't used setTimeout but I don't know how to resolve it different way - but it works, so I think it closes my issue.