Hello Bryntum Team,
We would like to know if we can display date range picker as showed in this image. if so please let us know how to go about it.
Support Forum
You could have a Button in your top toolbar which has as its menu
a datepicker
in range selection mode: https://bryntum.com/products/scheduler/docs/api/Core/widget/DatePicker#multi-selection
On the selectionChange
event, you can collect the start and end, and place them in fields in the tbar
You can't just re-use that component with all behaviour in another place, but you can basically add items into tbar and add behaviour you want.
Required docs information:
https://bryntum.com/products/gantt/docs/api/Gantt/view/Gantt#config-tbar
https://bryntum.com/products/gantt/docs/api/Core/widget/Button#button-with-menu
https://bryntum.com/products/scheduler/docs/api/Core/widget/DatePicker
https://bryntum.com/products/scheduler/docs/api/Core/widget/DatePicker#multi-selection
https://bryntum.com/products/gantt/docs/api/Gantt/view/Gantt#event-dateRangeChange
https://bryntum.com/products/scheduler/docs/api/Core/widget/DatePicker#event-selectionChange
Or add 2 separate date pickers with single select mode to capture start and end date using same events I provided above.
All the best,
Alex
Hi Alex,
Thank you for the links.
We've gone through them . For our business need we chose to have 2 separate date pickers which we are attaching to menu buttons.
We've created the menu buttons but we are not sure how to link the date pickers to each button could you guide us in this aspect?
Here is a sample code
umScheduler.startButton = new bryntum.schedulerpro.Button({
appendTo: this.startDateContainer,
icon: 'b-fa-chart',
text: 'Start Date Picker',
menu: {
items: {
// TODO date picker
},
},
});
umScheduler.endButton = new bryntum.schedulerpro.Button({
appendTo: this.endDateContainer,
icon: 'b-fa-chart',
text: 'End Date Picker',
menu: {
items: {
// TODO date picker
},
},
});
Sure, you need to add datepicker
into items:
menu : {
items : [
{
type : 'datepicker'
}
]
}
Try here https://bryntum.com/products/gantt/docs/api/Core/widget/Button#button-with-menu
In inline code editor use this code
const button2 = new Button({
text : 'Settings button',
icon : 'b-fa-cog',
appendTo : targetElement,
style : 'margin-left:1em',
menu : {
items : [
{
type : 'datepicker'
}
]
}
});
All the best,
Alex
Hi Bryntnum team,
Thanks for helping,
We can see a date picker when we click on the menu button.
But the functionality and scrolling/position seems unnatural.
tbar: [
{
type: 'button',
name: 'start-date-picker',
icon: 'b-fa-chart',
iconAlign: 'end',
text: 'Start-Date-Picker',
menu: {
type: 'datepicker',
},
weight: 650,
},
{
type: 'button',
name: 'start-date-picker',
icon: 'b-fa-chart',
iconAlign: 'end',
text: 'End-Date-Picker',
menu: {
type: 'datepicker',
},
weight: 650,
},
],
Demo
Could you guide us in this aspect?
Thank you for your continued support!