JS/Jquery 多个用户的调度程序时间轴视图

Question

我制作了一个如下所示的规划应用程序：

但是现在，我觉得它很丑，我想重新编码。如您所见，这是一个每小时计划内联，我搜索了一个可以执行此操作的 jquery 插件。每一行都是用户可用性。如果我双击它，我可以改变这个周期。使用 PHP.

从 SQL 加载数据

我发现了不同的 jquery 插件，但它们不适合我的情况。如果你有一些信息或插件你知道...

此致。

Answer 1

我在 HighCharts 库中找到了一个示例：

 $(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

它解决了我的问题/

JS/Jquery 多个用户的调度程序时间轴视图

JS/Jquery scheduler timeline view for multiple users

javascript

php

jquery

timeline

schedule