[REACT] Calendar: The sidebar don't keep the selected users

[clovisapp]

Hi guys ,
I have a problem when I update my Calendar(change the date event, or pass the event to another user ) the state for the calendar is refreshing, and in my sidebar the users that were already selected come back to the first selection.

selected-sidebar-user.mov

selected-sidebar-user

(3.26 MiB) Downloaded 22 times

In my configuration object, I know I can pre-select users in the sidebar. However, how can we detect changes made to the selected users and trigger an event that saves these changes to the React state and then passes them on to the resourceFilter?

screenshot sidebar

Captura de pantalla 2024-03-05 a la(s) 10.22.10 p. m..png (66.83 KiB) Viewed 130 times

 sidebar: {
          items: {
            // resourceFilter: {
            //   selected: [state.user.id],
            // },
          },
        },

    tbar: {
      items: {
        label: {
          text: "Resource width",
          type: "label",
          weight: 630,
        },
        // A slider controlling the width of each resource
        viewWidth: {
          max: 100,
          min: 12,
          onInput({ source, value }: { source: Container; value: number }) {
            const calendar = source.up("calendar") as CalendarType;
            // All views must be synced with the requested resource width
            calendar.eachView(
              (v: ResourceView) => (v.resourceWidth = `${value}em`)
            );
          },
          showTooltip: true,
          showValue: false,
          type: "slider",
          unit: "em",
          value: 40,
          weight: 640,
          width: 90,
        },
      },
    },
    

[tasnim]

Hi,

Would it be possible for you to upload a runnable test case so we can reproduce the issue and debug it? And Could you please also describe about your use case what are you trying to achieve?

Best regards,
Tasnim

[clovisapp]

Thanks tasnim,

that's really urgent for us now.

To be more precise and more simple:

 
 sidebar: {
          items: {
              resourceFilter: {
                selected: [/* users Ids */],
            },
          },
},

Can you tell us how to persist in external React state the "resourceFilter.selected" of Bryntum Calendar ?
= How to catch that "resourceFilter.selected" is changing ?

Thanks a lot for our help !

[tasnim]

Hi,

You could use the https://bryntum.com/products/calendar/docs/api/Scheduler/widget/ResourceFilter#event-selectionChange event to do this

It'll fire on selection change of the resource filter items

Here is a demo codepen link for you https://codepen.io/dv-auntik/pen/KKYdmEe?editors=0010

Hope it helps.

Best regards,
Tasnim