使用 Jquery datepicker 创建活动预订日历 [关闭]答案

【问题标题】：Create a event Booking calendar with Jquery datepicker [closed]使用 Jquery datepicker 创建活动预订日历 [关闭]
【发布时间】：2017-08-07 04:27:51
【问题描述】：

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

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

【问题讨论】：

使用像Fullcalndar 这样的插件，您可以做到这一点以及更多......
我可以像上面的例子一样把 Fullcalender 变小，然后像上面的日历一样自定义它吗？
你真的可以用它做任何你想做的事。不同的样式、不同的方法和侦听器，用于检测点击并更改 cal 上所有内容的值。 This 是迷你模式的一个例子。
看起来不错，谢谢！我可以集成php和ajax吗？

标签： javascript php jquery datepicker

【解决方案1】：

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

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

$(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.
    }
  });
});

.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;
}

<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>

【讨论】：