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