AssignmentGrid

//<code-header>
fiddle.title = 'Assignment grid';
//</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 }
            ]
        }
    ],

    resources : [
        { id : 1, name : 'John Johnson' },
        { id : 2, name : 'Janet Janetson' },
        { id : 3, name : 'Kermit the Frog' },
        { id : 4, name : 'Kermit the Frog Jr.' }
    ],

    assignments : [
        { id : 1, resource : 1, event : 2, units : 50 },
        { id : 2, resource : 3, event : 2 }
    ],

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

const grid = new AssignmentGrid({
    width        : 550,
    autoHeight   : true,
    appendTo     : targetElement,
    projectEvent : project.getEventStore().getById(2)
});