Language: some fields are not translated + capitalizing texts

[Nowhk]

Hi,

how can I manage in different languages the labels/text of ec in general?
For example, I've set locale as:

    const ec = EventCalendar.create(document.getElementById('ec'), {
        locale: "it",
        ...

but some labels are not translated, for example "today", "month", "week", and so on:

Also, how can i use the capitalizing texts? For example I'd like

• "Ago", not "ago"
• "Dom", not "dom"

and so on.

How can I do this?

Thanks

[Nowhk]

@vkurko can you help me please?

[Nowhk]

@vkurko basically, using the script suggested above, I want to scroll the calendar to a fixed date, when opening the page/calendar. But it runs at this event:

datesSet: function (info) {
   ScrollToDate(new Date());
}

The problem is that first render at "default" (so, current date), than scroll, so you can see the effect visually (which is not great).
That's why should be do this before the calendar actually render, so I won't see this weak/slide effect.

[vkurko]

Your setInterval has a delay of 100ms, I would try setting it to 0, you can also replace setInterval with setTimeout.

[Nowhk]

Your setInterval has a delay of 100ms, I would try setting it to 0, you can also replace setInterval with setTimeout.

Tried this way:

    function ScrollToDate(date) {
        const rootEl = document.getElementById('ec');
        const targetDate = FormatDateForHeader(date);
        setTimeout(() => {
            const targetDateHeaderElement = rootEl.querySelector(`.ec-header [datetime="${targetDate}"]`);
            if (targetDateHeaderElement) {
                const bodyElement = rootEl.querySelector('.ec-body');
                if (bodyElement) {
                    const headerRect = targetDateHeaderElement.getBoundingClientRect();
                    const bodyRect = bodyElement.getBoundingClientRect();
                    const scrollLeft = headerRect.left - bodyRect.left + bodyElement.scrollLeft;
                    bodyElement.scrollTo({ left: scrollLeft, behavior: 'auto' });
                }
            }
        }, 0);
    }

Its the same, I can see the "scroll" effect. @vkurko have you other suggestions?

[Nowhk]

To change button captions use buttonText option.

@vkurko is it correct that all day and +1 more are not covered by buttonText?

How can I change also them?

[vkurko]

See allDayContent and moreLinkContent.

[athspk]

For capitalizing you can use text-transform: capitalize;. See:
https://stackoverflow.com/questions/5577364/make-the-first-character-uppercase-in-css
https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform