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

【问题标题】：C# & Razor: Dynamic Calendar Using HTML Table in ASP.NETC# & Razor：在 ASP.NET 中使用 HTML 表格的动态日历
【发布时间】：2018-06-25 03:10:49
【问题描述】：

早安，

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

我不知道如何指定特定月份的第一天是星期日、星期一、星期二、星期三、星期四还是星期六。
如何修复我的表格主体以像日历一样正确显示表格布局。

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

@{ // 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>

这是当前的输出：

提前谢谢你。

【问题讨论】：

标签： c# asp.net asp.net-mvc razor

【解决方案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>
}

【讨论】：

【解决方案2】：

Asp.net MVC 示例：

@{
    int currentMonth = DateTime.Now.Month;
    int currentYear = DateTime.Now.Year;
    DateTime firstDay = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 1);
    int daysInCurrentMonth = DateTime.DaysInMonth(firstDay.Year, firstDay.Month);
    DateTime lastDay = new DateTime(currentYear, currentMonth, daysInCurrentMonth);
    // Sunday casted to int gives 0 but that will not work for us, we need 7 to be able to calculate number of empty cells correctly
    int dayOfWeekFirst = ((int)firstDay.DayOfWeek > 0) ? (int)firstDay.DayOfWeek : 7;
    int dayOfWeekLast = ((int)lastDay.DayOfWeek > 0) ? (int)lastDay.DayOfWeek : 7;
}

HTML：

<tr align="center">
    <!-- filling up space of previous month -->
    @for (int a = 1; a < dayOfWeekFirst; a++)
    {
        @:<td></td>
    }
    <!-- filling up space of current month -->
    @for (int i = 1; i <= daysInCurrentMonth; i++)
    {
        DateTime renderedDay = new DateTime(firstDay.Year, firstDay.Month, i);


        // if Sunday
        if (renderedDay.DayOfWeek == DayOfWeek.Sunday)
        {
            @:<td class="calendar-holiday">@i</td></tr><tr align="center">
        }
        // if Saturday
        else if (renderedDay.DayOfWeek == DayOfWeek.Saturday)
        {
            @:<td class="calendar-holiday">@i</td>
        }
        // if normal day
        else
        {
            @:<td>@i</td>
        }            
    }
    <!-- filling up space of next month -->
    @for (int a = 1; a <= 7-dayOfWeekLast; a++)
    {
        @:<td></td>
    }
</tr>

这里是完整的示例详细信息

https://forums.asp.net/t/1695201.aspx?Making+a+Calendar+table+

【讨论】：