I'm adapting Datepicker (latest stable version) to serve as GUI for a scheduler. I just want to display an inline calendar with all the required months and be able to select (or unselect) as many individual dates as I want.

In my first draft, I keep an array of selected dates. I add or remove dates in the onSelect callback. I toggle a custom class in the beforeShowDay callback so there's a visual hint if the date is selected.

1. jQuery(function($){
       $(".tipo-programacion").data("fechas", []).datepicker({
           hideIfNoPrevNext: true,
           dateFormat: "yy-mm-dd",
           gotoCurrent: true,
           numberOfMonths: [4, 3],
           minDate: new Date(2010, 1-1, 1),
           maxDate: new Date(2010, 12-1, 31),
           beforeShowDay: function(date){
               return [
                   true,
                   $.inArray($.datepicker.formatDate('yy-mm-dd', date), $(this).data("fechas"))===-1 ? "" : "seleccionado"
               ];
           },
           onSelect: function(dateText, inst){
               var arrayFechas = inst.input.data("fechas");
               var pos = $.inArray(dateText, arrayFechas);
               if( pos===-1 ){
                   arrayFechas.push(dateText);
               }else{
                   arrayFechas.splice(pos, 1);
               }
           }
       });
   });
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

So far so good but, of course, the beforeShowDay code makes it all very slow (in my computer, 1 second in Firefox and 3 seconds in IE).

I've figured out that doing 365 array searches every time I click on a date is one of the bottlenecks. It'd be nice if I could store information for each date inside the cell itself (for instance, the "selected" CSS class) and set it at onSelect. However, the only reference to the clicked cell inside onSelect seems to be a text representation of the date.

Any idea?

P.S. Cool, I cannot highlight words with Ctrl+Shift+Left or Ctrl+Shift+Right