Our pure JavaScript Scheduler component


Post by Exigo »

Hi,

I've got a problem filtering out non working time for intervals that are not aligned with the tick marks of the time axis. The following function does the filtering.

  /** Filter non-working days */
  public filterNonWorkingDays(): void {
    if (this.filterNonWorkingTime) {
      /** Hide non-wirking time */
      this.scheduler.timeAxis.filter((t) => this.scheduler.project.calendar.isWorkingTime(t.startDate, t.endDate));
    } else {
      /** Show non-wirking time */
      this.scheduler.timeAxis.clearFilters();
    }
  }

However, the implementation isn't all that good, since timeAxis ticks and non workings time intervals must line up to filter as intended. If they aren't we are left with small snippets of non working time with the filter on.

Suppose we have a activated the filter and the lowest tick mark/time axis granularity is 1 hour. If our work time interval is then set to 08:30AM - 03:00PM we are still left with 30 min non working time in the morning.

Without Filter:
Image

With Filter:
Image

Do you have a better idea or a solution to the problem?
The filter function we have implemented now, is from one of your examples.

The problem only gets worse when zooming out for larger tick mark intervals.

Kind regards, Exigo


Post by pmiklashevich »

Hello Exigo,

There are 2 ways to filter TimeAxis:

  • filter timeAxis as a store, for example using filterBy function;
  • generate ticks manually using generateTicks function.

In case you need to fine tune the time axis, you can use the tick generator. It accepts the start/end dates of the timeaxis and you need to return an array of ticks. This array will appear under the headers specified in view preset config. You can lear our https://bryntum.com/examples/scheduler/timeaxis/ demo. See second tab. (Css is fixed and header text will be aligned properly in next release). It generates 8:00 - 16:00 ticks and 10:00 - 16:00 for Friday. You can implement something similar. Just return a half an hour tick for the beginning of the working day, and 1 hour tick for other working hours. Skip non working intervals. See Scheduler/examples/timeaxis/view/SchedulerCustomTimeAxis2.js for details. When generate a tick zooming is not supported, please disable zoomOnMouseWheel and zoomOnTimeAxisDoubleClick.

            zoomOnMouseWheel          : false,
            zoomOnTimeAxisDoubleClick : false,

If you'd like to stick to the filterBy approach, please specify bottom level of the view preset to be half an hour.

If you want zooming to be supported you need to make sure every zoom level supports the configuration you specified for the timeaxis. How to specify zoom levels you can find here: https://www.bryntum.com/docs/scheduler/#Scheduler/preset/PresetManager

Cheers!

Pavlo Miklashevych
Sr. Frontend Developer


Post by Exigo »

Hi Pavel,

Thank you for your reply. We will look into it even though it wasn't the reply that we had hoped for.

Kind regards, Exigo


Post Reply