How can I highlight/shade the non workday columns?

[amorimluc]

Hey, I noticed on some demos that the non-workdays are highlighted a darker gray. How can we replicate this?

[marcio]

Hey amorimluc,

Which demo are you referring to?

You can override the default CSS with the following CSS rule (as an example):

.b-grid-body-container .b-sch-range.b-sch-nonworkingtime {
    background : repeating-linear-gradient(-55deg, #ddd, #ddd 10px, #eee 5px, #eee 20px);
}

[amorimluc]

Hi marcio,

In this demo for instance: https://bryntum.com/products/gantt/examples/frameworks/react/javascript/advanced/build/

That css isn't working for me. Do I need to maybe first set which days of the week are non-working? How can I do that?

[marcio]

Hey,

Sorry, for Gantt you need to use a different selector.

.b-sch-nonworkingtime-canvas .b-sch-range.b-sch-nonworkingtime {
    background : repeating-linear-gradient(-55deg, #ddd, #ddd 10px, #eee 5px, #eee 20px);
}

[amorimluc]

It's still not working, but probably because I haven't figured out yet how to define the working days correctly on the gantt configs. How should I go about doing this? I've tried a few things with no luck. Like adding this to the config:

    timeAxis: {
        nonWorking: {
            repeat: 'daily',
            dayOfWeek: [0, 6]  // 0 = Sunday, 6 = Saturday
        }
    }

[marcio]

Hey,

Please take a look at our guides to understand how to configure the calendar data to have non-working time set correctly.
https://bryntum.com/products/gantt/docs/guide/Gantt/basics/calendars#availability-intervals
https://bryntum.com/products/gantt/docs/api/Scheduler/feature/NonWorkingTime

You need to set a non-working interval in your calendar data to have that interval displayed in your Gantt.

As an example (that is used on basic Gantt demo)

{
        "id"        : "general",
        "name"      : "General",
        "intervals" : [
          {
            "recurrentStartDate" : "on Sat at 0:00",
            "recurrentEndDate"   : "on Mon at 0:00",
            "isWorking"          : false
          }
        ],
        "children" : [
          {
            "id"        : "business",
            "name"      : "Business",
            "intervals" : [
              {
                "recurrentStartDate" : "every weekday at 12:00",
                "recurrentEndDate"   : "every weekday at 13:00",
                "isWorking"          : false
              },
              {
                "recurrentStartDate" : "every weekday at 17:00",
                "recurrentEndDate"   : "every weekday at 08:00",
                "isWorking"          : false
              }
            ]
          },
          {
            "id"        : "night",
            "name"      : "Night shift",
            "intervals" : [
              {
                "recurrentStartDate" : "every weekday at 6:00",
                "recurrentEndDate"   : "every weekday at 22:00",
                "isWorking"          : false
              }
            ]
          }
        ]
      }

[amorimluc]

Marcio,

Unfortunately we're still struggling. Our stack is Rails with vanilla JS. We use the gantt.umd.js file, version 6.0.1.

Here is the relevant code:

var Gantt = window.bryntum.gantt.Gantt;
    var ProjectModel = window.bryntum.gantt.ProjectModel;
    var Calendar = window.bryntum.gantt.CalendarModel;
    var StateTrackingManager = window.bryntum.gantt.StateTrackingManager;
    var LocaleHelper = window.bryntum.gantt.LocaleHelper;
    var LocaleManager = window.bryntum.gantt.LocaleManager;
    var DateHelper = window.bryntum.gantt.DateHelper;
    var HasPercentDoneMixin = window.bryntum.gantt.HasPercentDoneMixin;
    class MyProjectModel extends HasPercentDoneMixin.derive(ProjectModel) {}

LocaleHelper.publishLocale(CONSLOG.bryntum_pt_br);
LocaleHelper.publishLocale(CONSLOG.bryntum_es);

//LocaleManager.throwOnMissingLocale = true;

if (CONSLOG.locale == "br")
  LocaleManager.locale = 'PtBr';

if (CONSLOG.locale == "es")
  LocaleManager.locale = 'Es';

const calendar = new Calendar({
  id: 'general',
  intervals: [
      {
          recurrentStartDate: 'on Sat at 0:00',
          recurrentEndDate: 'on Mon at 0:00',
          isWorking: false
      }
  ]
});

const project = new MyProjectModel({
  taskStore : {
    transformFlatData : true
  },
  // loadUrl: `/${CONSLOG.locale}/projects/${CONSLOG.project_id}/schedules/${schedule_id}/tasks/load`, // URL for data loading
  // syncUrl: `/${CONSLOG.locale}/projects/${CONSLOG.project_id}/schedules/${schedule_id}/tasks/sync`, // URL for data saving
  transport : {
    load : {
        url : `/${CONSLOG.locale}/projects/${CONSLOG.project_id}/schedules/${schedule_id}/tasks/load`, // URL for data loading
        requestConfig: {
          headers: {
            'X-CSRF-Token': csrfToken
          }
        }
    },
    sync : {
        url : `/${CONSLOG.locale}/projects/${CONSLOG.project_id}/schedules/${schedule_id}/tasks/sync`, // URL for data saving
        requestConfig: {
          headers: {
            'X-CSRF-Token': csrfToken
          }
        }
    }
  },
  autoLoad: true,
  autoSync: true,
  stm: new StateTrackingManager({
    autoRecord: true
  }),
  calendar: 'general'
});

project.calendarManagerStore.add(calendar);

// create the Bryntum Gantt instance and append to body
const gantt = new Gantt({
  appendTo: "gantt_here",
  project,
  features : {
    excelExporter : {
        // Choose the date format for date fields
        dateFormat : 'YYYY-MM-DD HH:mm'
    },
    mspExport : true,
    //xerExport: true,
    taskMenu : {
      items : {
          // Add extra Export menu item available on all tasks
          exportToIcs : {
              icon   : 'b-fa b-fa-calendar-alt',
              text   : 'Add to Calendar (.ics)',
              weight : 900,
              onItem({ taskRecord }) {
                  taskRecord.exportToICS({
                      // Here you can add some custom ICS values (See https://tools.ietf.org/html/rfc5545 for more information)
                  });
              }
          }
      }
    },
    pdfExport : {
      exportServer: 'https://dev.bryntum.com:8082',
      // Required for font-awesome icons to display correctly
      
      // headerTpl,
      // footerTpl
    },
    rowReorder : {
      showGrip : true
    },
    nonWorkingTime : true
  },
  columns: [
    { type: 'wbs', width: 30 },
    { type: 'name', width: 250, text: CONSLOG.T.activity[CONSLOG.locale]},
    { type: 'startdate', width: 50 },
    { type: 'enddate', width: 50 },
    { type: 'duration', width: 50 },
    { type: 'resourceassignment', width: 100, text: CONSLOG.T.resources[CONSLOG.locale] },
    { text: CONSLOG.T.percent_done[CONSLOG.locale], field: 'percentDone', type : 'percentdone', showCircle : true, width : CONSLOG.locale != 'en' ? 75 : 50, sortable: false, group: false, editor: false},
  ],
  rowHeight: 35
});

The behavior I see with this code is that for a split second it flashes some styling for the non working day columns, but then it disappears. Please check the attached screenshots showing this. And when I search the HTML after for the class b-sch-nonworkingtime, there are no instance of it.

[marcio]

Hey amorimluc,

That happens because you set the calendar using inline data when creating the Gantt, but then you're using Ajax request to load the tasks, you need to use only one of them.

If you're not able to pass the calendar data from your endpoint, you need to set it like this

const project = new MyProjectModel({
  taskStore : {
    transformFlatData : true
  },
  // loadUrl: `/${CONSLOG.locale}/projects/${CONSLOG.project_id}/schedules/${schedule_id}/tasks/load`, // URL for data loading
  // syncUrl: `/${CONSLOG.locale}/projects/${CONSLOG.project_id}/schedules/${schedule_id}/tasks/sync`, // URL for data saving
  transport : {
    load : {
        url : `/${CONSLOG.locale}/projects/${CONSLOG.project_id}/schedules/${schedule_id}/tasks/load`, // URL for data loading
        requestConfig: {
          headers: {
            'X-CSRF-Token': csrfToken
          }
        }
    },
    sync : {
        url : `/${CONSLOG.locale}/projects/${CONSLOG.project_id}/schedules/${schedule_id}/tasks/sync`, // URL for data saving
        requestConfig: {
          headers: {
            'X-CSRF-Token': csrfToken
          }
        }
    }
  },
  autoLoad: true,
  autoSync: true,
  stm: new StateTrackingManager({
    autoRecord: true
  }),
  calendarManagerStore: {
            data: [calendar]
        },
  calendar: 'general'
});

[amorimluc]

Hi marcio,

I added that calendarManagerStore bit but the same exact issue I described last time is still happening, nothing changed.

[amorimluc]

So I found out here that the problem is that we are not syncing/saving calendar intervals correctly. When I import an mpp file it all works correctly and the non working days show with the correct styling on the gantt chart. The front end JS import loads the calendar intervals properly. But when syncing the imported data calendar intervals are not getting saved. Is there a demo or some example code that shows how we should be syncing calendar interval data? In particular when importing from mpp (where apparently interval data is nested in the calendar data)