ProjectEditor

//<code-header>
fiddle.title = 'Project editor';
//</code-header>
const project = new ProjectModel({
    name      : 'Documenting',
    startDate : new Date(2020, 0, 1),
    calendar  : 'default',

    calendars : [{
        id        : 'default',
        name      : 'Default calendar',
        intervals : [{
            id                 : 1,
            recurrentStartDate : 'on Sat',
            recurrentEndDate   : 'on Mon',
            isWorking          : false
        }]
    }],

    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 projectEditor = new ProjectEditor({
    listeners : {
        save : () => projectEditor.hide()
    }
});

const button = new Button({
    appendTo : targetElement,
    text     : 'Show Project Editor',
    onClick  : () => {
        projectEditor.project = project;

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