TaskEditor

//<code-header>
fiddle.title = 'Task editor customized';
//</code-header>
const taskBoard = new TaskBoard({
    appendTo : targetElement,

    features : {
        taskEdit : {
            // Config used to create the editor
            editorConfig : {
                // Will make it anchor to the task being edited
                centered : false,
                // Display it without masking the rest of the page
                modal    : false
            },

            // Affect the editors items
            items : {
                // Change the label for the name field
                name        : { label : 'Title' },
                // Hide description, color and column
                description : null,
                color       : null,
                column      : null
            }
        }
    },

    // Url for resource avatar images
    resourceImagePath : 'data/Grid/images/transparent-users/',

    // Columns to display
    columns : [
        'todo',
        'doing',
        'done'
    ],

    // Field used to pair a task to a column
    columnField : 'status',

    // Project using inline data
    project : {
        tasks : [
            { id : 1, name : 'Double click me', status : 'doing' },
            { id : 2, name : 'Or me', status : 'doing' }
        ],

        resources : [
            { id : 1, name : 'Angelo', image : 'angelo.png' },
            { id : 2, name : 'Celia', image : 'celia.png' },
            { id : 3, name : 'Dave', image : 'dave.png' },
            { id : 4, name : 'Emilia', image : 'emilia.png' }
        ],

        assignments : [
            { id : 1, event : 1, resource : 1 },
            { id : 2, event : 2, resource : 3 }
        ]
    }
});

//<code-header>
fiddle.title = 'Task editor subclassed';
//</code-header>
// The if-statement is to make it register only once in the docs browser,
// not needed in an actual application
if (!Widget.resolveType('mytaskeditor', true)) {
    // Subclass TaskEditor
    class MyTaskEditor extends TaskEditor {
        static type = 'mytaskeditor';

        static configurable = {
            // Changed title
            title : 'Custom task editor',

            // Will make it anchor to the task being edited
            centered : false,

            // Display it without masking the rest of the page
            modal : false,

            items : {
                // Change the label for the resources field
                resources   : { label : 'Assigned' },
                // Hide description, color and column
                description : null,
                color       : null,
                column      : null
            }
        };
    }

    // Register the type of the subclass (mytaskeditor)
    MyTaskEditor.initClass();
}

const taskBoard = new TaskBoard({
    appendTo : targetElement,

    features : {
        taskEdit : {
            // Use the custom task editor by supplying its type
            editorType : 'mytaskeditor'
        }
    },

    // Url for resource avatar images
    resourceImagePath : 'data/Grid/images/transparent-users/',

    // Columns to display
    columns : [
        'todo',
        'doing',
        'done'
    ],

    // Field used to pair a task to a column
    columnField : 'status',

    // Project using inline data
    project : {
        tasks : [
            { id : 1, name : 'Double click me', status : 'doing' },
            { id : 2, name : 'Or me', status : 'doing' }
        ],

        resources : [
            { id : 1, name : 'Angelo', image : 'angelo.png' },
            { id : 2, name : 'Celia', image : 'celia.png' },
            { id : 3, name : 'Dave', image : 'dave.png' },
            { id : 4, name : 'Emilia', image : 'emilia.png' }
        ],

        assignments : [
            { id : 1, event : 1, resource : 2 },
            { id : 2, event : 2, resource : 4 }
        ]
    }
});