[ANGULAR] Calendar can put avatar image and set border color in task cell ?

[saki]

First of all, try to use the default event editor, (not listening to beforeEditEvent) to see if you the problem is still there. If yes you know that it is not related to the editor code. If not the you have smaller chunk of code to investigate.

[Animal]

I think it would be much easier for you to use the provided editor, and style it yourself if you need to.

See https://bryntum.com/examples/calendar/eventedit/

You can use CSS or configuration to make the editor look and behave exactly as you need.

[tmcuong]

Your calendar is good, but I need to customize dialog or using my dialog when open task, and save back data to grid.
At now it works incorrect.

[Animal]

You can very easily customize the editor dialog to behave in any way you want.

This would be much easier than writing your own whole widget.

[tmcuong]

I think calendar with using own dialog error, at now I attempt to use default your dialog like
However I add filepicker or filefield filed when I click it , calendar will open window dialog I chose file, after chosing file upload, default dialog will be closed too,
How make default dialog still open after chosing file
The same error with field button

 features : {      

        eventEdit : {
            items : {
                // Change the label of the nameField               

                nameField : {
                    label : 'Title'
                },
                // Move the calendar picker to the top
                // It's name is "resourceField" because Calendars are the assigned resources.
                resourceField : {
                    label : 'Task',
                    weight : 0
                },
                noteField : {                 

                    type : 'textarea',                  

                    label : 'Notes',                  

                    name : 'note'
                },
                button: {
                    type : 'button',
                    label : 'button',
                    name : 'button',
                    cls     : 'b-raised b-rounded',
                    icon    : 'b-fa-plus-circle',
                    color   : 'green',
                    onClick : () => {
                        alert("click");
                        return false;
                    }
                },
                filefield: {
                    type : 'filepicker',
                    label : 'upload',
                    name : 'upload'
                }
            }
        },     

        eventTooltip:{
            showOn : 'hover',
            tools : {
              left : {
                  cls     : 'b-fa b-fa-copy',
                  weight  : 20,
                  tooltip : 'copy task'          
                 

          },
        },
        renderer : (data: any) => {            
       },
      }
},

[saki]

You can add code from https://bryntum.com/docs/calendar/api/Calendar/feature/EventEdit#config-autoClose to your feature config. Then it would look like this:

    features : {

        eventEdit : {
            editorConfig : {
                autoClose : false,
                modal     : true
            },
            items : {
                // Change the label of the nameField
                nameField : {
                    label : 'Title'
                },
                // Move the calendar picker to the top
                // It's name is "resourceField" because Calendars are the assigned resources.
                resourceField : {
                    label  : 'Task',
                    weight : 0
                },
                noteField : {
                    type  : 'textarea',
                    label : 'Notes',
                    name  : 'note'
                },
                button : {
                    type    : 'button',
                    label   : 'button',
                    name    : 'button',
                    cls     : 'b-raised b-rounded',
                    icon    : 'b-fa-plus-circle',
                    color   : 'green',
                    onClick : () => {
                        alert('click');
                        return false;
                    }
                },
                filefield : {
                    type  : 'filepicker',
                    label : 'upload',
                    name  : 'upload'
                }
            }
        },

[tmcuong]

ok it work, but file is still old value , how can I delete old value in file after I closed dialog.

file.png (13.64 KiB) Viewed 1383 times

And how can I get data of file upload. I debug and don't find data of file uploaded

debug.png (142.67 KiB) Viewed 1379 times

[Animal]

You can call clear() on that field. That should be handled when the dialog hides, I will add a filepicker to an example here and see why it doesn't get reset.

[tmcuong]

I don't know syntax or code access filepicker control to assign method clear its value.

[saki]

In your configuration, filefield is a named item so it is added under its name to the parent's widgetMap.

So you can get the reference to that field in afterSaveEvent listener this way:

    listeners : {
        afterEventSave({ source }) {
            const widgetMap = source.features.eventEdit.editor.widgetMap;
            if (widgetMap) {
                widgetMap.filefield.clear();
            }
        }
    },

Checking for existence of widgetMap is necessary because before the event editor has been opened at least once, it does not exist.