Our powerful JS Calendar component


Post by luiscloud »

Hi, i need add custom select to my sidebar widget.

I add a button like:

export const calendarConfigBase = {
    mode: 'month',
    sidebar : {
      items : {
          eventFilter : null,
          addNew: {
            // Top position
            weight: 0,
            type: 'button',
            text: 'Crear',
            icon: 'b-fa b-fa-plus',
            cls: 'add-new-button',
            listeners: {
              click: 'up.createCustomEvent',
              args: [undefined]
            }
          },
      },
    }
}

But now i need add a html select with custom options to select.
How can i do this?

And if need customice more my "Add button" to show a dropdown list when user click it, how can i do it?

Can i replace the Sidebar with my own component and add bryntum mini calendar inside?

Thanks


Post by Animal »

Put a type : ‘combo’ in there. It’s much more capable and themable than an HTML select.


Post by luiscloud »

And about replace complete sidebar with my own component? Can i? And can i add the bryntum sidebar calendar inside my own sidebar?

Thanks


Post by saki »

Yes, you can turn the built-in sidebar off by setting it to null: https://bryntum.com/docs/calendar/api/Calendar/view/Calendar#config-sidebar

You can (theoretically) also use Bryntum Sidebar, as any other Bryntum widget, in another place, however, it was designed to work with the calendar so you may need some extra coding/configuring to make it working elsewhere.

What exactly are you trying to achieve? A screenshot or a sketch would help us to advise you the best approach.


Post by Animal »

You could, but you'd be losing a lot of built in functionality.

The side bar is completely themeable.

Every widget in it is completely themeable, and you can very easily add to it to add extra element such as a ComboBox which is more capable and themeable than a raw HTML select.


Post by luiscloud »

I need add a "create" button that when u click it, show a dropdown with three options (different type of events to create)

And i need create a collapsable "section" with checkbox options inside.

I saw that you have a checkbox options, but do you have any component to collapse checkbox section and add a title on top? Thanks


Post by Animal »

Panels are collapsible. So if you put your checkboxes inside a Panel, that can collapse into its own header.

See this example which I created in response to another forum user wanting to change the sidebar: https://bryntum.com/examples/calendar/customized-resourcefilter/

The DatePicker is a Panel, so you can see how it's configured to be collapsible in the sidebar's config.

And I think you also need a

createButton : {
    type : 'button',
    menu : [{
        text : 'Create type 1',
        onClick : 'up.createTypeOne'
    }, {
        text : 'Create type 2',
        onClick : 'up.createTypeTwo'
    }, {
        text : 'Create type 3',
        onClick : 'up.createTypeThree'
    }]
}

In the items of your sidebar. Add a weight to insert it where you need it.


Post by Animal »

I just realized that is what you needed all along. I was put off by you saying you needed an HTML select option.

The Button you already created can do it. Here's the docs for what you need: https://www.bryntum.com/docs/calendar/api/Core/widget/Button#config-menu


Post by luiscloud »

It works but in menu items its "onItem" not "onClick"

createButton : {
    type : 'button',
    menu : [{
        text : 'Create type 1',
        onClick : 'up.createTypeOne'
    }, {
        text : 'Create type 2',
        onClick : 'up.createTypeTwo'
    }, {
        text : 'Create type 3',
        onClick : 'up.createTypeThree'
    }]
}

Thanks


Post by luiscloud »

Why when i add panel with checkbox on sidebar, mini calendar disappear on sidebar?


Post Reply