Events calendar with clickable days using jQuery in ASP.NET MVC3

Question

I'm about to create a solution that will list events that will occur in specific days, and was looking for a Calendar control that I can deal with to make only the days with events clickable, and of course receive this click event and handle the rest myself in my Controller. (something like the old asp:Calendar server-side control in Webforms).

is there any that match this scenario?

Update: What I'm exactly looking for is a Mini Calendar, not a full Calendar like the one in Outlook.

this is what I'm exactly looking for:

Answer 1

jQuery UI can do the exact styling you want.. (and functionality)

You will need to download the jQuery UI script and the Smoothness theme ^{(visit http://jqueryui.com/download/ and select core and datepicker from the radio buttons, and smoothness from the drop-down to the right)}

html

<div id="datepicker"></div>

javascript

var activeDays=[1,4,10,21,22,23,27,28,30];

$('#datepicker').datepicker(
    {
        beforeShowDay: function(date) {
            var hilight = [false,''];

            if ( activeDays.indexOf( date.getDate() ) > -1)
            {
                hilight = [true,'isActive'];
            }

            return hilight;
        }
    }
);

The activeDays variable could hold dates directly (instead of just the day number) and you would need to alter the conditional inside the function to check for a match.

The isActive is a class used to control the styling of the active dates..

.isActive a.ui-state-default{
    background:none;
    background-color:pink;
}

Live example at http://jsfiddle.net/gaby/C95nx/2/

the above code and example renders as

Answer 2

I made something like this a couple of years ago by heavily modifying a javascript calendar called MooTools Event Calendar

There are several other javascript calendars that look pretty good as well. These 2 use JQuery:

• Full Calendar
• Web-Delicious Events Calendar and Planner