Our powerful JS Calendar component


Post by tdset »

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?


Post by marcio »

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?

Best regards,
Márcio


Post by tdset »

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


Post by tasnim »

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


Post by mats »

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.


Post by tdset »

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


Post by mats »

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


Post by tdset »

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.


Post by alex.l »

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,
   // ...

All the best,
Alex


Post by tdset »

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);

Post Reply