
Home » Blog » Programming » ASP.NET MVC Calendar by extending the HtmlHelper
Would you like a calendar in your ASP.NET MVC project?
Maybe you are looking foward to a calendar control that can embeded in your ASP.NET MVC project.
Maybe much more people suggest you try a javascript calendar to meet your requirements.
Maybe you were trying the <asp:Calendar ...> control but it need a form with runat="server" that is not so clean and easy to use with our MVC web.
...
And now, you can finish them exactly easy just use <%= Html.Calendar() %> in your view page!
What is it ? / Features
I've just released the runtime binary on my codeplex project, you can find it here: http://www.codeplex.com/mvcapps
The Mvc Calendar is extended the HtmlHelper so you can easily embed it in your View page of an ASP.NET MVC project.
It can generate a well-formed XHTML table and with some CSS classes by default. So you can customize it by customizing the CSS.
And also you can specify the SelectedDate property so the calendar shows the month you want to let it show.
If you want to show archive data on the calendar, You can supply an array with some DateTime objects to the calendar, then it'll calculate whether a day need a hyperlink because it contains some data like articles or blog posts on that day. You should also specify the controller name and action name to the calendar to make the links.
How to?
Okay, let's get started on the code right now!
1. SIMPLEST CALENDAR
![]()
with these code you could get the following calendar shows the current month:

and you can add the default CSS to you View:

Now you can find it is not so flat:

That's the simplest way, isn't it?
Maybe you wanna see the HTML code:
![]()
2. SPECIFY DATE

These code could generate a calendar with specified Date and it's also have specified Name which the XHTML id property:

![]()
That's also easy enough.
3. WITH DATA
Are you ready for a deeper view?
CAUTION: This feature is not perfect now and I'll update it later, If you have any idea, please leave me some words. Great thanks!!
Now I'll show you the first view of this feature.

the posts collection contains elements with a DateTime property. And I just need the DateTime field for the calendar. So, the rawDates it is.
The method looks like:
public static string Calendar(this HtmlHelper helper, string name, DateTime selectedDate, IEnumerable<DateTime> rawDates, string controllerName, string actionName);
You can get the calendar looks like:

What are the differences?
1. You could found some links with some days.
2. You could get the Previous Month or Next Month links or both. You'll find the Previous Month links to "/blog/archive?date=2008-5" and the 2 links to "/blog/archive?date=2008-6-2". And now the calendar only retun the "date" as the parameter name and "year-month-day" or "year-month" formt for the link.
Why?
Cuz the rawDates passed to the calendar and the controller name and the action name. so teh calendar generate the links for those date contains data records in your array.
How to use?
So you can make an archive system like mine on this site or other amazing systems.
Okay, It's a brief intro for the calendar.
You can find the source and binary on the codeplex project mentioned above and here also:
Runtime binary: u/files/AllWebIdea_Mvc.zip and Source: u/files/AllWebIdea_Mvc_Source.zip
Comments are great welcome!
Thanks a lot.
UPDATE:
There is an Mvc Calendar Sample on codeplex: http://www.codeplex.com/mvcapps/Release/ProjectReleases.aspx?ReleaseId=15203
And the archive calendar looks like:

Comments
I'm waiting for your comment!