C# & Razor: Dynamic Calendar Using HTML Table in ASP.NET

Question

Good day,

I'm trying to create a dynamic calendar using HTML table. I have a few problems that I'm facing right now.

I have no idea how to specify if the specific first day of the month is Sunday, Monday, Tuesday, Wednesday, Thursday or Saturday.
How to fix my table body to show the table properly layout like a calendar.

So far, these are my codes in my razor page.

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

Here's the current output:

Thank you in advance.

user3559349 · Accepted Answer · 2018-06-25 07:59:55Z

To generate a calendar as a table, you need to generate a 7 column x 6 row grid to allow for all possible months so your loop needs to iterate 42 times (not the number of days in the month), where the first cell is the last Sunday of the previous month (unless the current month starts on a Sunday)

To calculate the date in the first cell, use

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

Then to generate the table in your view

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

You might also want to style any days not in the current month differently, in which case you could conditional add a class name, for example

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

Rikin Patel · Accepted Answer · 2019-01-07 07:18:13Z

Asp.net MVC Example:

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

Here is full example details

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

Collectives™ on Stack Overflow

C# & Razor: Dynamic Calendar Using HTML Table in ASP.NET

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related