JS/Jquery scheduler timeline view for multiple users

Question

I've made a planning application which look like this :

But now, I think it's very ugly and I want recode it. As you can see, this is a hourly planning inline and I search a jquery plugin which can do this. Every row is a user availability. If I double clik on it, I can change the period of this one. Data are loaded from SQL with PHP.

I found differents jquery's plugins but they're not suitable for my case. If you've got some information or plugins you know...

Regards.

Answer 1

I found an example with HighCharts library :

 $(function () {
 $('#container').highcharts({

     chart: {
         type: 'columnrange',
         inverted: true
     },
     title: {
         text: 'Equipment Status'
     },
     scrollbar: {
         enabled: true
     },
     xAxis: {
         categories: ['Status']
     },
     yAxis: {
         type: 'datetime',
         title: {
             text: 'Timespan'
         }
     },
     plotOptions: {
         columnrange: {
             grouping: false
         }
     },
     legend: {
         enabled: true
     },
     tooltip: {
         formatter: function () {
             return '<b>' + this.x + ' - ' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%e %B %H:%M', this.point.low) +
                 ' - ' + Highcharts.dateFormat('%B %e %H:%M', this.point.high) + '<br/>';
         }
     },

     series: [{
         name: 'Producing',
         data: [{
             x: 0,
             low: Date.UTC(2013, 07, 03, 0, 0, 0),
             high: Date.UTC(2013, 07, 03, 4, 0, 0)
         }, {
             x: 0,
             low: Date.UTC(2013, 07, 03, 10, 0, 0),
             high: Date.UTC(2013, 07, 03, 12, 0, 0)
         }, {
             x: 0,
             low: Date.UTC(2013, 07, 03, 14, 0, 0),
             high: Date.UTC(2013, 07, 03, 15, 0, 0)
         }]
     }, {
         name: 'Breakdown',
         data: [{
             x: 0,
             low: Date.UTC(2013, 07, 03, 4, 0, 0),
             high: Date.UTC(2013, 07, 03, 10, 0, 0)
         }, {
             x: 0,
             low: Date.UTC(2013, 07, 03, 18, 0, 0),
             high: Date.UTC(2013, 07, 03, 24, 0, 0)
         }]
     }, {
         name: "Changeover",
         data: [{
             x: 0,
             low: Date.UTC(2013, 07, 04, 1, 0, 0),
             high: Date.UTC(2013, 07, 04, 5, 0, 0)
         }, {
             x: 0,
             low: Date.UTC(2013, 07, 02, 10, 0, 0),
             high: Date.UTC(2013, 07, 02, 23, 0, 0)
         }, ]
     }, {
         name: "TrialRun",
         data: [{
             x: 0,
             low: Date.UTC(2013, 07, 04, 5, 0, 0),
             high: Date.UTC(2013, 07, 04, 13, 0, 0)
         }, {
             x: 0,
             low: Date.UTC(2013, 07, 02, 2, 0, 0),
             high: Date.UTC(2013, 07, 02, 10, 0, 0)
         }]
     }]
 });
});

Fiddle link

It solved my problem/