Header day widths wrong in initial load

[ile]

Using the latest ES6 module. Made some color changes in CSS (don't affect box sizes).

When I initially load the page, the day widths in the headers are a bit too big:

When I resize the browser, they are corrected:

Initial width:

Resized:

[vkurko]

Can you please provide the set of options you use to initialize your calendar so I can reproduce the problem?

[ile]

Sorry, I should have included them.

And looking at them, seems like this is the reason:

height: '80vh',

Full code:

        new Calendar({
            target: this.calendar,
            props: {
                plugins: [TimeGrid, Interaction],
                options: {
                    height: '80vh',
                    allDaySlot: false,
                    editable: true,
                    view: 'timeGridWeek'
                }
            }
        });

[vkurko]

I have prepared a demo with your options and cannot reproduce the issue. Do you see the problem with this demo?

[ile]

Not in the link, but I can try to make a demo myself, will take a day though (some other things to do).

[vkurko]

I can try to make a demo myself

Thank you, this will be very helpful.

[ile]

I don't have a reproducible link yet, but I noticed that the problem happens when there is no ec-with-scroll class in the calendar wrapper. And in my case it is not there at the start for some reason.

When I resize the window, it appears there and the problem goes away. But initially that classname isn't there and the problem happens.

[vkurko]

Yes, this class is set automatically depending on the presence of scrollbar in the main section. It's not clear why this doesn't work in your case.

[ile]

One thing that may affect it - I had to use a dynamic import to import the packages (because I'm using this from a commonjs package):

let Calendar, TimeGrid, Interaction;

import("@event-calendar/core").then((core) => {
    Calendar = core.default;
});

import("@event-calendar/time-grid").then((timegrid) => {
    TimeGrid = timegrid.default;
});
import("@event-calendar/interaction").then((interaction) => {
    Interaction = interaction.default;
});

[ile]

Maybe not that easy. I will try to make a repo for the demo.

[ile]

I was looking at the compiled Svelte code. The $_scrollable is false at the point of the Calendar initialization. There was some Svelte store mechanism going on at that point and maybe the value wasn't set to $_scrollable fast enough.

It probably has something to do with how I'm initializing the Calendar, it's not very straight forward either - I'm using a certain JS framework.

Also not sure how to workaround it at this point.

[vkurko]

You may try creating a demo on StackBlitz.

[ile]

The more specific reason is that afterUpdate() https://github.com/vkurko/calendar/blob/master/packages/core/src/Calendar.svelte#L118 isn't run after the component initialization.

I still don't have the demo, because the JS framework I'm using isn't actually public (it's forked from a public one though) - when I get more time I could create the demo based on this original framework (https://derbyjs.com/).

Also it seems that eventSources doesn't get evaluated. Probably connected to the component initialization. I did get eventSources work in a standalone test.

I try to make the demo...

[ile]

I found the reason. There was some older Svelte code in the project with conflicted. Closing...