如何显示带有突出显示日期的jquery日历并禁止单击（只读）

Question

我使用Jquery日历显示每日房间容量。到目前为止，它可以正常工作。

现在，我只想在我的开始屏幕上显示此日历（只读模式）。不应该标记日期，因为没有功能，如果标记了日期（蓝色），但是什么也没发生，则用户可能会感到困惑。

我已经尝试了全部here，但是没有任何反应，或者显示的日历没有突出显示。

如何显示我的精彩集锦日并禁止点击？

$(function() {
  var dates = [{
      date: '05/13/2020',
      type: 'highlightFull',
      note: 'note1'
    },
    {
      date: '05/11/2020',
      type: 'highlightSemi',
      note: 'note2'
    }
  ];

function highlightDays(date) {
  var res = [true, ""];
  
  $.each(dates, function(k, v) {
    if (v.date === $.datepicker.formatDate("mm/dd/yy", date)) {
      res = [true, v.type, v.note];
    }
  });
  
  return res;
}

  $('#datepicker').datepicker({
    beforeShowDay: highlightDays,
    onClose: function(d,i){setTimeout(function(){$('input').datepicker("show");},1)}
  });

});

td.highlightFull {
  border: none !important;
  padding: 1px 0 1px 1px !important;
  background: none !important;
  overflow: hidden;
}

td.highlightFull a {
  background: #ad3f29 url(bg.png) 50% 50% repeat-x !important;
  border: 1px #88a276 solid !important;
}

td.highlightSemi {
  border: none !important;
  padding: 1px 0 1px 1px !important;
  background: none !important;
  overflow: hidden;
}

td.highlightSemi a {
  background: #ffff33 url(bg.png) 50% 50% repeat-x !important;
  border: 1px #88a276 solid !important;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

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

Answer 1

有一些CSS-如果您甚至不希望它们更改月份，请删除tbody

#datepicker tbody [data-event=click] { pointer-events: none; }

$(function() {
  var dates = [{
      date: '05/13/2020',
      type: 'highlightFull',
      note: 'note1'
    },
    {
      date: '05/11/2020',
      type: 'highlightSemi',
      note: 'note2'
    }
  ];

function highlightDays(date) {
  var res = [true, ""];
  
  $.each(dates, function(k, v) {
    if (v.date === $.datepicker.formatDate("mm/dd/yy", date)) {
      res = [true, v.type, v.note];
    }
  });
  
  return res;
}

  $('#datepicker').datepicker({
    beforeShowDay: highlightDays,
    onClose: function(d,i){setTimeout(function(){$('input').datepicker("show");},1)},
    onSelect: function() { return false }
  });

});

td.highlightFull {
  border: none !important;
  padding: 1px 0 1px 1px !important;
  background: none !important;
  overflow: hidden;
}

td.highlightFull a {
  background: #ad3f29 url(bg.png) 50% 50% repeat-x !important;
  border: 1px #88a276 solid !important;
}

td.highlightSemi {
  border: none !important;
  padding: 1px 0 1px 1px !important;
  background: none !important;
  overflow: hidden;
}

td.highlightSemi a {
  background: #ffff33 url(bg.png) 50% 50% repeat-x !important;
  border: 1px #88a276 solid !important;
}

#datepicker tbody [data-event=click] { pointer-events: none; }

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

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