Hello everybody. I am trying to modify the "Working Time demo" example. I would like to insert the side panel (the one where there are the fields "From Hour, To hour, ....") in an external div (for example in a bootstrap popup). Is there any way to do this?
Support Forum
Are you talking about this demo https://bryntum.com/examples/scheduler/workingtime/? (you created post in Calendar forum). You can add bryntum widgets to any DOM element. Please see https://www.bryntum.com/docs/scheduler/#Core/widget/Widget#config-appendTo property.
let button = new Button({
appendTo : 'myContainer',
icon: 'b-fa-plus-circle',
text: 'Add',
color: 'green',
onClick: () => {}
});
Note, https://www.bryntum.com/docs/scheduler/#Core/helper/DomHelper#function-createElement-static creates an HTML element, not a widget.
Pavlo Miklashevych
Sr. Frontend Developer
Thanks for your reply. Yes, i talk about workingtime example. In it there is this code:
elements = DomHelper.createElement({
parent : 'container',
tag : 'div',
reference : 'outer',
dataset : {
appElement : true // To work with the built in code editor, not demo related
},
children : [
{ reference : 'info', className : 'b-color-orange' },
{
reference : 'horizontal',
children : [
{ reference : 'container' },
{ reference : 'tools', className : 'b-panel-content' } // To use panels background color
]
}
]
});
I would like to insert the tools children in an external div (already existing) of my html page.
I can try with the code you suggested. I was wondering if it is possible to do this with a method of the domHelper class.
As Pavel said, DomHelper creates DOM elements which is different from our Widgets. A Widget is composed by one of many DOM element.
You can create a simple container like this:
new Container({
appendTo : yourContainerElement, // or an id
items : [
// Combo for picking a view preset
{
type : 'combo',
value : 'week',
editable : false,
ref : 'viewPresetCombo',
items : [
{
value : 'month',
text : 'Month',
startDate : new Date(2019, 0, 1),
endDate : new Date(2019, 2, 31),
viewPreset : {
base : 'monthAndYear',
displayDateFormat : 'ddd D/M HH:mm'
}
},
{
value : 'week',
text : 'Week',
startDate : new Date(2019, 1, 1),
endDate : new Date(2019, 1, 16),
viewPreset : {
base : 'weekAndMonth',
displayDateFormat : 'ddd D/M HH:mm',
timeResolution : {
unit : 'hour',
increment : 1
},
headers : [
{
unit : 'month',
align : 'center',
dateFormat : 'MMM YYYY' //Jan 2017
},
{
unit : 'week',
align : 'center',
dateFormat : 'DD MMM (wW)'
}
]
}
},
{
value : 'day',
text : 'Day',
startDate : new Date(2019, 1, 3),
endDate : new Date(2019, 1, 10),
viewPreset : 'dayAndWeek'
}
],
onSelect({ value, record }) {
scheduler.viewPreset = record.viewPreset;
scheduler.setTimeSpan(record.startDate, record.endDate);
}
},
// Button to toggle working time on/off
{
type : 'button',
text : 'Use working time',
ref : 'workingTimeBtn',
color : 'b-gray',
icon : 'b-fa b-fa-square',
pressedIcon : 'b-fa b-fa-check-square',
toggleable : true,
pressed : true,
flex : 1,
style : 'margin-bottom: .5em',
onToggle({ pressed }) {
const widgets = tools.widgetMap;
widgets.fromHour.disabled = widgets.toHour.disabled = widgets.fromDay.disabled = widgets.toDay.disabled = widgets.restore.disabled = !pressed;
// Change the display, but keep the visual center the same to preserve user's context.
scheduler.preserveViewCenter(() => {
if (pressed) {
refreshWorkingTime();
}
else {
scheduler.workingTime = null;
displayInfo();
}
});
}
},
// Fields for configuring working time. Changing a field sets min/max value on the "opposite" field and
// triggers setting a new working time config on Scheduler.
{
type : 'number',
label : 'From hour',
ref : 'fromHour',
name : 'fromHour',
clearable : true,
min : 0,
onChange({ value, userAction }) {
tools.widgetMap.toHour.min = value + 1;
userAction && refreshWorkingTime();
}
},
{
type : 'number',
label : 'To hour',
ref : 'toHour',
name : 'toHour',
clearable : true,
max : 24,
onChange({ value, userAction }) {
tools.widgetMap.fromHour.max = value - 1;
userAction && refreshWorkingTime();
}
},
{
type : 'number',
label : 'From day',
ref : 'fromDay',
name : 'fromDay',
clearable : true,
min : 0,
onChange({ value, userAction }) {
tools.widgetMap.toDay.min = value + 1;
userAction && refreshWorkingTime();
}
},
{
type : 'number',
label : 'To day',
ref : 'toDay',
name : 'toDay',
clearable : true,
max : 7,
onChange({ value, userAction }) {
tools.widgetMap.fromDay.max = value - 1;
userAction && refreshWorkingTime();
}
},
// Button to restore working time to the initially used values
{
type : 'button',
text : 'Restore defaults',
ref : 'restore',
flex : 1,
color : 'b-gray',
icon : 'b-fa b-fa-sync-alt',
onClick() {
tools.record = scheduler.workingTime = workingTime;
displayInfo();
}
}
]
})