Our pure JavaScript Scheduler component


Post by michael cohen »

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

Screenshot 2022-05-16 at 17.17.57.png
Screenshot 2022-05-16 at 17.17.57.png (498.98 KiB) Viewed 422 times

removed header class on resizing

Screen Recording 2022-05-17 at 11.18.51.mov
screen recording with bug
(2.39 MiB) Downloaded 41 times
Last edited by michael cohen on Tue May 17, 2022 10:21 am, edited 1 time in total.

Post by mats »

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).


Post by michael cohen »

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


Post by mats »

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.


Post by michael cohen »

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


Post by mats »

Sure, you can do this with simple DOM query:

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

Post by michael cohen »

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?


Post by mats »

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.


Post by michael cohen »

can you please provide an example how to do that?


Post by alex.l »

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');
      }
  }
  ]
}

All the best,
Alex


Post Reply