Our pure JavaScript Scheduler component


Post by Adi »

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?


Post by fabio.mazza »

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


Post by Adi »

Thanks for the update man!

1.I need to show my image in the editor.

2.In the code shared by you, how shall I retrieve back my image and use it?
May be once I select an image, i want to show the new image.

are they possible?If so how?


Post by alex.l »

Hi Adi,

Sure, it's possible, but it requires to add some code, possibly, to your back-end too.

  1. 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.)

  2. 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, update src 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


Post by McPPaul »

I don't know if it was useful to him, but it was to me! If all companies kept forums like these, they'd save money on customer support...


Post by fabio.mazza »

Thank you Paul, we appreciate!

Best regards,
Fabio


Post Reply