[REACT] Customize sidebar resourceFilter

[vocongkhanh]

I was able to change the default resource filter with the container with 4 checkboxs

export const calendarConfig: BryntumCalendarProps = {
  // Start life looking at this date
  date: new Date(),
  weekStartDay: 1,


  sidebar: {    

    width: 250,
    items: {
      // Override the default one.

  resourceFilter: {
    // @ts-ignore
    type: 'container', // Use a container to hold the checkboxes

    items: [
      {
        type: 'checkbox',
        label: 'Completed',
        checked: true // default checked state
      },
      {
        type: 'checkbox',
        label: 'Confirmed',
        checked: false
      },
      {
        type: 'checkbox',
        label: 'Draft',
        checked: false
      },
      {
        type: 'checkbox',
        label: 'Pending',
        checked: false
      }
    ]
  }
}
  },

I want to style it and customize it more, can someone point me to the detail document. I tried to find it but couldn't at the moment.
Thank you!

[Animal]

That's not really a resource filter. What is the intention of this completely new Widget in the sidebar?

[Animal]

It looks like a statusFilter.

SO

sidebar : {
    items : {
        // We do not want to filter by resource in this app
        resourceFilter : null,

        // Add a new Widget
        statusFilter : {
            weight   : 100,
            type     : 'container',
            layout   : 'vbox',
            defaults : {
                type : 'checkbox'
            },
            onFieldChange() {
                // Put your handling here <=======================
                console.log(this.values);
            },
            items : {
                completed : {
                    label : 'Completed',
                    checked : true,
                }, 
               confirmed : {
                    label : 'Confirmed'
                },
               draft : {
                    label : 'Draft'
                },
               pending : {
                    label : 'Pending'
                }
            }
        }
    }
}

[Animal]

Then I'd add

.b-checkbox {
    justify-content : space-between;
}

.b-checkbox .b-field-inner {
    flex : none;
}

To make them look a bit nicer.

[Animal]

It's fun and helpful to play with these ideas in the live code editor at https://bryntum.com/products/calendar/examples/basic/

Screenshot 2024-08-08 at 13.58.41.png (1.09 MiB) Viewed 368 times

[vocongkhanh]

Thank you Animal for your reply. I will play with the live code editor, what is detail document you recomend to check so I can do it my own. Like what is accepted type : "combo", "container" ..., how to add className to style it

[vocongkhanh]

I added new Widget below

sidebar: {
    items: {
      // We do not want to filter by resource in this app
      resourceFilter: undefined,

  // Add a new Widget
  statusFilter: {
    weight: 100,
    cls: 'status-filter-container',
    type: 'container',
    layout: 'vbox',
    defaults: {
      type: 'checkbox'
    },
    // @ts-ignore
    onFieldChange: (obj) => {
      console.log(obj);
    },
    items: {
      completed: {
        label: 'Completed',
        checkedValue: 'Completed_val',
        value: 'Completed_val'
      },
      confirmed: {
        label: 'Confirmed',
        checkedValue: 'Confirmed_val',
        value: 'Confirmed_val'
      },
      draft: {
        label: 'Draft',
        checkedValue: 'Confirmed_val',
        value: 'Confirmed_val'
      },
      pending: {
        label: 'Pending',
        checkedValue: 'Confirmed_val',
        value: 'Confirmed_val'
      }
    }
  }
}
  },

But I cant seem to set value for options. Value of option onFieldChange always = true when checked and false when uncchecked not the value I want to set.

[Animal]

Thank you Animal for your reply. I will play with the live code editor, what is detail document you recomend to check so I can do it my own. Like what is accepted type : "combo", "container" ..., how to add className to style it

It’s all documented here: https://bryntum.com/products/calendar/docs/api/Core/widget/Button

You can get all the type codes from the docs for each widget class in that list, and all the possible configurations. Including cls

[Animal]

You might be interested in this example which filters by selected checkboxes: https://codepen.io/Animal-Nige/pen/WNqZoXV?editors=0010

[vocongkhanh]

Thank you, Animal. I'll check that out