Our powerful JS Calendar component


Post by joversdev »

Hi,

I've found an example for react under the scheduler side of things that if we wish to modify an event before it is rendered, we should override the eventRenderer function.

Is there a different way I am supposed to handle the eventRenderer on the calendar rather than how the scheduler example shows? In the example below, the console.trace() I have is never executed, so I can only assume this is never reached.

This being an example of the eventRenderer I took for reference.

const eventRenderer = ({ eventRecord, resourceRecord, renderData }: any) => {
    let prefix = '';
    console.trace();
    if (resourceRecord.important) {
        renderData.eventColor = 'red';
        prefix = 'Important ';
    }

return prefix + eventRecord.name;
};

And in my config which I pass to the wrapper by using the spread operator {...calendarConfig}

{
    eventRenderer,
    loadOnDemandFeature: true,
    weekExpanderFeature: true,
    allowOverlapFeature: false,
    project: {
    ...
}
    

If some sort of runnable test case is needed I'll need to spend time to make one, but I believe my question is fairly straight forward: in what manner do we call the eventRenderer for the BryntumCalendar react wrapper?


Post by saki »

Calendar has a separate event renderer for each mode therefore you need something like:

    modes: {
        year: false,
        week: {
            eventRenderer({ eventRecord, resourceRecord, renderData }) {
                console.log('Here we are');
                return eventRecord.name;
            }
        }
    }

See the example: https://bryntum.com/examples/calendar/custom-rendering/


Post by joversdev »

Ah I see. This worked. Thank you.


Post Reply