Click here to Skip to main content
15,867,568 members
Articles / Web Development / XHTML
Article

ASP.NET MVC Calendar by extending the HtmlHelper

Rate me:
Please Sign up or sign in to vote.
2.71/5 (5 votes)
24 Jul 2008CPOL2 min read 106.9K   2.1K   23   14
You need a Calendar to show months or archive data or others, then you'd like this.

Introduction

Would you like a calendar in your ASP.NET MVC project?

Maybe you are looking froward to a calendar control that can embedded 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!

Background

What is it ? / Features

I've just released the run time 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.

Using the code

Okay, let's get started on the code right now!

1. SIMPLEST CALENDAR

ASP.NET
<%= Html.Calendar() %>        

Now you'll get a calendar show the current moth:

cal-4-simplest-view-styled.jpg

2. SPECIFY DATE

ASP.NET
<%= Html.Calendar("otherCalendar", DateTime.Now.AddMonths(-1)) %> 

Then you'll get a different calender,

And you'll customize the CSS affected the calendar.

You could get one looks like:

cal-4-simplest-view-styled.jpg

3. WITH DATA

Now let me show you the advanced options.

ASP.NET
<%
var allPosts = MvcCalendarSample.Models.Post.GetAllPosts(); 
var datesArray = from d in allPosts 
                 select new DateTime(d.CreatedAt.Ticks);
%>

<%= Html.Calendar("archiveCalendar", datesArray, "home", "archive") %> 

You'll get a calendar with some links which look like "/home/archive?date=2008-7" or "/home/archive?date=2008-7-12".

You can customize your routes:

C#
routes.MapRoute("Archive","home/archive/{date}",new{controller="Home",action="Archive"});

Then you can get the url like: "/home/archive/2008-7", is it beautiful?

Please download the code sample to run it live!

4.Archive Calendar

But where do the links bring me to? the "/home/archive/2008-7"?

Of course you need an action there and a View too.

Let's have a look at the code:

In the /Views/Home/Archive.aspx file:

ASP.NET
<h2>Mvc Calendar 4: with data and links and selected date</h2>
<%
    var selectedDate = DateTime.Parse(ViewData["date"].ToString());
    var allPosts = MvcCalendarSample.Models.Post.GetAllPosts();
    var datesArray = from d in allPosts
                     select new DateTime(d.CreatedAt.Ticks);
%>

<%= Html.Calendar("archiveCalendar", selectedDate, datesArray, "home", "archive") %>

<hr />

The Archive action:

C#
/// <summary>
/// The archive view will hold the query string value
/// </summary>
/// <param name="date"></param>
/// <returns></returns>
public ActionResult Archive(string date)
{
    DateTime selectedDate;

    if(!DateTime.TryParse(date,out selectedDate))
       return this.Content("param date is not in a valid DateTime format");

    //you can add your own date validation codes here

    ViewData["Title"] = "Archived Posts in " + date;
    ViewData["date"] = date;

    var allPosts = Post.GetAllPosts();
    var dateSplits = date.Split('-');

    var filteredPosts = new List<Post>();

    if (dateSplits.Length == 3)
    {
        //year-month-day format
        filteredPosts = (from p in allPosts
                        where p.CreatedAt.Year == selectedDate.Year &&
                              p.CreatedAt.Month == selectedDate.Month &&
                              p.CreatedAt.Day == selectedDate.Day
                        select p).ToList();

    }
    else if (dateSplits.Length == 2)
    {
        //year-month format
        filteredPosts = (from p in allPosts
                         where p.CreatedAt.Year == selectedDate.Year &&
                               p.CreatedAt.Month == selectedDate.Month
                         select p).ToList();
    }


    ViewData["posts"] = filteredPosts;


    return View();
}

Now you'll see we have the data on the view and then I'll drop the posts in the View page:

ASP.NET
<h2>Archived posts in <%= ViewData["date"] %></h2>
<%
    var selectedPosts = ViewData["posts"] as List<MvcCalendarSample.Models.Post>;
%>
<p>Total <%= selectedPosts.Count%> posts in <%= ViewData["date"] %></p>

<% foreach (var post in selectedPosts)
   { %>
<p>[<%= post.CreatedAt %>] <a href="#"><%= post.Title %></a></p>
<%} %> 

Now you can see the page like:

cal-11-archive-view.jpg

The archive view calendar has finished.
Hope you 'll like this.

History

This is the first release.

Any comment must be my great thanks.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior)
China China
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralMy vote of 1 Pin
Luck)1-Apr-10 6:13
Luck)1-Apr-10 6:13 
GeneralCant compile: higher version than referenced assembly Pin
Luck)1-Apr-10 6:02
Luck)1-Apr-10 6:02 
GeneralRe: Cant compile: higher version than referenced assembly Pin
taniab12-Oct-10 4:09
taniab12-Oct-10 4:09 
General<param name="helper">the HtmlHelper object</param> Pin
D Hayes30-Jan-10 0:51
D Hayes30-Jan-10 0:51 
QuestionHow to Use Pin
taweechok17-Sep-09 17:36
taweechok17-Sep-09 17:36 
Generalerror Pin
eguru1623-Jul-09 20:22
eguru1623-Jul-09 20:22 
GeneralRe: error Pin
tmc&wyg6-Sep-11 0:37
tmc&wyg6-Sep-11 0:37 
GeneralInstallation Pin
MarrsAttax10-Jul-09 2:01
MarrsAttax10-Jul-09 2:01 
Questionhow to navigate the tabpanels in tabcontainer Pin
axman_podili@yahoo.co.in28-May-09 2:52
axman_podili@yahoo.co.in28-May-09 2:52 
Generalsource Pin
bluetx21-May-09 23:13
bluetx21-May-09 23:13 
GeneralCannot compile Pin
Bobby Fu9-May-09 3:52
Bobby Fu9-May-09 3:52 
GeneralRe: Cannot compile PinPopular
Richard L9-May-09 11:19
Richard L9-May-09 11:19 
GeneralOr you could just use jquery and set the class of the field Pin
LSpencerD17-Sep-08 11:34
LSpencerD17-Sep-08 11:34 
QuestionCalendar's source ? Pin
cssBrave30-Aug-08 1:18
cssBrave30-Aug-08 1:18 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.