Bryntum Support Forums

When using the timeline mode for the calendar, setting

weekStartDay

doesn't seem to work.

I've set

weekStartDay = 1

at the calendar level, as per below:

https://www.dropbox.com/s/zihb5hj536buqt2/Snipaste_2022-08-10_21-14-45.png?dl=0

https://www.dropbox.com/s/7y455z0462kuquw/Snipaste_2022-08-10_21-16-10.png?dl=0

Do I need to make any change to the timeline mode as well?

Hey tdset,

Actually, I tested that configuration in our basic demo and worked just fine, perhaps some other configuration is set in a different way in the timeline?

You can try to add to the viewModes as well that configuration (e.g. the weekView) https://www.bryntum.com/docs/calendar/api/Calendar/widget/WeekView#config-weekStartDay

If that didn't make it, could you please share your configuration here to check what could be causing that?

Hi Marcio,

I'm using your "calendar-scheduler" example, and the only line that I added was:

const calendar = new Calendar({
    appendTo : 'container',

// the week starts on Monday
weekStartDay: 1,

// Start life looking at this date
date : new Date(2020, 9, 11),

Setting it to Monday works well for Day / Week / Month modes, but not with the "Timeline" mode.

Here's a printscreen that explains the issue:

https://www.dropbox.com/s/hcmuohsf3ijuab6/Snipaste_2022-08-11_10-53-37.png?dl=0

Hi,
Thank you for your report. It seems like a bug. We'll investigate it. Here is the ticket https://github.com/bryntum/support/issues/5057

Good Luck ,
Tasnim

It's not a bug, what controls the initial date of the Scheduler (in a day based view) is the startDate which is set to a Sunday:

    date         : new Date(2020, 9, 11),

If Scheduler was showing a week-based mode, it would work as you expected.

I'm not referring to a day based view, or a week based view. It's the integration of the Scheduler into the Calendar (timeline mode).

If it works correctly, how can we load the timeline, showing (or focusing) the current day, while having the week starting on a Monday?

const calendar = new Calendar({
    appendTo: 'container',

// if this date below always has to be a Monday (for the scheduler to work correctly), 
// how can we focus on the current day?
date: new Date(2022, 7, 1),
weekStartDay : 1,

If the date above is any day of the week, the scheduler always starts on a Sunday.

https://www.dropbox.com/s/xike2myfki21llz/Snipaste_2022-08-12_10-09-47.png?dl=0

I'm not referring to a day based view, or a week based view. It's the integration of the Scheduler into the Calendar (timeline mode).

I meant this in a Scheduler context. The Scheduler has different viewPreset that show days, weeks, months etc. If you use day based view (such in your sample code), the startDate you set will be respected and you should set it to the value you want. If you instead choose a week based viewPreset (such as weekAndDay), it'll be snapped to match the weekStartDate.

https://bryntum.com/docs/scheduler/api/Scheduler/preset/PresetManager

Hi Mats,

where should startDate be added?
Here's a 1 min video showcasing the issue I have

https://www.youtube.com/watch?v=HJ0CYFuSK40

I'm using the official integration example, which uses hourAndDay viewPreset.

I re-tested it with another dataset and looks like it doesn't work. I've reopened a ticket https://github.com/bryntum/support/issues/5057
You could try to change weekStartDay in locale directly (if applicable in your case), it will be working (make sure date config in calendar is not starting before that day, otherwise another week will be shown on the left).

https://bryntum.com/docs/scheduler/api/Core/helper/DateHelper#property-weekStartDay-static
Here is example of the locale structure where this property should be defined.

const locale = {
    // ...
    DateHelper : {
        weekStartDay   : 1,
   // ...

Thanks Alex,

I've tried the locale solution, but for some reason on Sunday it jumps
here's a recording: https://www.loom.com/share/455b52138d234e3b9b8f498a6a1867cf

All I did was to add this:

const locale = {
    DateHelper: {
        weekStartDay: 1,
    }
}

LocaleManager.extendLocale('En', locale);