Need a jQuery calendar plugin, specific dates

Question

I need a jQuery calendar plugin where I can specify what dates are selectable but still show an entire month on the calendar.

Answer 1

Use Datepicker, just add handlers to the events that check the dates.

Sample (Original from this forum post)

<script type="text/javascript">

      $(document).ready(function(){
        $("#datepicker").datepicker({
              dateFormat: 'dd/mm/yyyy',
              beforeShowDay:  disableDays
        });
      });

      var disabledDays = ["12/10/2009", "13/10/2009", "15/11/2009"];

      function disableDays(date) {

              var sDate = date.getDate().toString() + "/" + 
                          (date.getMonth()+1).toString() + "/" + 
                          date.getFullYear().toString();
              if ($.inArray(sDate, disabledDays ) != -1) return [true];
              else return [false];

      }

  </script>

Another sample (faster?) from here

$(function() {
 // format: specialDays.year.month.day
 var specialDays = {
          '2009': {
  '1': {'1': {tooltip: "New Year's Day", className: "holiday"}},
  '4': {
     '10': {tooltip: "Good Friday", className: "holiday"}, 
     '13': {tooltip: "Easter Monday", className: "holiday"}
   },
  '5': {
      '4': {tooltip: "Early May Bank Holiday", className: "holiday"},
      '15': {tooltip: "Spring Bank Holiday", className: "holiday"}
   },
  '8': {'31': {tooltip: "Summer Bank Holiday", className: "holiday"}},
  '12': {
      '25': {tooltip: "Christmas Day", className: "holiday"},
      '28': {tooltip: "Boxing Day", className: "holiday"}
   }
  }
 }; 

 $('#datepicker').datepicker({beforeShowDay: function(date) {
               var d = date.getDate(),
     m = date.getMonth()+1,
     y = date.getFullYear();

     if (specialDays[y] && specialDays[y][m] && specialDays[y][m][d]) {
     var s = specialDays[y][m][d];
       return [true, s.className, s.tooltip]; // selectable
  }
     return [false,'']; // non-selectable
 }});
});

Answer 2

jCal is great at this and very customizeable.

jCal homepage

This will show 1 month and only have the 3 days specified allowed to be selected.

     $(document).ready(function () {
  $('#calOne').jCal({
   day: new Date((new Date()).setMonth(7)),
   days: 1,
   showMonths: 1,
   dayOffset: 0,
   dow:  ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
   dCheck:   function (day) { return $.inArray(
   [(day.getMonth() + 1), day.getDate(), day.getFullYear()].join('/'),
   ['8/21/2009', '8/28/2009', '8/29/2009']) != -1},
   callback: function (day, days) {
     $('#calResult').val(day.getFullYear() + '-' + ( day.getMonth() + 1 ) + '-' + day.getDate());
     return true;
    }
   });
  $('#calOne').disableSelection();
 });