Timeline column header custom date format

Event calendars & schedulers
1

The only way I’ve found to customise the date format on the timeline headers is through the #day slot, nothing else seems to work so far.
But when I center the text like so:

        <template #day="data">
            <h2 class="p-2 text-center font-bold">
                {{ formatDate('DDD D MMM', data.date) }}
            </h2>
        </template>

In combination with passing an array of slots:

[{"id":1,"uuid":"0199374e-6003-70ac-bcbd-774ac0d896d4","name":"Morning","active":true}]

The first column header has a bug, rendering the text twice:

CleanShot 2025-09-11 at 15.24.44@2x
CleanShot 2025-09-11 at 15.24.44@2x2086×302 22.1 KB

Am I going about this the wrong way? Or is this a genuine bug?
The bug isn’t there if I don’t pass any slots

2

Hi @pezza-j

The issue is caused by the text-align: center rule, indeed which is directly conflicting with the component’s design for the sticky header.
The problem you’re seeing—where your text appears duplicated or overlapping—is a classic CSS conflict between your external styles and the component’s internal functionality.
The duplication you see is often the result of this struggle: one version of the text is rendered correctly by the component’s internal logic, while another version (or the original, misaligned) is rendered due to the conflicting text-align: center rule, making the text look like it’s doubled or incorrectly positioned.

Is there a specific reason why you need the dates to be positioned in center?