Планировщик календаря, как элемент управления для определения диапазонов значений

Question

Я пытаюсь реализовать элемент управления отображением диапазона, такой как элемент управления планировщика, в котором ось x имеет одно целочисленное значение, а ось y имеет другое, а пользователь задает сопоставления с помощью щелчков в ячейке и параметров перетаскивания.

• Вот так выглядит моя реализация. https://imgur.com/a/8M3jnjU

Я реализовал проверку концепции, используя таблицу html, но мне было интересно, есть ли библиотека с открытым исходным кодом для достижения этой цели. Мой код выглядит следующим образом.

<table class="table table-bordered">
<tr>
<th class="w-10">
    &nbsp;
</th>
<th ng-repeat="columnHeading in ctrl.viewModel.vLeanings.columns" class="text-center w-9">                                                                
    {{columnHeading}}
</th>
</tr>
<tr ng-repeat="row in ctrl.viewModel.vLeanings.rows">
    <th>{{row.rowNo | number:3}}</th>
    <td ng-repeat="column in row.columns" ng-mouseover="ctrl.onMouseOver(row,column);" ng-mousedown="ctrl.onMouseDown(row,column);" ng-mouseup="ctrl.onMouseUp();" ng-class="column.selected?column.imported?'label-danger':'label-primary':''">
    </td>
</tr>
</table>

Существует ли какой-либо элемент управления с открытым исходным кодом для AngularJS или Javascript? Заранее спасибо.

Answer 1

Вам следует взглянуть на полный календарь с открытым исходным кодом, поддерживаемый Адамом Шоу. Когда я уже работал над созданием календаря планирования, проект fullcalendar предоставил мне возможность легко настроить проект в соответствии с моими требованиями. Приложение, которое я использовал в датах и ​​времени для оси X и Y, но вы можете настроить его так, чтобы оно соответствовало другим значениям.

Полный календарь на Github

Демо FullCalendar

Снимок экрана из приложения, созданного с использованием fullcalendar.