Angular 假期日历应用程序答案

【问题标题】：Angular Holiday calendar applicationAngular 假期日历应用程序
【发布时间】：2020-11-15 20:16:34
【问题描述】：

我是 Angular 的新手（仍在学习），我正在动手解决假期日历应用程序。我需要一个建议根据月份（输入）生成表中 42 个单元格的数据。并将其与日期一起存储在类中。

基于这 42 行，我需要在 DOM (6x7) 中渲染 42 个单元格网格。

我尝试在 DOM 中生成 42 行，如下所示。这似乎是错误的方法。

<div class="container">
        <div class="row tr-row">
            <div class="col td-month">23</div>
            <div class="col td-month">24</div>
            <div class="col td-month">25</div>
            <div class="col td-month">26</div>
            <div class="col td-month">27</div>
            <div class="col td-month">28</div>
            <div class="col td-month">29</div>
        </div>
        <div class="row tr-row">
            <div class="col td-month">01</div>
            <div class="col td-month">02</div>
            <div class="col td-month">03</div>
            <div class="col td-month">04</div>
            <div class="col td-month">05</div>
            <div class="col td-month">06</div>
            <div class="col td-month">07</div>
        </div>
        <div class="row tr-row">
            <div class="col td-month">08</div>
            <div class="col td-month">09</div>
            <div class="col td-month">10</div>
            <div class="col td-month">11</div>
            <div class="col td-month">12</div>
            <div class="col td-month">13</div>
            <div class="col td-month">14</div>
        </div>
        <div class="row tr-row">
            <div class="col td-month">15</div>
            <div class="col td-month">16</div>
            <div class="col td-month">17</div>
            <div class="col td-month">18</div>
            <div class="col td-month">19</div>
            <div class="col td-month">20</div>
            <div class="col td-month">21</div>
        </div>
        <div class="row tr-row">
            <div class="col td-month">22</div>
            <div class="col td-month">23</div>
            <div class="col td-month">24</div>
            <div class="col td-month">25</div>
            <div class="col td-month">26</div>
            <div class="col td-month">27</div>
            <div class="col td-month">28</div>
        </div>
        <div class="row tr-row">
            <div class="col td-month">29</div>
            <div class="col td-month">30</div>
            <div class="col td-month">31</div>
            <div class="col td-month">1</div>
            <div class="col td-month">2</div>
            <div class="col td-month">3</div>
            <div class="col td-month">4</div>
        </div>
    </div>

请给我建议。我被困在这里了。

【问题讨论】：

如果您对任何现有日历感到不舒服，请查看此 SO:stackoverflow.com/questions/59943990/…

标签： javascript angular

【解决方案1】：

如何使用现有日历并将其添加到您的项目中？如果有来自可靠库的现有实现，那么使用它们通常是一个好习惯，因为它们自己已经完成了测试等。如果不需要，请不要重新发明轮子:-)

一些现有的日历是：

看看其中任何一个是否适合您的需求，并省去重新实现现有选项的需要

【讨论】：