[ANGULAR] Adding input onto the events on the scheduler

[portlink]

Hi there, I am having trouble putting a text input or a dropdown onto the event

https://bryntum.com/products/scheduler/examples/airport/

                    {
                        //class : 'outbound',
                        tag  : 'input',
                        type  : 'text'
                    },
     

when i click on the input, it automatically gets deselected again.

[tasnim]

Hi,

We don't have this supported. I've opened a feature request for that here https://github.com/bryntum/support/issues/8753

Best of luck ,
Tasnim

[mats]

@portlink Can you please share some details about your use case? Are you looking to have a quick way to edit a field in your event model via an INPUT element?

[portlink]

yes either an input or a dropdown or something similar. The reason for this is like you said, a quick way to edit a field. Reason being is that we want to reduce an extra step needed to edit that field.

[mats]

Ok, thanks for the quick update. Not trivial to support currently but we'll discuss internally.

[portlink]

No worries, thank you for discussing it. Do you guys happen to know of a workaround at the moment that would work?

[johan.isaksson]

While not exactly what you are asking for, the SimpleEventEdit feature would give you a lighter editing experience. Perhaps worth trying https://bryntum.com/products/scheduler/examples/simpleeditor

[johan.isaksson]

You could also try using the Editor widget (https://bryntum.com/products/scheduler/docs/api/Core/widget/Editor). The docs on it are very brief, but you can check the sources for SimpleEventEdit to get the hang of it.

Something like this could work:

 eventRenderer({ eventRecord })  {
        return [
            {
                tag   : 'input',
                value : eventRecord.name
            }
        ];
    }

EventHelper.on({
    element  : scheduler.timeAxisSubGridElement,
    delegate : 'input',
    click(event) {
        const
            eventRecord = scheduler.resolveEventRecord(event),
            editor = new Editor({
                appendTo     : scheduler.timeAxisSubGridElement,
                align        : 'c-c',
                scrollAction : 'realign',
                style        : 'z-index: 10'
            });

    editor.startEdit({
        target : event.target,
        record : eventRecord,
        field  : 'name'
    });
}
});

[portlink]

Thank you for providing the info, I will check the editor widget out to see if i can use it.

[portlink]

You could also try using the Editor widget (https://bryntum.com/products/scheduler/docs/api/Core/widget/Editor). The docs on it are very brief, but you can check the sources for SimpleEventEdit to get the hang of it.

Something like this could work:

 eventRenderer({ eventRecord })  {
        return [
            {
                tag   : 'input',
                value : eventRecord.name
            }
        ];
    }

EventHelper.on({
    element  : scheduler.timeAxisSubGridElement,
    delegate : 'input',
    click(event) {
        const
            eventRecord = scheduler.resolveEventRecord(event),
            editor = new Editor({
                appendTo     : scheduler.timeAxisSubGridElement,
                align        : 'c-c',
                scrollAction : 'realign',
                style        : 'z-index: 10'
            });

    editor.startEdit({
        target : event.target,
        record : eventRecord,
        field  : 'name'
    });
}
});

Hey there, do you think you can provide an example with https://bryntum.com/products/scheduler/examples/airport/

i have been trying to get it working but I have not been able to.