Add HTML content support for the ResourceTimeRange feature

[marciogurka]

Forum post

"Hi, Is there any body rendered event for the resource time range? or html content is supported for the name property? What I want to achieve you can see in the attached mockup.
Following this demo:
https://bryntum.com/products/scheduler/examples/resourcetimeranges/"

As you can see in the documentation

The name property currently supports only a string.

[pmiklashevych]

This is a quick workaround. Please share with the user. I cannot post to the forums due to missing subscription.

import { ResourceTimeRanges, Override } from '@bryntum/schedulerpro';

// Use it until https://github.com/bryntum/support/issues/5839 is fixed
class ResourceTimeRangesOverride {
  static get target() {
    return {
      class: ResourceTimeRanges,
      product: 'schedulerpro',
    }
  }

  // Provides renderer for ResourceTimeRanges
  onEventDataGenerated(renderData) {
    const { eventRecord } = renderData;

    // Calls node_modules/@bryntum/schedulerpro/source/lib/Scheduler/feature/base/ResourceTimeRangesBase.js::onEventDataGenerated
    this._overridden.onEventDataGenerated.call(this, renderData);

    // Calls node_modules/@bryntum/schedulerpro/source/lib/Scheduler/feature/ResourceTimeRanges.js::shouldInclude
    // If true, eventRecord is a ResourceTimeRange
    if (this.shouldInclude(eventRecord)) {
      // Remove text
      delete renderData.eventContent.text;

      // Add html
      renderData.eventContent.html = `
        <div class="reservation">
          <div class="reservation-amount">${eventRecord.reservationAmount}</div>
          <div class="reservation-price">${eventRecord.name}</div>
          <div class="reservation-minNight">${eventRecord.minNight}</div>
        </div>
      `;
    }
  }
}

Override.apply(ResourceTimeRangesOverride);

[matsbryntse]

@pmiklashevych This is now fixed as part of 4922! I've added you to our license too so you can post in the forums :)
Duplicate of #4922