[REACT] How do I prevent the nonWorkingTime calculations on the gantt?

[abhilashlr]

I would need to only use the nonWorkingTime as a display where it shows the weekends highlighted, but when a task is dragged/resized I'd not want the gantt to perform any holiday calculations, but instead just use the date as is. is there a config or way to solve it?

Thanks in advance

[mats]

Please read guide about Calendars, there you will learn how to define weekends as working time. https://bryntum.com/docs/gantt/#guides/calendars.md

[abhilashlr]

Thanks mats, I did take a look at the Calendars docs and couldn't find a way to say nonWorkingTime setting of a calendar is only for ui and not for Gantt calculations of a task's start/end date. The assumption is, if a project's tasks are manuallyScheduled then the complete control relies on the user who does it themselves. But this doesn't seem to be the case. Can you please help?

[alex.l]

Hi abhilashlr,

In case you need only visual styling, please use https://bryntum.com/docs/gantt/#Scheduler/feature/TimeRanges instead.
We have a demo here: https://bryntum.com/examples/scheduler/timeranges/

[abhilashlr]

Hi abhilashlr,

In case you need only visual styling, please use https://bryntum.com/docs/gantt/#Scheduler/feature/TimeRanges instead.
We have a demo here: https://bryntum.com/examples/scheduler/timeranges/

This would mean, we construct the weekend for Saturday and Sunday manually across the gantt view and pass it on. I'm sorry I might not follow this timeranges thing properly. I would like to set all weekends of a money to be greyed like how it happens when a calendar is added with nonWorkingTime.

[saki]

If you want repeating Saturday/Sunday to be shown then you would probably want recurrence in time ranges. The best way is to study demo Scheduler: Recurring Time Ranges (I know it is Scheduler but Gantt extends Scheduler so it will work in Gantt too.)

You only need to enable timeRangesFeature and to have the correct data. The demo data:

    "timeRanges" : {
        "rows" : [
            {
                "id"             : 1,
                "name"           : "Morning coffee",
                "recurrenceRule" : "FREQ=WEEKLY;BYDAY=MO;",
                "startDate"      : "2019-02-07 08:00"
            },
            {
                "id"             : 2,
                "name"           : "Friday, yay",
                "recurrenceRule" : "FREQ=WEEKLY;BYDAY=FR;",
                "startDate"      : "2019-02-07 00:00",
                "endDate"        : "2019-02-08 00:00"
            }
        ]
    }

The recurrence rule syntax follows RFC-5545

[abhilashlr]

saki, thank you for your help with code. I've tried this before but it didn't work for me.

Here's my code:

export const MyComponent = () => {
  const ganttRef = useRef<any>(null);
  const timeRanges = {
    timeRanges: [
      {
        id: 1,
        name: 'Saturday',
        recurrenceRule: 'FREQ=WEEKLY;BYDAY=SA;',
        startDate: '2021-02-06 00:00',
        duration: 1,
      },
      {
        id: 2,
        name: 'Sunday',
        recurrenceRule: 'FREQ=WEEKLY;BYDAY=SU;',
        startDate: '2021-02-07 00:00',
        duration: 1,
      },
    ],
  };
  const config = {
    project: <data fetched from api>
  }

  return <BryntumGantt {...config} ref={ganttRef} timeRangesFeature={timeRanges} />;
};

It only shows up once in the Gantt view on the specific date.

[abhilashlr]

Here's a screenshot of what I can see in my Gantt view

Screenshot 2021-02-17 at 8.48.46 AM.png (17.7 KiB) Viewed 1209 times

ideally it should have the same Saturday and Sunday on Feb 13,14 20201. Inspected console and I could only see one "Saturday" present (just to be sure it isn't hiding behind in CSS)

[alex.l]

Please check our docs: https://bryntum.com/docs/gantt/#Scheduler/feature/TimeRanges
The data for timeRanges should be set directly to the Gantt's config, not into the feature.

export const MyComponent = () => {
  const ganttRef = useRef<any>(null);
  const  timeRanges: [
      {
        id: 1,
        name: 'Saturday',
        recurrenceRule: 'FREQ=WEEKLY;BYDAY=SA;',
        startDate: '2021-02-06 00:00',
        duration: 1,
      },
      {
        id: 2,
        name: 'Sunday',
        recurrenceRule: 'FREQ=WEEKLY;BYDAY=SU;',
        startDate: '2021-02-07 00:00',
        duration: 1,
      },
    ];
    


  return <BryntumGantt {...config} ref={ganttRef} timeRangesFeature="true" timeRanges={timeRanges} />;
};

All the best,
Alex

[abhilashlr]

Hey alex, I tried this as well, but doesnt seem to be recurring. I see the same as in the previous screenshot I've shared. I'm using version 4.0.8 of BryntumGantt.