Our pure JavaScript Scheduler component


Post by michael cohen »

  private getViewPreset(): any {
    return {
      timeResolution: {
        unit: 'day',
        increment: 1,
      },

  headers: [
    {
      unit: 'day',
      align: 'center',
      renderer: (startDate, endDate) => {
      return `<div class="bob-date-column${this.selectedDay && this.selectedDay === dateToString(startDate) ? ' bob-header-clicked' : ''}">
             <strong class="dd-mmm">${DateHelper.format(startDate, 'DD')}</strong>
             <div class="ddd">${bottomDay}</div>
       </div>`;
      },
    },
  ],
  tickWidth: 28,
  tickHeight: 54
};
  }

when I add class in my HTML it does not look good (wanted a background for the whole header)

Screen Shot 2022-05-25 at 18.31.02.png
Screen Shot 2022-05-25 at 18.31.02.png (6.11 KiB) Viewed 219 times

Post by alex.l »

Please check this property https://bryntum.com/docs/scheduler/api/Scheduler/preset/ViewPresetHeaderRow#config-headerCellCls
In your example you set style to your own div and not to the cell. The way to add cls for header cell itself is to use that property. It's also achievable with https://bryntum.com/docs/scheduler/api/Scheduler/preset/ViewPresetHeaderRow#config-renderer
Example from docs:

function (startDate, endDate, headerConfig, i) {
  headerConfig.align = "start"; // applies special CSS class to align header left
  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 by michael cohen »

That helps thanks :)


Post Reply