[REACT] Scheduler customizations URGENT

Post by **manirajan s** » Fri Aug 29, 2025 11:05 am

Custom Column Rendering in Bryntum Scheduler

Hello Bryntum

I have a few questions about column rendering and customization in the Bryntum Scheduler component:

1. Custom Components in Columns

Currently, I'm using the standard resource columns configuration:

columns: [
    {
        type: "resourceInfo",
        text: "Name",
        field: "name",
        showEventCount: false,
        width: 150,
    },
],

How can I render custom components in these columns instead of the standard resource information? My user wants to show completely customized content that doesn't necessarily match the resource array structure.

2. Resource Formatting Standards

I noticed that when I provide id and iconCls properties in my resource objects, the Scheduler automatically renders the icons properly:

resources: [
    { id: 1, name: "Truck 1", iconCls: "b-fa b-fa-truck", image: false },
    // ...
]

Is this a standard format recommended by Bryntum? Are there other special properties that will be automatically rendered in the resource columns?

3. How achieve the given style ?

How can I achieve the same customization in the Bryntum Scheduler ?

https://ramcosystems-my.sharepoint.com/:i:/g/personal/16743_ramco_com/EcdQRWaAwrdLtyfH2KnUwz4B-lVyu96piN2Wctg6Bip8hw?e=Hkme1h

4. Event Cell Customization

I'd like to add a "Trip ID" to each event cell in the Scheduler. What's the recommended way to include additional identifiers with event cells that are visible to users?

My data available in my resources array is given below:

resources={Array.isArray(tripResourceData) ? tripResourceData.map((vehicle: TripResourcedata) => ({
                id: vehicle.vehicleId || "0",
                name: vehicle.vehicleDesc || '',
                status: vehicle.vehicleStatus || '',
                vehicleWeight: vehicle.vehicleWeight || '',
                vehicleWeightUom: vehicle.vehicleWeightUom || '',
                vehicleVolume: vehicle.vehicleVolume || '',
                vehicleVolumeUom: vehicle.vehicleVolumeUom || '',
                estimatedCost: vehicle.estimatedcost || '',
                cost: vehicle.cost || '',
                serviceType: vehicle.serviceType || '',
                subServiceType: vehicle.subServiceType || '',
                image: false,
            })) : []}

Post by **alex.l** » Fri Aug 29, 2025 12:37 pm

Hi,

Full docs with all supported properties listed you can find here https://bryntum.com/products/schedulerpro/docs/api/Scheduler/column/ResourceInfoColumn
ResourceInfoColumn has a property https://bryntum.com/products/schedulerpro/docs/api/Scheduler/column/ResourceInfoColumn#config-showMeta to show extra information.
Demo https://bryntum.com/products/schedulerpro/examples/skill-matching/

All ResourceModel fields described here https://bryntum.com/products/schedulerpro/docs/api/SchedulerPro/model/ResourceModel

You can also define absolutely custom HTML you want just using own column with https://bryntum.com/products/schedulerpro/docs/api/Grid/column/Column#config-renderer

and https://bryntum.com/products/schedulerpro/docs/api/Grid/column/Column#config-htmlEncode disabled.

        columns : [
            {
                field : 'name',
                htmlEncode: false,
                renderer : ({record}) =>{
                    return '<b>'+record.name+'</b>'
                }
            },
            

    ],

Event Cell Customization

What is event cell? Could you please show what are we talking about? If we are about timeline cells, please see demo here https://bryntum.com/products/schedulerpro/examples/tree-summary-heatmap/

Support Forum