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?
Support Forum
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/
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
});
See it working here: https://codepen.io/Animal-Nige/pen/ZEPzgYW?editors=0010#