Click here to Skip to main content
Click here to Skip to main content

ASP.NET MVC Calendar by extending the HtmlHelper

, 24 Jul 2008 CPOL
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

Comments and Discussions

GeneralMy vote of 1 PinmemberLuck)1-Apr-10 7:13 
GeneralCant compile: higher version than referenced assembly PinmemberLuck)1-Apr-10 7:02 
GeneralRe: Cant compile: higher version than referenced assembly Pinmembertaniab12-Oct-10 5:09 
General<param name="helper">the HtmlHelper object</param> PinmemberD Hayes30-Jan-10 1:51 
QuestionHow to Use Pinmembertaweechok17-Sep-09 18:36 
Generalerror Pinmembereguru1623-Jul-09 21:22 
GeneralRe: error Pinmembertmc&wyg6-Sep-11 1:37 
GeneralInstallation PinmemberMarrsAttax10-Jul-09 3:01 
Questionhow to navigate the tabpanels in tabcontainer 3:52 
Respected Sir
I have one doubt i have one tabcontainer and it contains 3 tabpanels in the bottom of the tabcontainer i used save button for save all the content But
my task is to apper next button in place of save that is my task please help me i am new to this work
Generalsource Pinmemberbluetx22-May-09 0:13 
GeneralCannot compile PinmemberBobby Fu9-May-09 4:52 
GeneralRe: Cannot compile PinmemberRichard L9-May-09 12:19 
GeneralOr you could just use jquery and set the class of the field PinmemberLSpencerD17-Sep-08 12:34 
QuestionCalendar's source ? PinmembercssBrave30-Aug-08 2:18 

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

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

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