C# 和 Razor：在 ASP.NET 中使用 HTML 表格的动态日历

Question

再会，

我正在尝试使用 HTML 表格创建动态日历。我现在面临一些问题。

1. 我不知道如何指定该月的特定第一天是星期日、星期一、星期二、星期三、星期四还是星期六。

2. 如何修复我的表格主体以像日历一样正确显示表格。

到目前为止，这些是我在剃刀页面中的代码。

@{ // responsible for getting the first and last days of the month
    var getDate = DateTime.Now;

    var firstDayOfTheMonth = new DateTime(getDate.Year, getDate.Month, 1);
    var lastDayOfTheMonth = firstDayOfTheMonth.AddMonths(1).AddDays(-1);

    var numberOfDays = Convert.ToInt16(lastDayOfTheMonth.ToString("dd"));
}

// My HTML table

<table border="1">
<thead>
    <tr>
        <th>Sunday</th>
        <th>Monday</th>
        <th>Tuesday</th>
        <th>Wednesday</th>
        <th>Thursday</th>
        <th>Friday</th>
        <th>Saturday</th>
    </tr>
</thead>
<tbody>
    <tr>
        @for (var i = 0; i < numberOfDays + 1; i++)
        {
            <td>@i</td>
        }
    </tr>
</tbody>

这是当前的输出：

先感谢您。

Answer 1

要将日历生成为表格，您需要生成一个 7 列 x 6 行的网格以允许所有可能的月份，因此您的循环需要迭代 42 次（不是一个月中的天数），其中第一个单元格是上个月的最后一个星期日（除非当月从星期日开始）

要计算第一个单元格中的日期，请使用

DateTime startDate = firstDayOfTheMonth.AddDays(-(int)firstDayOfTheMonth.DayOfWeek);

然后在您的视图中生成表格

<table>
    <thead>
        .... // add day name headings
    </thead>
    <tbody>
        <tr>
            @for (int i = 0; i < 42; i++)
            {
                DateTime date = startDate.AddDays(i);
                if (i % 7 == 0 && i > 0)
                {
                    @:</tr><tr> // start a new row every 7 days
                }
                <td>@date.Day</td>
            }
        </tr>
    </tbody>
</table>

您可能还想以不同的方式设置当前月份以外的任何日期的样式，在这种情况下，您可以有条件地添加类名，例如

if (startDate.Month == getDate.month)
{
    <td class="current">@date.Day</td>
}
else
{
    <td>@date.Day</td>
}