SchedulerTaskEditor

TaskEditorBase subclass for SchedulerPro projects. Provides a UI to edit tasks in a dialog.

This demo shows how to use TaskEditor as a standalone widget:

Scheduler task editor

//<code-header>
fiddle.title = 'Scheduler task editor';
//</code-header>
const project = new ProjectModel({
    startDate : new Date(2020, 0, 1),

    events : [
        {
            id       : 1,
            name     : 'Write docs',
            expanded : true,
            children : [
                { id : 2, name : 'Proof-read docs', startDate : '2020-01-02', endDate : '2020-01-05', effort : 0 },
                { id : 3, name : 'Release docs', startDate : '2020-01-09', endDate : '2020-01-10', effort : 0 }
            ]
        }
    ],

    dependencies : [
        { fromEvent : 2, toEvent : 3 }
    ]
});

const taskEditor = new SchedulerTaskEditor({ project, rootElement : document.body });

const button = new Button({
    appendTo : targetElement,
    text     : 'Show TaskEditor',
    async onClick() {
        await project.commitAsync();

        taskEditor.loadEvent(project.eventStore.getById(2));

        taskEditor.showBy({
            target : button.element,
            align  : 'l-r',
            offset : 5
        });
    }
});

Task editor customization

To append Widgets to any of the built-in tabs, use the items config. The Task editor contains tabs by default. Each tab contains built-in widgets: text fields, grids, etc.

Tab ref	Text	Weight	Description
`generalTab`	SchedulerGeneralTab	100	Shows basic configuration: name, resources, start/end dates, duration, percent done
`recurrenceTab`	RecurrenceTab	150	Options for recurring events, when Scheduler is configured to use them
`predecessorsTab`	PredecessorsTab	200	Shows a grid with incoming dependencies
`successorsTab`	SuccessorsTab	300	Shows a grid with outgoing dependencies
`advancedTab`	SchedulerAdvancedTab	500	Shows advanced configuration: constraints and manual scheduling mode
`notesTab`	NotesTab	600	Shows a text area to add notes to the selected task

This demo shows adding of custom widgets to the task editor, double-click child task bar to start editing:

Task edit extra items

//<code-header>
fiddle.title = 'Task edit extra items';
//</code-header>
const schedulerPro = new SchedulerPro({
    appendTo : targetElement,
    flex     : '1 0 100%',
    // Project contains all the data and is responsible for correct scheduling
    project  : {
        events : [
            {
                id       : 1,
                name     : 'Write docs',
                expanded : true,
                children : [
                    {
                        id        : 2,
                        name      : 'Proof-read docs',
                        startDate : '2017-01-02',
                        endDate   : '2017-01-05',
                        effort    : 0
                    },
                    { id : 3, name : 'Release docs', startDate : '2017-01-09', endDate : '2017-01-10', effort : 0 }
                ]
            }
        ],

        resources : [
            { id : 1, name : 'Albert' },
            { id : 2, name : 'Bill' }
        ],

        assignments : [
            { event : 2, resource : 1 },
            { event : 3, resource : 2 }
        ]
    },
    startDate : new Date(2016, 11, 31),
    endDate   : new Date(2017, 0, 11),
    height    : 250,
    features  : {
        taskEdit : {
            items : {
                // add some UI-elements to "General" tab
                generalTab : {
                    items : {
                        customDivider : {
                            html   : '',
                            weight : 610,
                            flex   : '1 0 100%'
                        },
                        // text input field
                        milestoneField : {
                            type     : 'text',
                            weight   : 611,
                            readOnly : true,
                            editable : false,
                            label    : 'My field',
                            name     : 'milestone',
                            flex     : '1 0 50%'
                        },
                        // a button
                        customButton : {
                            type   : 'button',
                            weight : 612,
                            text   : 'Button',
                            flex   : '1 0 50%'
                        }
                    }
                },
                // hide "Notes" tab
                notesTab : false
            }
        }
    },
    columns : [
        { field : 'name', text : 'Name' }
    ]
});

Custom fields in the Event Editor work only if the field is explicitly defined in the Task model. When defined, the field can be added, updated, and stored in the EventStore, even if it is not present in the initial task data. Bryntum extracts fields only from the first event record when no definitions are provided, which can lead to inconsistent behavior. Always define custom fields in the Event model to ensure predictable and reliable functionality.

export default class CustomEventModel extends EventModel {
 static fields = [
     { name: 'custom', type: 'string' } // Custom field for storing address ID
 ];
}

const project = new ProjectModel({
 eventModelClass : CustomEventModel,
})