[ANGULAR] Modify Columnline between Sunday and Monday

[DevMeData]

Hi guys

in your examples i can see that there is a vertical line to indicate a new week is starting.
Unfortunetly in my scheduler all columnlines are equal. I don't get it where to change the configuration approriate.

BR Holger

[alex.l]

Hi Holger,

It only depends on active ViewPreset (zoom level) that is currently shown. Bolder lines show for top level headers and not configurable for week days. If you will use the same zoom level (viewPreset), you'll see the same result.

Docs:
https://bryntum.com/docs/scheduler/api/Scheduler/feature/ColumnLines
https://bryntum.com/docs/scheduler/api/Scheduler/preset/ViewPreset

[DevMeData]

Hi Alex

thx for the quick reply.
i changed the color of the column lines to check whether there is a difference between the "normal" and the "Sunday-Monday" line.

.b-column-line{
    background-color: blue;
}

All column lines except this one between Sunday and Monday display the above modified color.
How can i modify the appearing of this special one between Sunday and Monday. This one still remains "light-gray". That would be my perfect solution.

All the best back
Holger

[Animal]

That's a major column line. You can see them in your DOM:

Screenshot 2022-01-19 at 11.28.25.png (411.72 KiB) Viewed 498 times

[DevMeData]

Hi Animal
i know this css column line, but it is not the line which i mentionend.
In screen 1 you see the different lines. The one between Sunday and Monday is gray.
In screen 2 you will notice that this line has the b-column-line css class but it appears different.
Technically it's exactly what i want to display a seperator line between these days but i like to modify the apperance of this line.

BR Holger

[Animal]

Looks like your ViewPreset only has one level of ticks. Days.

If you used one which was weeks over days, such as the system supplied dayAndWeek one, then it would show .b-column-line-major lines between weeks:

scheduler.viewPreset = {
    base      : 'dayAndWeek',
    tickWidth : <how wide you want the day ticks in pixels>
}

[DevMeData]

I extend according to your post the configuration of the viewPreset.

            base : 'dayAndWeek',
            timeResolution: {
                unit: 'day',
                increment: 1
            },
            headers: [
                {
                    unit    : 'week',
                },                

                {
                    unit: 'day',
                    increment: 1,
                    }
                }

Screen 3
The line is now between Saturday and Sunday. Localization issue? In Germany week is from monday to sunday.
Even i don't want to display the calendar week in the header.
Sorry for the inconvenience.

Holger

[Animal]

You need to update your locale file to define your week start day as Monday.

 DateHelper : {
            weekStartDay   : 1
}

[Animal]

If you don't want to see the week part of the header, you could add

.b-sch-header-row-0 {
    display: none;
}

to your CSS

[DevMeData]

Yep. Many thx. That's perfect.