突出显示 jQuery UI 日历上的日期计数

Question

我正在尝试为我的活动部分实施 jquery ui 日历，毫无疑问，它工作正常，但我在那个日历中有一个自定义请求 uirements 我想要突出显示没有事件也特别是，例如 1 月 21 日有 2 个事件，1 月 25 日有 3 个事件，然后它会突出显示这些日期的计数。

是否可以使用 jquery ui

$(document).ready(function(){
$('#event').datepicker();
});

Answer 1

您可以使用 beforeShowDay，一个 jQuery UI 日期选择器小部件选项。

一个以日期作为参数的函数，并且必须 return 一个包含以下内容的数组：

[0]: true/false 表示这个日期是否可选
[1]：要添加到日期单元格的 CSS class 名称或 "" 默认显示
[2]：此日期

tooltip

该函数在显示之前在日期选择器 中的每一天被调用。

对于您的问题：可行的解决方案。

var highlightdates = ["2016-1-21", "2016-1-25"];

$("#datepicker1").datepicker({
  dateFormat: 'yy-mm-dd',
  beforeShowDay: function(date) {
    var m = date.getMonth(),
      d = date.getDate(),
      y = date.getFullYear();
    if ($.inArray(y + '-' + (m + 1) + '-' + d, highlightdates) != -1) {
      return [true, 'css-class-to-highlight', 'Get the count on Tooltip'];
    }
    return [true];
  }
});

.css-class-to-highlight a {
  background-color: green !important;
  background-image: none !important;
  color: White !important;
  font-weight: bold !important;
  font-size: 12pt;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">


<p>Date:
  <input id="datepicker1" type="text">
</p>

Fiddle

参考：Documentation

突出显示 jQuery UI 日历上的日期计数

Highlight count with date on jQuery UI calendar

javascript

jquery

calendar

jquery-ui