Our pure JavaScript Scheduler component


Post by daniele.pellerucci »

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?


Post by pmiklashevich »

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


Post by daniele.pellerucci »

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.


Post by mats »

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();
            }
        }
    ]
})

Post Reply