javascript — представление временной шкалы планировщика JS / Jquery для нескольких пользователей
Я сделал приложение для планирования, которое выглядит так:
Но сейчас я думаю, что это очень уродливо, и я хочу перекодировать это.
Как вы видите, это встроенное почасовое планирование, и я ищу плагин jquery, который может это сделать.
Каждая строка является доступностью пользователя. Если я дважды нажму на него, я могу изменить период этого.
Данные загружаются из SQL с помощью PHP.
Я нашел разные плагины jquery, но они не подходят для моего случая.
Если у вас есть информация или плагины, которые вы знаете …
С уважением.
Решение
Я нашел пример с библиотекой 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)
}]
}]
});
});
Это решило мою проблему /
Другие решения
Других решений пока нет …