It's Shiny

It's Shiny

Home » Blog » Programming » ASP.NET MVC Calendar by extending the HtmlHelper

ASP.NET MVC Calendar by extending the HtmlHelper

Posted on 2008-7-11 12:11:26 and got 497 reads.

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

Simplest Code

with these code you could get the following calendar shows the current month:

Simplest View

and you can add the default CSS to you View:

Calendar CSS

Now you can find it is not so flat:

Calendar with CSS View

That's the simplest way, isn't it?

Maybe you wanna see the HTML code:

Simple Calendar Source

2. SPECIFY DATE

Selected Date

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

Specified DateSelectedDate Source

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.

Calendar With Data

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:

Calendar with data

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:

Archive Calendar


Comments

I'm waiting for your comment!

Leave your comment: