Building HTML Calendar Using ASP.NET MVC Razor

Question

I am trying to create a similar calendar as shown in the image below:

I have the following code:

<table>

@for(var item = Model.StartDate; item <=Model.StartDate.AddDays(7); item = item.AddDays(1))
{   
    <th>@item.ToString("ddd")</th>  

    <tr>
    <td>@item.ToString("MMM") @item.ToString("dd")</td>
    </tr>
}



</table>

Which of course does not render the correct result. What can I do to produce the result shown in the image? I don't care about the in-active dates.

Your HTML is invalid. <th> need to be nested in <tr>. Also, are you just trying to create the header row? — zgood
– zgood, Commented Mar 1, 2016 at 19:08
Please check out the layout in the image which I want to create. — JohnDoe
– JohnDoe, Commented Mar 1, 2016 at 19:11
Yes I see the layout image, but in your code above it looks like you are only rendering out the header. Also, do you have any css? — zgood
– zgood, Commented Mar 1, 2016 at 19:16
Yes, I know I am doing it wrong. I am stuck at rendering the complete thing! — JohnDoe
– JohnDoe, Commented Mar 1, 2016 at 19:27

zgood · Accepted Answer · 2016-03-01 19:41:12Z

1

Your HTML should look more like this:

<table>
    <thead>
        <tr>
          @for(var item = Model.StartDate; item <=Model.StartDate.AddDays(7); item = item.AddDays(1))
          {   
                <th>
                    <b>@item.ToString("ddd")</b>  
                    <div>@item.ToString("MMM") @item.ToString("dd")</div>
                </th>
           }
        </tr>
    </thead>
    <tbody>
       <!-- Load rows -->
    </tbody>
</table>

That just gives you an un-styled table header. If all that time range data is just static (doesn't depend on what the StartDateis) as it appears in the image - you said the inactive doesn't matter - then just write it all out

edited Mar 1, 2016 at 19:41

answered Mar 1, 2016 at 19:34

zgood

12.7k2 gold badges27 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

andreasnico · Accepted Answer · 2016-03-01 19:21:39Z

0

This should get you closer (you have to fiddle with the html and times yourself);

The View:

<table>
    <thead>
        <tr>
            @for (int i = 0; i < Model.NumberOfDays; i++)
            {
                <th>
                    @Model.StartDate.AddDays(i).ToString("ddd")
                </th>
            }
        </tr>
    </thead>
    <tbody>
        <tr>
            @for (int i = 0; i < Model.NumberOfDays; i++)
            {            
                <td>@Model.StartDate.AddDays(i).ToString("MMM") @Model.StartDate.AddDays(i).ToString("dd")</td>
            }
        </tr>
    </tbody>
</table>

The Action in the Controller:

public ActionResult Index()    
{    
    CalendarViewModel model = new CalendarViewModel
        {
            NumberOfDays = 7,
            StartDate = DateTime.Now
        };
        return View(model);

}

The Viewmodel:

public class CalendarViewModel
{
    public int NumberOfDays { get; set; }
    public DateTime StartDate { get; set; }
}

edited Mar 1, 2016 at 19:21

answered Mar 1, 2016 at 19:13

andreasnico

1,45614 silver badges25 bronze badges

2 Comments

zgood Over a year ago

Your HTML is invalid. This would create 7 <thead> elements. <thead> elements also need <tr> and <th> elements. See here for reference

andreasnico Over a year ago

@zgood Thank you for your comment, I have updated the answer. Hopefully it's more correct now.

Collectives™ on Stack Overflow

Building HTML Calendar Using ASP.NET MVC Razor

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related