An adjustable Gantt chart showing a work schedule

Name:
Event start:
Event duration:

This goes in the documents header:

<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.gantt.js"></script>

Put this where you want the chart to show up:

<canvas id="cvs" width="800" height="350">[No canvas support]</canvas>

<br /><br />

<span style="display: inline-block; width: 125px">Name:</span> <input type="text" id="name" style="font-size: 16pt; padding: 5px"/><br />
<span style="display: inline-block; width: 125px">Event start:</span> <input type="text" id="eventStart"  style="font-size: 16pt; padding: 5px" /><br />
<span style="display: inline-block; width: 125px">Event duration:</span> <input type="text" id="eventduration"  style="font-size: 16pt; padding: 5px" />

This is the code that generates the chart:

<script>
    var data = [
        [3, 2, null, 'Barney','red'],
        [7, 5, null, 'Harry','blue'],
        [14, 3, null, 'Cynthia','pink'],
        [[14, 5, null, 'Kiffen','#aaf'], [21, 5, null, 'Kiffen','#aaf']],
        [14, 5, null, 'John', 'cyan'],
        [21, 5, null, 'Jenny', 'green'],
        [21, 5, null, 'Ken', 'black'],
        [21, 5, null, 'Richard', 'pink'],
        [[14, 5, null, 'Lucy','#fc7'], [21, 5, null, 'Lucy','#fc7']]
    ];

    var gantt = new RGraph.Gantt({
        id: 'cvs',
        data: data,
        options: {
            borders: false,
            labels: [
                'M','T','W','T','F','','',
                'M','T','W','T','F','','',
                'M','T','W','T','F','','',
                'M','T','W','T','F','',''
            ],
            xmax: 28,
            vbars: [
                [5, 2, 'rgba(240,240,240,0.75)'],
                [12, 2, 'rgba(240,240,240,0.75)'],
                [19, 2, 'rgba(240,240,240,0.75)'], 
                [26, 2, 'rgba(240,240,240,0.75)']
            ],
            adjustable: true
        }
    }).draw().on('adjust', function (obj)
    {
        var event    = RGraph.Registry.get('chart.adjusting.gantt');
        var index    = RGraph.Registry.get('chart.adjusting.gantt').index;
        var subindex = RGraph.Registry.get('chart.adjusting.gantt').subindex;

        if (typeof subindex === 'number') {
            document.getElementById('eventStart').value    = obj.data[index][subindex][0] + 1;
            document.getElementById('eventduration').value = obj.data[index][subindex][1];
            document.getElementById('name').value          = obj.data[index][subindex][3];
        } else {
            document.getElementById('eventStart').value    = obj.data[index][0] + 1;
            document.getElementById('eventduration').value = obj.data[index][1];
            document.getElementById('name').value          = obj.data[index][3];
        }
    });
</script>