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

Question

I am going to create a solution that will list events that will occur on certain days, and was looking for a Calendar control that I can handle to make only the days with events clickable and, of course, get this click event and handle the rest myself in my Controller. (something like old asp: server-to-server management in Webforms).

are there any correspondences to this scenario?

Update: I am looking for a mini calendar, not a complete calendar such as Outlook.

this is what i'm exactly looking for:

Answer 1

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

You need to download the jQuery UI script and the Smoothness theme ^{(visit http://jqueryui.com/download/ and select Kernel and datepicker using the radio buttons and smoothness from the drop-down list 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 can contain dates directly (and not just the day number), and you will need to change the conditional expression inside the function to check the match.

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

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

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

the above code and example are displayed as

Answer 2

I did something like this a couple of years ago, changing the javascript calendar strongly called MooTools Event Calendar

There are several other javascript calendars that also look nice. These 2 use jQuery:

• Full calendar
• Calendar and Web Planner

Answer 3

You can use the jquery UI datepicker along with the beforeShowDay event to configure which days you can choose and which days not. Here is the minimal code that disables date picker 5, and you can extend the logic.

 $(function() { $( "#datepicker" ).datepicker({ beforeShowDay: function(date) { if(date.getDate() == 5){ return[false, '']; } else{ return[true, '']; } } }); }); 

Quick demo here

Answer 4

Many people use jQuery UI datepicker . I am not sure about asp.net's built-in mvc calendar management.

Answer 5

If you can still use Javascript in your code, take this control and customize its user interface. It has source code for your own customization requirements.

http://www.javascriptkit.com/script/script2/eventscalendar.shtml#

Answer 6

I understand that this is already late as an answer, but your question is pretty high in Google results, so hopefully this will help other people. Here I wrote an article on this topic: MVC3 Datapixel Calendar of Events

Answer 7

How to limit the number of days available in jquery ui date-picker

or

http://test.thecodecentral.com/cms/jqueryui/datepicker/

Answer 8

You can integrate MVC with silverlight and use the Silverlight calendar http://developerstyle.posterous.com/silverlight-calendar-with-mvc-3

Answer 9

To complement @ gaby-aka-g-petrioli's answer, I included the onChangeMonthYear and onSelect , which allow you to receive clicks.

 $("#my_datepicker_calendar").datepicker({ dateFormat : 'm/d/yy', // month/day/year changeMonth : true, changeYear : true, beforeShowDay : function(date) { var mm = date.getMonth() + 1, dd = date.getDate(), yy = date.getFullYear(); var dt = mm + "/" + dd + "/" + yy; if ( typeof selectedDates[dt] != 'undefined' ) { return [true, "", selectedDates[dt].content]; } return [false, ""]; }, onChangeMonthYear : function(year, month) { alert('Month selected is ' + month + ' and year is ' + year); }, onSelect : function(date) { var date = date.split("/"); alert('Date selected is ' + date[0] + '/' + date[1] + '/' + date[2] + '.'); } });