Bryntum Support Forums

Hello team,
I'm trying to add/remove custom class to header cell on click but without luck. Could you please point me if some similar functionality as 'cls' property in rows exist for header? Thanks

need to do something like that

removed header class on resizing

Here's a working snippet:

scheduler.on('timeAxisHeaderClick', ({ event }) => event.target.closest('.b-sch-header-timeaxis-cell').classList.toggle('foo'))

It won't persist if you zoom or change view (would need to store selections yourself in a map for example).

Is it possible to save selection without listening any other event?
For now I just store selection and check it on 'timelineviewportresize'

Since we don't support this, I'm afraid it's something you have to implement. If you would like this to be supported in the core, we are open for a feature sponsorship. Please reach out to sales[at]bryntum for a quote if interested.

Is there are a way how I can access to all header cells? Thanks

Sure, you can do this with simple DOM query:

const cells = scheduler.element.querySelectorAll('.b-sch-header-timeaxis-cell');

If I to make sure the 1st of June 2022 header (just for example) always will contain class 'foo' now this is always changing back (like in resize, change date ect..).

thought about listening to some event and make sure its there. but what event should I listen to?

You should add this CSS class in the https://bryntum.com/docs/scheduler/api/Scheduler/preset/ViewPresetHeaderRow#config-renderer method, then you don't need to listen to any events, and it's all managed.

can you please provide an example how to do that?

Please check this code example. headerConfig has headerCellCls. startDate and endDate helps you to identify the tick.

viewPreset : {
  base    : 'hourAndDay',
  id      : 'myHourAndDayPreset',
  headers : [
      {
          unit      : "hour",
          increment : 12,
          renderer  : (startDate, endDate, headerConfig, cellIdx) => {
            headerConfig.headerCellCls = "myClass"; // will be added as a CSS class of the header cell DOM element

        return DateHelper.format(startDate, 'YYYY-MM-DD');
      }
  }
  ]
}