[VUE 3] Add custom select to sidebar widget

[Animal]

It depends what you call the panel.

If you call it datePicker then it will take its place.

[luiscloud]

No, i have a structure like this (is example, i build it dinamically):

 export const calendarConfigBase = {
    cls: 'calendar-cls',
    bodyCls: 'calendar-body-cls',
    mode: 'month',
    weekStartDay: 1,
    autoCreate: false,
    sidebar : {
      cls: 'sidebar-cls',
      bodyCls: 'sidebar-body-cls',
      items : {
        eventFilter : null,
        addNew: {
          weight: 0,
          type: 'button',
          text: 'Crear',
          icon: 'b-fa b-fa-plus',
          cls: 'add-button-cls',
          menuIcon: null,
          menu : [
            {
              text : i18n.global.t('calendar.event'),
              onItem : 'up.createCustomEvent'
            }, {
                text :  i18n.global.t('calendar.task'),
                onItem : 'up.createTask'
            }, {
                text :  i18n.global.t('calendar.sendSchedule'),
                onItem : 'up.sendSchedule'
            }
          ]
        },
       calendarsFilter: {
	        weight: 300, 
        	type: 'panel',
        	title: panelLabel,
       		collapsible : true,
        	cls: 'panel-cls',
        	bodyCls: 'panel-body-cls',
        	itemCls: 'panel-item-cls',
        	items: [
        	       type: 'checkbox',
    			text: checkText,
    			value: checkValue, 
    			checked,
    			cls: 'checkbox-cls',
    			listeners: {
      				change: `up.${checkListener}`,
      				args: [checkValue]
    			}
        	]
      	}
      },
    }
}

Inside calendarsFilter there are a lot of checkbox, all render fine except default mini calendar on sidebar dissappear

I search his id "b-datepicker-1" but it isnt on html

A image with checkbox:

A image without checkbox panel:

I add checkbox dinamically with this function (dont know if there are a better way)

export const addCheckboxFiltersSectionToCalendarConfig = ({
  panelKey, 
  panelLabel, 
  optLabel, 
  optValue, 
  optListener,
  calendars, 
  selectedCalendars,
  calendarConfig, 
}) => {
  let items = {}
  calendars.map(v => {
    const checked = selectedCalendars.includes(v.uuid)
    return items[v[optValue]] = addCheckboxFilterToCalendar(v[optLabel], v[optValue], checked, optListener)
  })
  const filtersSidebarConfig = { 
    items: {
      [panelKey]: {
        weight: 300, 
        type: 'panel',
        title: panelLabel,
        collapsible : true,
        cls: 'panel-cls',
        bodyCls: 'panel-body-cls',
        itemCls: 'panel-item-cls',
        items
      }
    } 
  } 
  const clonedSidebarConfig = _clondeDeep(calendarConfig.sidebar)
  const newConfigSidebar = _merge(clonedSidebarConfig, filtersSidebarConfig)
  calendarConfig.sidebar = newConfigSidebar

[alex.l]

I tried to add some panel into sidebar in one of our online examples and I am able to see all components. Would be nice to have opportunity to reproduce this. Could you attach a runnable test case, please? Check the result of your _merge method for beginning.

And what do you mean "dinamically"? This configuration may only be used as an initial config.

[luiscloud]

"dinamically" is that i load calendar component, and in onMounted i call a EP to get all user calendars, and after i have to add the sidebar checkbox with the different calendars obtained from API.

What is the correct form to add elements to sidebar after of component mount?

_merge come with all props merged, but in sidebar, i dont add any calendar, is default sidebar component, true? How can i add programatically?

[Animal]

Dynamically meaning you set the sidebar property to a value?

If the sidebar has already been created, you must use the API.

https://www.bryntum.com/docs/calendar/api/Calendar/widget/Sidebar#function-add

Add your new thing.

myCalendar.sidebar.add({
    weight : 300,
    ref    : 'theNameInWidgetMap',
    type   : 'panel',
    title  : 'The title',
    items  : {
        ...
    }
});

[luiscloud]

Thanks, all appear now.

But now when i collapse the panel, the panel button go to the bottom of sidebar instead stay nexto previous widget (mini calendar).

It is normal? Is for weight 300? How can i put it next to the calendar when panel is collapsed

[Animal]

I don't get your meaning. Try some screenshots

[luiscloud]

[Maxim Gorkovsky]

Hello.
I don't see how this screenshot is much different from ones you posted above. Could you please elaborate on what you expect to see here? Runnable test case would be perfect.

[luiscloud]

Yes, I will try to explain better.

This is the "Calendarios" panel expanded (unfold):

And the prev message capture is "Calendarios" panel collapsed (fold) . When collapsed the button go to the bottom of sidebar, I dont know why. How can i fix it, to move it under the sidebar calendar widget?