Click here to Skip to main content
13,513,907 members
Click here to Skip to main content
Add your own
alternative version


23 bookmarked
Posted 11 Jul 2008

ASP.NET MVC Calendar by extending the HtmlHelper

, 24 Jul 2008
Rate this:
Please Sign up or sign in to vote.
You need a Calendar to show months or archive data or others, then you'd like this.


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!


What is it ? / Features

I've just released the run time binary on my codeplex project, you can find it here:

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!


<%= Html.Calendar() %>        

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



<%= 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:



Now let me show you the advanced options.

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:


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:

<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:

/// <span class="code-SummaryComment"><summary></span>
/// The archive view will hold the query string value
/// <span class="code-SummaryComment"></summary></span>
/// <span class="code-SummaryComment"><param name="date"></param></span>
/// <span class="code-SummaryComment"><returns></returns></span>
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:

<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:


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


This is the first release.

Any comment must be my great thanks.


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


About the Author

Shiny Zhu
Software Developer (Senior)
China China
No Biography provided

You may also be interested in...

Comments and Discussions

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

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.180417.1 | Last Updated 24 Jul 2008
Article Copyright 2008 by Shiny Zhu
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid