如何使用Angularjs创建时间表或日历表？

如何解决如何使用Angularjs创建时间表或日历表？

首先，如果我的英语不太好，我想道歉。我保证我会尽力解释自己。

我正在使用C＃和Angularjs进行项目。我现在正在使用的模块是一个日程表，允许您创建“约会”并将其存储在数据库中。为此，我编写了一个动态生成的html表，该表将员工的数据和工时绑定为表头。

如果我在一个单元格中按时，它会打开一个模态，其中员工的绑定数据位于顶部，左侧为小时。

数据库功能中的“保存”已经完成。但是还有另一件事需要做。存储在数据库中的“约会”需要显示在html表中。像这样：

该蓝色方块应该是一个div，其中包含指定的一些数据。另外，在此网格状表格中可能会显示多个约会。

我该如何实现？我真的不知道该怎么办。就像我的思维被挡住了。

我已经在一个名为“ $ scope.Agendas”的数组中获得了来自数据库的数据。该数组的每一行都包含员工姓名以及创建约会的时间和日期。

这是html表的代码：

<table class="table-schedule">
    <tr>
        <td class="table-schedule-nullpoint"></td>
        <th scope="col" ng-repeat="empleado in Empleados" style="font-size:13px; font-weight:300; color:white; padding:10px; background-color:#385178;">{{empleado.nombres}}</th>
        <td class="table-schedule-empty" ng-repeat="x in BlankCells" style="background-color: #385178 !important; position:sticky; top:0;"></td>
    </tr>
    <tbody ng-repeat="hora in RangoHoras track by $index">
        <tr>
            <th scope="rowgroup" rowspan="2" style="font-size:13px; font-weight:300; color:white; background-color:#385178;">{{hora}}</th>
            <td ng-repeat="empleado in Empleados" data-ng-click="ModalAgendaDetallada(hora,empleado,'enpunto')"></td>
            <td class="table-schedule-empty" ng-repeat="x in BlankCells"></td>
        </tr>
        <tr>
            <td ng-repeat="empleado in Empleados" data-ng-click="ModalAgendaDetallada(hora,'media')"></td>
            <td class="table-schedule-empty" ng-repeat="x in BlankCells"></td>
        </tr>
    </tbody>
</table>