Question

美好的一天

我正在尝试使用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>

这是当前输出：

谢谢。

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>
}

Answer 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+

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

2 个答案: