Flatpickr onDayCreate事件：更改特定日期的颜色

Question

我正在为Flatpickr（https://flatpickr.js.org/）的onDayCreate事件苦苦挣扎，我想更改特定日子的颜色并尝试使用以下代码：

<style>
.redClass {
  background-color: red !important;
}
.greenClass {
  background-color: green !important;
}
</style>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.2.3/flatpickr.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.2.3/themes/material_orange.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.2.3/flatpickr.js"></script>
<script>
        var dates = {
    20191029: 1,
    20191030: 0,
    20191031: 0,
    20191101: 1,
  },
  classDict = {
    0: 'redClass',
    1: 'greenClass',
  };

function get2DigitFmt(val) {
  return ('0' + val).slice(-2);
}
flatpickr("#dayCreate", {
  onDayCreate: function(dObj, dStr, fp, dayElem) {
    var date = dayElem.dateObj,
      // Note the + 1 in the month.
      key = date.getFullYear() + get2DigitFmt(date.getMonth() + 1) + get2DigitFmt(date.getDate()),
      value = classDict[dates[key]];
    if (value) {
      dayElem.className += ' ' + value;
    }
  }
});
</script>

<div class="form-group">
<label for="my_date" class=" form-control-label">Reservation Date</label>
<input type="text" name="tarih" class="form-control dayCreate" id="id_date>
 </div>

但是浏览器不显示数据选择器，并且控制台输出中没有出现错误