Our pure JavaScript Scheduler component


Post by vincent.auger »

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"
                />

Post by marcio »

Hey vincent.auger,

Could you share a sample of the data that you're using in this scenario? Also, if you could assemble a sample project with your configuration, would make it a lot faster/easier for us to debug. You can get one of our demos and add the label's configuration with the data that you're using, zip it, and share it here - check the guidelines for more information https://www.bryntum.com/forum/viewtopic.php?f=1&t=772

Best regards,
Márcio


Post by vincent.auger »

Hello mario,

Thank you for the quick response. Yes, I will prepare a package. I was hoping something obvious had changed in the configuration object.

Here is a typical event object

{
    "id": 649,
    "name": "Mission Name",
    "primary_proponent_name": "John Doe",
    "mob_port_id": 246,
    "demob_port_id": 246,
    "mob_port_name": "Richmond (BC)",
    "demob_port_name": "Richmond (BC)",
    "mission_start_date": "2023-04-01",
    "mission_end_date": "2023-04-08",
    "window_start_date": "2023-04-01",
    "window_end_date": "2024-03-30",
    "mobilization_days": "0.00",
    "demobilization_days": "0.00",
    "ship_time_request_id": 711,
    "notes": null,
    "approved_berths": 0,
    "resizable": false,
    "regional": true,
}

The EventModel used for the above data:

import { EventModel } from '@bryntum/scheduler'

export default class MissionEventModel extends EventModel{

    static get fields(){
        return [
            { name: 'startDate', dataSource: 'mission_start_date', type: 'date', format: 'YYYY-MM-DD' },
            { name: 'endDate', dataSource: 'mission_end_date', type: 'date', format: 'YYYY-MM-DD' },
            { name: 'resourceId', dataSource: 'ship_time_request_id' },
            { name: 'window_start_date', type: 'date', format: 'YYYY-MM-DD'},
            { name: 'window_end_date', type: 'date', format: 'YYYY-MM-DD'}
        ];
    }

}

Post by marcio »

Hey vincent,

As there are several versions released between 4.3.2 and 5.3.5, is not that obvious to identify changes, but you can search for it here https://bryntum.com/products/scheduler/docs/api/apidiff

Also, could you share the configuration of your Scheduler? Or the project that you're assembling, I wasn't able to check the issue that you mentioned with the snippets that you shared.

Best regards,
Márcio


Post by vincent.auger »

Hello Marcio,

Figure it out today ... I was using a custom CSS file that I forgot to update... Works as expected now.

Thank you for your help!


Post by marcio »

Hello vincent.auger,

Glad that is all working now! Don't hesitate to contact us if you need any help. :)

Best regards,
Márcio


Post Reply