[REACT] How to expand/collapse calendar sidebar from button's click event

[himanshurjoshi]

Hi,
I need to expand or collapse calendar's sidebar from a button's click event which is placed in tbar.
How can I achieve this?

[tasnim]

Hi,

You could use https://bryntum.com/products/calendar/docs/api/Calendar/widget/Sidebar#function-show and https://bryntum.com/products/calendar/docs/api/Calendar/widget/Sidebar#function-hide to toggle sidebar

By the way, we already have a button for this https://bryntum.com/products/calendar/examples/basic/

chrome_T3MQIe1k7G.gif (632.89 KiB) Viewed 755 times

[himanshurjoshi]

Thanks, its working.

Can we put a splitter between sidebar and calendar.

[Animal]

I question the utility of being able to resize such a static widget as a Sidebar. But yes. Configure the Calendar with this:

    viewContainer : {
        weight : 100
    },

    items : {
        mySplitter : {
            type   : 'splitter',
            weight : 50
        }
    },

[himanshurjoshi]

Thanks, is it possible to place expand/collapse icon between splitter so user can hide sidebar?

[Animal]

Splitter is just what it is. You can of course customize it yourself.

[himanshurjoshi]

Can you please give me the sample code how to customize it to get a expand icon in the middle?

[Animal]

Her's some suggestion.

You can use that onElementCreated hook to add in some elements to make a button which does collapse or expand in the same way that the dblclick handler does it:

import '../_shared/shared.js'; // Adds example page chrome
import Calendar from '../../lib/Calendar/view/Calendar.js';
import '../../lib/Core/widget/Splitter.js';
import EventHelper from '../../lib/Core/helper/EventHelper.js';
import DomHelper from '../../lib/Core/helper/DomHelper.js';
import BrowserHelper from '../../lib/Core/helper/BrowserHelper.js';

    const calendar = new Calendar({
    // Start life looking at this date
    date : new Date(2020, 9, 12),

    // CrudManager arranges loading and syncing of data in JSON form from/to a web service
    crudManager : {
        autoLoad  : true,
        transport : {
            load : {
                url : 'data/data.json'
            }
        }
    },

    viewContainer : {
        weight : 100
    },

    items : {
        mySplitter : {
            type   : 'splitter',
            weight : 50,
            onElementCreated({ element }) {
                const
                    me          = this,
                    calendar    = me.up('calendar');

                EventHelper.on({
                    element,
                    dblclick: () => {
                        calendar.onToggleSidebarClick();
                    }
                });
            },
            updateDisabled : () => {}
        }
    },

    appendTo : 'container
});

[Animal]

See it working here: https://codepen.io/Animal-Nige/pen/ZEPzgYW?editors=0010#

[Animal]

You will need this CSS rule from that CodePen (It will be in the next version):

.b-calendar:has(.b-sidebar + .b-splitter.b-moving) .b-sidebar {
    transition: none;
}