使用javascript创建剃须刀复选框的表

Question

目前，我在一年中在Razor中创建的几个月中有一组复选框。我想更改复选框，使其看起来像日历（使用javascript），用户可以在其中选择月份，并且月份将突出显示。以下是我创建的剃刀语法：

<center>
        <div class="col-2 Border CheckboxMonthStyle" id="checkboxMonthGrid">
            <ul class="list-group">
                <li class="list-group-item-heading list-group-item active">
                    <h4 class="list-group-item-text">Select the month(s) the task should be set at</h4>
                </li>
                @for (int i = 0; i < Model.Schedule.MonthInfo.Count; i++)
                {
                    <li class="list-group-item" style="display:inline-block">
                        <div class="checkbox-inline" id="checkboxMonth">
                            @Html.HiddenFor(m => m.Schedule.MonthInfo[i].monthID)
                            @Html.CheckBoxFor(m => m.Schedule.MonthInfo[i].IsChecked, new { @class = "checkboxMonth", data_test = Model.Schedule.MonthInfo[i].NofD })
                            @Html.LabelFor(m => m.Schedule.MonthInfo[i].IsChecked, Model.Schedule.MonthInfo[i].monthName)
                        </div>
                    </li>
                }
            </ul>
            <div class="checkbox-inline">
                @Html.CheckBox("checkAll", false, new { @id = "checkAllMonths", @onclick = "toggleMonth(this);" })
                @Html.Label("Select All")
            </div>
        </div>
    </center>

这是我到目前为止制作的JS。我已经设法创建了一个具有3列4行的表格，但是我不知道如何用复选框填充单元格。

<script>

//looping through list of checkboxes in months
        var test = document.querySelectorAll('#checkboxMonth');
        for (var i = 0; i < test.length; i++) {
            console.log(test[i]);
        }

        var colcount = 3;
        var rowcount = 4;

        document.write("<table border=1>")
        for (row = 1; row <= rowcount; row++) {
            document.write("<tr>")
            for (col = 1; col <= colcount; col++) {



                document.write("<td>" + row + "<br>C" + col + "</td>")
            }
            document.write("</tr>")
        }
        document.write("</table>")


    </script>