使用Jquery datepicker创建活动预订日历

Question

是否可以使用Jquery datepciker创建活动预订日历？ 请参阅下面的日历图片

例如，当我在一个地方为一个活动预订一整天时，日期将为红色，仅在一天它将为黄色，并且仅在晚上它将在日期单元格中为绿色。当我点击一个日期时它会抓住日期并带上预订表格并预订全天/白天/晚上等。给我一些想法。

Answer 1

如果你只是想在jQuery datepicker的某些特定日期显示一些颜色......

您可以使用beforeShowDay和函数来检查日期是否在给定数组中...
然后，根据找到的数组，在日期中添加一个类 您可以决定禁用日期（无法选择）。

＆＃13;

＆＃13;

$(document).ready(function(){
  var red = ["2017-08-02","2017-08-04","2017-08-06"];
  var yellow = ["2017-08-09"];
  var green = ["2017-08-10","2017-08-11"];

  $("#calendar").datepicker({
    defaultDate: '08/07/2017',      // Just for this demo longevity on SO ;)
    
    beforeShowDay: function(date){
      var dateISO = $.datepicker.formatDate('yy-mm-dd', date);
      //console.log(dateISO);

      if(red.indexOf(dateISO)>-1){
        return [true,"red"]        // Enabled, class
      }
      if(yellow.indexOf(dateISO)>-1){
        return [true,"yellow"]
      }
      if(green.indexOf(dateISO)>-1){
        return [true,"green"]
      }
      return [true]  // If not found, must at least return the enabled boolean.
    }
  });
});

＆＃13;

.red a{
  background-color: red !important;
  border-radius: 20px;
}
.yellow a{
  background-color: yellow !important;
  border-radius: 20px;
}
.green a{
  background-color: green !important;
  border-radius: 20px;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>

<div id="calendar"></div>

＆＃13;

＆＃13;

＆＃13;