Question

I tried creating jquery calendar where I need to show only first row of days with previous next navigation. I struggled a lot to remove all rows apart from first but was unable to find any solution.

Right now I am done with something like this.

$(document).ready(function() {
  $(function() {
    $( '#datepicker' ).datepicker({
      showOtherMonths: true,
      selectOtherMonths: true
    });             
  });
});

I searched on jquery.ui and didnt find any option regarding this feature. You can refer Image. (no matter I’ll take care of css)

Thankyou!!

Answer 1

You can bind this function to buttons previous and next for each month:

$('.ui-datepicker-calendar tbody tr').each(function(index){

    if(index>0){
       $(this).hide();            
    }            

});

and in the document ready function. Anyway, this will only hide all rows different from the first one, but in this way you will get only the first row for each month.

If you want to move across the rows hitting next and previous, I believe, this is also possible:

1. You should add two separate buttons for next and prev row of the
   current month.
2. Write a simple function (and bind it to the new buttons). If “next”
   is press, select the current shown row, hide it, and show the next
   one. With “prev” button – the reverse logic.