Our pure JavaScript Scheduler component


Post by Valentin »

Hi,

I'm trying to implement something like row dynamic height. On column render, I find an event with max value and set row height by it. It looks good but ... When I have more than one item in a cell of a row, height wrong and second event puts not at the bottom of the first.

How can I fix it?
Screen Shot 2019-12-02 at 15.26.19.png
Screen Shot 2019-12-02 at 15.26.19.png (126.29 KiB) Viewed 1245 times

Post by saki »

It looks weird because the default handling of overlapping events is to stack them one upon the other. Could the problem come from your code?
Screen Shot 2019-12-02 at 21.32.12.png
Screen Shot 2019-12-02 at 21.32.12.png (113.88 KiB) Viewed 1240 times

Post by Valentin »

Here my column config where I'm trying to change row height depends on the max value of an event in the row.

export const columnsConfig = [
  {
    type: 'tree',
    text: 'Employees',
    field: 'name',
    width: '15em',
    // Hide default tree icons
    expandedFolderIconCls: null,
    collapsedFolderIconCls: null,
    leafIconCls: null,
    htmlEncode: false,
    renderer({ record, size, row }: { record: any, size: any, row: any }) {
      if (!record.isParent) {
        // row height by max event weight
        if (record.events.length) {
          const maxEvent = maxBy(record.events, (event: any) => event.minutes);
          const eventMinutes = maxEvent.minutes;
          let makeHeight = eventMinutes / 10 * 2 + 4;
          if (makeHeight < 54) makeHeight = 58;
          const eventHeight = makeHeight;

          size.height = eventHeight;
        }
        const childTemplate = generateChildTemplate(record);

        return childTemplate;
      }

      const parentTemplate = generateParentTemplate(record);

      return parentTemplate;
    }
  }
];
Also, I change event height depends on the event minutes value
my event render config:

export const eventRendererConfig = ({
  tplData,
  resourceRecord,
  eventRecord
}: {
  tplData: any;
  resourceRecord: any;
  eventRecord: any;
}) => {
  if (resourceRecord.isParent) {
    tplData.wrapperCls += ' employee parent ';
  } else {
    tplData.wrapperCls += ' child ';
  }

  tplData.wrapperCls += ' b-sch-event-team ';

  const projectColor =
    resourceRecord.parent.data.type === 'employee'
      ? resourceRecord.parent.data.color
      : resourceRecord.data.color;

  const projectTextColor = blackWhiteColor(projectColor);

  const eventMinutes = eventRecord.data.minutes;
  const eventHours = eventMinutes / 60;

  let makeHeight = eventMinutes / 10 * 2;
  if (makeHeight < 54) makeHeight = 54;
  tplData.height = makeHeight;

  const styleWrapper = `
    background: #${projectColor};
  `;

  const layout = `
  <div class="event-wrapper event-text-${projectTextColor}" style="${styleWrapper}">
    <div>
      <div class="event-parent-name">${resourceRecord.data.name}</div>
      <div class="event-name">${resourceRecord.parent.data.name}</div>
    </div>
    <div>
      <div class="event-hours event-hours-shadow">${eventHours}h</div>
    </div>
  </div>
  `;

  return layout;
};


I want to change row height depends on event(s) height and change event height depends on event value (minutes).

It is possible?

Post by saki »

The logic looks good, there must be a minor bug perhaps. Also, the column type should probably not be 'tree' for the scheduler events. I could be for resources, though. Scheduler events are actually rendered in one grid column.

Post Reply