Hello,
I recently updated an app from 4.3.2 to 5.3.5 and while I was able to get everything else working, I cannot get left and right label to work as expected. I feel like I'm missing something obvious but just can't put my finger on it. Any help would be appreciated.
Here is my current label feature configuration object - I added the labelLayoutMode
and tried all 3 options with no change. If I comment out the left/right it works as expected with top and bottom labels displaying properly, but if I leave them there, all labels are vertically stacked on top of the eventRecord
.
config file:
labels : {
labelLayoutMode: 'measure',
left: {
field : 'mob_port_name',
renderer: ({ eventRecord }) => {
if (eventRecord.isResourceTimeRange) { return }
return eventRecord.mob_port_name + ' ( ' + eventRecord.mobilization_days +' )'
}
},
right: {
field : 'demob_port_name',
renderer: ({ eventRecord }) => {
if (eventRecord.isResourceTimeRange) { return }
return eventRecord.demob_port_name + ' ( ' + eventRecord.demobilization_days + ' )'
}
},
top: {
field: 'fullDuration',
renderer: ({ eventRecord }) => {
if (eventRecord.isResourceTimeRange) { return }
let startDay = eventRecord.startDate.getDate();
let startMonth = eventRecord.startDate.getMonth() + 1;
let endDay = eventRecord.endDate.getDate() - 1;
let endMonth = eventRecord.endDate.getMonth() + 1;
let duration = Math.floor(eventRecord.duration)
return `${startMonth}/${startDay}-${endMonth}/${endDay} (${duration})`;
}
},
bottom: {
renderer: ({eventRecord}) => {
if (eventRecord.isResourceTimeRange) { return }
return eventRecord.primary_proponent_name
}
}
},
Vue Component
<bryntum-scheduler
ref="scheduler"
:auto-height="true"
:columns="schedulerConfig.columns"
:resource-store="resourceStore"
:event-store="eventStore"
:time-ranges="timeRanges"
:start-date="lazyYearStart"
:end-date="lazyYearEnd"
:view-preset="schedulerConfig.viewPreset"
:row-height="schedulerConfig.rowHeight"
:bar-margin="schedulerConfig.barMargin"
:multi-event-select="schedulerConfig.multiEventSelect"
:resource-time-ranges="resourceTimeRanges"
:event-drag-feature="schedulerConfig.features.eventDrag"
:time-resolution="schedulerConfig.timeResolution"
:labels-feature="schedulerConfig.features.labels"
:resource-time-ranges-feature="true"
:event-context-menu-feature="false"
:schedule-context-menu-feature="false"
:event-edit-feature="false"
:event-menu-feature="false"
:schedule-menu-feature="false"
:time-axis-header-menu-feature="false"
:cell-edit-feature="false"
:cell-menu-feature="false"
:event-drag-create-feature="false"
:create-event-on-dbl-click="false"
:region-resize-feature="true"
:max-zoom-level="maxZoomLevel"
:min-zoom-level="minZoomLevel"
:time-ranges-feature="schedulerConfig.features.timeRanges"
:read-only="readOnlyScheduler"
@eventclick="eventClick"
@aftereventdrop="eventDrop"
/>