C # & Razor: динамический календарь с использованием таблицы HTML в ASP.NET

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

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+

Answer 2

Чтобы сгенерировать календарь в виде таблицы, вам нужно сгенерировать сетку из 7 столбцов и 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>
}