Our pure JavaScript Scheduler component


Post by beotech »

First let's customize your demo example "non working times" and provide this calendar:

"calendars": {
    "rows": [{
        "id": "workhours",
        "name": "Working hours",
        "unspecifiedTimeIsWorking": false,
        "intervals": [{
                "recurrentStartDate": "at 8:30",
                "recurrentEndDate": "at 12:30",
                "isWorking": true
            },
            {
                "recurrentStartDate": "at 13:30",
                "recurrentEndDate": "at 17:30",
                "isWorking": true
            }
        ]
    }]
}

As a result, we can still see gray areas corresponding to non working times event if their are supposed to be filtered out :

non working times.PNG
non working times.PNG (69.21 KiB) Viewed 861 times
non working times 2.PNG
non working times 2.PNG (62.76 KiB) Viewed 861 times

How can we hide these remaining gray areas ?

If there is no easy solution, would it be possible to use the override plugin mechanism or extend the TimeAxis class to override its 'generateTicks' method ?

Thank you for providing us with some starting code in this case.


Post by alex.l »

To create non-continuous TimeAxis you have to override generateTicks method, as you already mentioned. https://bryntum.com/docs/scheduler/#Scheduler/data/TimeAxis#function-generateTicks

To see an example please check https://bryntum.com/examples/scheduler/timeaxis/ example and navigate to "Compressed non-working time" tab.

All the best,
Alex

All the best,
Alex


Post by beotech »

If we go for a customized class extending TimeAxis, how can we provide it to the scheduler ?

It does not work like this :

scheduler = new SchedulerPro({
      startDate: project.startDate,
      endDate: project.endDate,
      project: project,
      features: this.buildFeatures(),
      columns: this.buildColumns(),
      viewPreset: this.buildViewPreset(),
      listeners: this.buildListeners(),
      timeAxis: new BeoTimeAxis()
    });

Here is our custom class :

import { TimeAxis, DateHelper } from 'bryntum-schedulerpro';

export default class BeoTimeAxis extends TimeAxis {
  
static get type() { return 'beotimeaxis'; } // @ts-ignore generateTicks(axisStartDate, axisEndDate, unit = this.unit, increment = this.increment) { console.warn('generateTicks', axisStartDate); console.warn('generateTicks', axisEndDate); console.warn('generateTicks', unit); console.warn('generateTicks', increment); const me: any = this; const ticks = []; const usesExclusion = Boolean(me.include); let intervalEnd; let tickEnd; let isExcluded; let dstDiff = 0; let { startDate, endDate } = me.getAdjustedDates(axisStartDate, axisEndDate); me.tickCache = {}; if (usesExclusion) { me.initExclusion(); } while (startDate < endDate) { intervalEnd = DateHelper.getNext(startDate, unit, increment, me.weekStartDay); if (!me.autoAdjust && intervalEnd > endDate) { intervalEnd = endDate; } // Handle hourly increments crossing DST boundaries to keep the timescale looking correct // Only do this for HOUR resolution currently, and only handle it once per tick generation. if (unit === 'hour' && increment > 1 && ticks.length > 0 && dstDiff === 0) { const prev = ticks[ticks.length - 1]; dstDiff = ((prev.startDate.getHours() + increment) % 24) - prev.endDate.getHours(); if (dstDiff !== 0) { // A DST boundary was crossed in previous tick, adjust this tick to keep timeaxis "symmetric". intervalEnd = DateHelper.add(intervalEnd, dstDiff, 'hour'); } } isExcluded = false; if (usesExclusion) { tickEnd = new Date(intervalEnd.getTime()); isExcluded = me.processExclusion(startDate, intervalEnd, unit); } else { tickEnd = intervalEnd; } if (me.generateTicksValidatorFn(startDate) && !isExcluded) { ticks.push({ id: (ticks.length + 1), startDate, endDate: intervalEnd }); me.tickCache[startDate.getTime()] = ticks.length - 1; } startDate = tickEnd; } return ticks; } } // Register this widget type with its Factory BeoTimeAxis.initClass();

Post by alex.l »

What exactly doesn't work for you?

Did you check our docs? https://bryntum.com/docs/scheduler-pro/#Scheduler/data/TimeAxis
And example I provided? https://bryntum.com/examples/scheduler/timeaxis/
Did you change https://bryntum.com/docs/scheduler/#Scheduler/data/TimeAxis#config-continuous to false as it described here https://bryntum.com/docs/scheduler-pro/#Scheduler/data/TimeAxis ?

The time axis can be continuous or not. In continuous mode, each timespan starts where the previous ended, and in non-continuous mode there can be gaps between the ticks. A non-continuous time axis can be used when want to filter out certain periods of time (like weekends) from the time axis.

Please describe in more details what exactly doesn't work for you. If you still have problems, please try to attach a runnable test case here, so we will have a full picture what is going on there. Right now I see the only problem - https://bryntum.com/docs/scheduler/#Scheduler/data/TimeAxis#config-continuous flag.

All the best,
Alex

All the best,
Alex


Post by beotech »

Yes of course we have reviewed your docs and the examples.
But when it comes to extending your classes we must say it's quite the tricky way to get it working...

Please find runnable test case attached.
The scheduler is not displayed and there is a JS error in the console :

non working times 3.PNG
non working times 3.PNG (39.37 KiB) Viewed 852 times

Any thoughts on what could be the issue ?


Post by alex.l »

Hi beotech,

Thanks for your test case. That looks like a bug. I've opened a ticket here: https://github.com/bryntum/support/issues/2484
But I have a workaround. Try to pass viewPreset config.

timeAxis: new BeoTimeAxis({
    viewPreset: 'dayAndWeek' // use the value you need
}),

All the best,
Alex

All the best,
Alex


Post Reply