[REACT] - Impossible to use dynamic config for sidebar

[xusifob]

Hi everyone,

I am trying to pass a dynamic config for my sidebar, because :

• I want to set the field config.sidebar.items.resourceFilter.selected, dynamicly from my react component
• I want to set a config.sidebar.items.customObject.listeners.click to be linked to my listeners in React

Here is my code :

import { BryntumCalendar } from '@bryntum/calendar-react';
import React from 'react';

const CalendarTest = () => {


  return (
    <BryntumCalendar
      sidebar={{
        items: {
          resourceFilter: {
            selectAllItem: true,
            minHeight: '22em',
            store: {
              // Group resources by a custom `team` field
              groupers: [
                { field: 'role', ascending: true }
              ]
            },
          },
          printEvents: {
            weight: 300,
            type: 'button',
            text: 'Rendez-vous du jour',
            icon: 'b-fa b-fa-print',

        // Will look in ownership hierarchy and call on the Calendar
        listeners: {
          click: () => {
            console.log('tototo');
          },
        }
      },
    }
  }}
/>
  );
};


export default CalendarTest;

And here is the error I have in the console (In PJ)

How should I do it ?

I'm using the following packages :

  "@bryntum/calendar": "npm:@bryntum/calendar-trial",
   "@bryntum/calendar-react": "^5.6.0",

Thanks !

[ghulam.ghous]

Hi,

I have tried to run the config that you have provided here and I couldn't see any error in the console. Can you provide us with a runnable application/test case and a clear description of what you are trying to achieve here. In order to access the items of sidebar, you can do something like this:

1. bryntum.query('calendar').widgetMap.sidebar.config.items.printEvents.listeners.click
2. bryntum.query('calendar').widgetMap.sidebar.config.items.resourceFilter

[xusifob]

Hi there,

Thanks for your quick reply, after testing more deeply, I realised the code works until the component is reloaded.

Here, you can find my replication here :
https://github.com/instamedsolutions/poc-bryntum

The calendar is displayed properly, until the state is being changed and the component reloaded (by the timeout), and then the code crashes.

To launch the code you must run :

npm install
npm run dev

With this code :

1. bryntum.query('calendar').widgetMap.sidebar.config.items.printEvents.listeners.click
2. bryntum.query('calendar').widgetMap.sidebar.config.items.resourceFilter

Can I also update the values, and it will be displayed on my UI ?

Thanks

Bastien

[Animal]

I do not understand.

"config"?

Just access the widget and change a property of it that you wish to change.

[Animal]

Change selection.mov

(2.65 MiB) Downloaded 41 times

[Animal]

That particular property may not have been the best to illustrate the principle. There is a bug with that one property, selected.

https://github.com/bryntum/support/issues/7987

Other properties of any widget you can access from calendar.widgetMap (all will be represented there) shoold work.

[xusifob]

Thank for your quick reply, using calendar.widgetap worked on my end