[ANGULAR] Event height + position

[marminddev]

Hi Bryntum Support,

I am trying to implement a 'compact view' option which should show the events with a reduced height.
The compact mode shall work with agenda view, as well as for the 'allDay' events within day/week view.

I have tried with 2 different approaches:

1. Adjust the event height within the renderer

This works for Agenda view, but the same approach does not work for day/week because the top position remains set based on the initially configured event height.

export const defaultEventRenderer = (data: ICalendarEventRendererData): string => {
  const model = data.eventRecord;
  const isCompactMode = model.initialData.visibilityOptions.compactMode;

  if (model.initialData.isAllDay) {
    data.renderData.eventHeight = isCompactMode ? 30 : 60;
  }

  return '<div>..my default template</div>';
};


export const defaultAgendaRenderer = (data: ICalendarEventRendererData): string => {
  const model = data.eventRecord;
  const isCompactMode = model.initialData.visibilityOptions.compactMode;

  data.renderData.eventHeight = isCompactMode ? 30 : 170;

  return '<div>..my agenda template</div>';
};

2. Provide the 'modes' input via the component template

This seems to work properly at first, but as soon as i switch the calendar mode (e.g. from week to day) I get an error: "RangeError: Maximum call stack size exceeded" resulting in a broken view.

This is an overview of what i did in this approach:

My calendar view component template:

<bryntum-calendar
  #calendar
  [config]="calendarConfig"
  [modes]="{
    day: {
      eventRenderer: eventRenderer,
      allDayEvents: {
        eventHeight: eventHeight
      }
    },
    week: {
      eventRenderer: eventRenderer,
      allDayEvents: {
        eventHeight: eventHeight
      }
    },
    agenda: {
      range: 'decade',
      eventRenderer: agendaEventRenderer
    }
  }"
  //...	
</bryntum-calendar>

Toggling the eventheight within the calendar component:

  @Input()
  public set compactMode(val: boolean) {
    if (this.internalCompactMode !== val) {
      this.internalCompactMode = val;
      this.eventHeight = val ? 30 : 60;
    }
  }

The error which i get after changing calendar mode:

[i]ERROR Error: Uncaught (in promise): RangeError: Maximum call stack size exceeded
RangeError: Maximum call stack size exceeded
    at Config.removeInitter (Config.js:396:9)
    at WeekView.set (Config.js:393:1)
    at WeekView.set (Config.js:395:19)
    at WeekView.set (Config.js:395:19)
    at WeekView.set (Config.js:395:19)
    at WeekView.set (Config.js:395:19)
    at WeekView.set (Config.js:395:19)
    at WeekView.set (Config.js:395:19)
    at WeekView.set (Config.js:395:19)
    at WeekView.set (Config.js:395:19)
    at resolvePromise (zone.js:1214:31)
    at resolvePromise (zone.js:1168:17)
    at zone.js:1121:17
    at zone.js:1137:33
    at asyncGeneratorStep (asyncToGenerator.js:10:1)
    at _next (asyncToGenerator.js:22:1)
    at asyncToGenerator.js:27:1
    at new ZoneAwarePromise (zone.js:1432:21)
    at asyncToGenerator.js:19:1
    at WeekView.show (Widget.js:4079:5)[/i]

Can you please advise if this functionality is supported and what would be the right approach?
Best regards

[Animal]

You don't have to have an eventRenderer. And in fact that will break it.

Just setting the height at the last moment will not allow it to calculate how much height it needs.

Set the eventHeight config of the allDayEvents

Screenshot 2023-12-11 at 11.54.58.png (695.1 KiB) Viewed 466 times

[marminddev]

Thanks for the fast reply. It helped and I have it working now.

Cheers!