ASP.NET MVC: Showing dates using DayCalendarPage extension method

DayCalendarIn my events web site I need to show event dates in lists so users can easily see them. I decided to use day calendar view like shown on image on left. As there are more than one view where I need this functionality I wrote HTML extension method that outputs day calendar view based on current date. In this posting I will show you my extension method and show you how to use it.

DayCalendarPage extension method

Here is the extension method that generates day calendar page like shown above.

public static MvcHtmlString DayCalendarPage(this HtmlHelper helper, DateTime date)
{
   
var buffer = new StringBuilder
();
    buffer.Append(
@"<div class=""dayCalendarPage"">"
);

    buffer.Append(
@"    <div class=""title"">"
);
    buffer.Append(date.ToString(
"MMM"
));
    buffer.Append(
@"    </div>"
);

    buffer.Append(
@"    <div class=""day"">"
);
    buffer.Append(date.ToString(
"dd"
));
    buffer.Append(
@"    </div>"
);

    buffer.Append(
@"</div>"
);

   
return MvcHtmlString.Create(buffer.ToString());
}

This method outputs HTML that is made to nice day calendar page using CSS.

CSS

Here is my CSS that makes calendar look nice. It is not very optimal I think but it works.

/* DAY CALENDAR PAGE */ 
.dayCalendarPage
 
{
    
clear:none
;
    
float:left
;
    
text-align:center

    
border:1px solid lightgrey

    
margin-right:10px
;
}

.dayCalendarPage .title
 
{
    
background-color:Red
;
    
color:White
;
    
width:50px
;    
}

.dayCalendarPage .day
 
{
    
font-size:15pt
;
    
font-weight:bold
;
    
padding-top: 5px
;
    
padding-bottom: 5px;
}

Now as you have extension method and styles added to your project it is time to use them.

How to use DayCalendarPage method

Here is the example about how to use DayCalendarPage extension method.

@foreach (var item in Model.Results) { 
    
<tr>
 
       
<td colspan="10">
 
           @Html.DayCalendarPage(item.StartDate)
          
<div>
 
              @Html.ActionLink(item.Title,
"event", new
{ id = item.Id})
             
<br />
 
              @item.Description
          
</div>
 
      
</td>
 
   
</tr> 
}

Now it’s time to see the output.

Result

Here’s my test result. This data is arbitrary and please don’t take dates here seriously.

DayCalendar in action

Feel free to use this code in your projects if you like it.

Liked this post? Empower your friends by sharing it!

Gunnar Peipman

Gunnar Peipman is ASP.NET, Azure and SharePoint fan, Estonian Microsoft user group leader, blogger, conference speaker, teacher, and tech maniac. Since 2008 he is Microsoft MVP specialized on ASP.NET.

    5 thoughts on “ASP.NET MVC: Showing dates using DayCalendarPage extension method

    • May 20, 2011 at 6:11 pm
      Permalink

      Hah… I like it a lot! :) Thanks for sharing!

    • May 20, 2011 at 11:28 pm
      Permalink

      You could also use strongly typed display/editor templates for that.

      You can give template name with extra parameter to DisplayFor() method or use UIHint attribute directly on the model property.

      In MVC 3 you can also define HTML helpers, but global helpers work only when they are placed in the App_Code folder, which I personally don’t like.

      But in the end, it’s just a matter of preference :)

      Btw, I like your CSS design on that :)

    • May 21, 2011 at 5:47 am
      Permalink

      Thanks for feedback guys :)

      Using extension method seemed to me like the best option – short mark-up output and no plans for further changes of it as all modifications can be done using CSS.

      About my CSS… I’m not sure if this is optimal, maybe it can be done better. Also I don’t know yet if it breaks easily or not if some other styles change.

    • May 22, 2011 at 6:04 am
      Permalink

      Thanks !

    • August 3, 2011 at 9:40 am
      Permalink

      I need to show events to list to use this article ,thanks for giving the tips for users,

    Leave a Reply

    Your email address will not be published. Required fields are marked *