Premium support for our pure JavaScript UI components


Post by 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
2023-02-01_11-18-08.png (5.62 KiB) Viewed 160 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


Post by tasnim »


Post by peterjc »

Thankyou I will study the above


Post by 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
bottomaxis.png (17.32 KiB) Viewed 119 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
bottomaxis.png (17.32 KiB) Viewed 119 times

Is this at all possible?

Thanks in advance

Attachments
shifts.png
shifts.png (32.45 KiB) Viewed 119 times

Post by tasnim »

Yes. Sure

You could use an if statement to achieve that

ZD8mXquduC.png
ZD8mXquduC.png (91.8 KiB) Viewed 104 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;
                }
            }

Post Reply