As mentioned in the title, apart from editing event attributes like name , I also want to add/edit image.Is it possible? If so , could you share an example? If not, what should be the way?
Support Forum
Hi Adi,
Yes, it is possible. You can just add a https://www.bryntum.com/docs/scheduler/#Core/widget/FilePicker as a new item for your https://www.bryntum.com/docs/scheduler/#Scheduler/feature/EventEdit using https://www.bryntum.com/docs/scheduler/#Scheduler/feature/EventEdit#config-extraItems config.
Like this:
new Scheduler({
...
features : {
eventEdit : {
extraItems : [
{
type : 'filepicker',
fileFieldConfig : {
accept: 'image/*'
}
},
...
]
}
}
...
});
Best regards,
Fabio
Hi Adi,
Sure, it's possible, but it requires to add some code, possibly, to your back-end too.
We don't have a special component to display images. To show an image in the form, you need to use HTML tags (
<img>
as example). You could implement you own component if you need in advanced logic. Check our docs, you could use this class as a base: https://bryntum.com/docs/scheduler/#Core/widget/Widget
But this is very depends on your goals, maybe all you need is just add a widget with custom html (https://bryntum.com/docs/scheduler/#Core/widget/Widget#config-html) and update it using 'change' event of another component (combobox, filepicker, etc.)To get selected file, please use this property: https://bryntum.com/docs/scheduler/#Core/widget/FilePicker#property-files
If you are uploading your image to server, you need to get back an URL and set it to your "imageComponent" (possibly, updatesrc
for your<img>
tag). If you have some resources on your server that you are selecting from, just use it's URL or, if you need a preview, this article may be helpful: https://www.webtrickshome.com/faq/how-to-display-uploaded-image-in-html-using-javascript
We have a bunch of examples with images for Gird (docs: https://bryntum.com/docs/scheduler/#Scheduler/column/ResourceInfoColumn
example: https://bryntum.com/examples/scheduler/configuration/)
But displaying images in the form is a classic HTML task that solves same as your are doing this for all your web apps.
Fabio's post showed you how to add extra widgets to Editor.
I hope this information will be helpful,
All best,
Alex
All the best,
Alex