[ANGULAR] - Can we a custom uneven header section in the the scheduler timescales

[peterjc]

Hi, is is possible to define a "custom uneven header section "?

Probably best explained with a picture...

2023-02-01_11-18-08.png (5.62 KiB) Viewed 98 times

So the "D" columns are a uneven sets of times during the day (think if different shifts or different lengths during the day)

Thanks in advance for any information

[tasnim]

Hello,

Please check this example about viewPreset configuration https://bryntum.com/products/scheduler/examples/configuration/
And you could also check this https://bryntum.com/products/scheduler/examples/timeaxis/ about timeAxis

Please check these docs too
https://bryntum.com/products/scheduler/docs/api/Scheduler/preset/ViewPreset
https://bryntum.com/products/scheduler/docs/api/Scheduler/data/TimeAxis#config-generateTicks

Isn't it what you were looking for?

[peterjc]

Thankyou I will study the above

[peterjc]

Hi I Had a good look at all of the above.

Using the the generateTicks looks the closest, but this seems to just be for the bottom most header?

Ie if I add a colsole.log...

 timeAxis : {
                continuous : false,

            generateTicks(start, end, unit, increment) {
                const ticks = [];
                console.log(unit);  // <-- added by me
                while (start < end) {
                ...

it only even seems to be called for the bottom axis...

bottomaxis.png (17.32 KiB) Viewed 57 times

I was more after having an "upper" header that can group different number of hours together.

Eg as below, shift 1 has less hours than shift 2. Note in my case the times WILL be continuous

bottomaxis.png (17.32 KiB) Viewed 57 times

Is this at all possible?

Thanks in advance

[tasnim]

Yes. Sure

You could use an if statement to achieve that

ZD8mXquduC.png (91.8 KiB) Viewed 42 times

This is the code I used to achieve that

            timeAxis : {
                continuous : false,
                generateTicks(start, end, unit, increment) {
                    const ticks = [];
                    while (start < end) {
                        // if it's Monday and Wednesday
                        if (start.getDay() === 1 || start.getDay() === 3) {
                            // Do the following
                            if (unit !== 'hour' || start.getHours() >= 7 && start.getHours() <= 12) {
                                ticks.push({
                                    id        : ticks.length + 1,
                                    startDate : start,
                                    endDate   : DateHelper.add(start, increment, unit)
                                });
                            }
                        } else {
                            if (unit !== 'hour' || start.getHours() >= 8 && start.getHours() <= 21) {
                                ticks.push({
                                    id        : ticks.length + 1,
                                    startDate : start,
                                    endDate   : DateHelper.add(start, increment, unit)
                                });
                            }
                        }
                        start = DateHelper.add(start, increment, unit);
                    }
                    return ticks;
                }
            }