我正在使用MaterializeDatePicker在列表中切换假期。根据我的代码，当我点击某一天时，该事件会同时添加/删除到列表中/从列表中删除。但是，对于datepicker中的样式，只有在我单击另一天或重新启动datepicker时，它才会更新。
我以7月1日和20日为例。您可以尝试在其他日期添加/删除。
我希望datepicker中的样式也能像列表一样同时更新。有什么想法吗？
提前谢谢。

var holidays = [1625086800000, 1626728400000];

var datepicker = document.querySelector('#addHoliday')

var options = {
  showClearBtn: true,
  events : holidays.map ((day) => {return new Date(day).toDateString()}),
  onSelect : function (day) {
    var index = holidays.indexOf(day.valueOf())
    if(index > -1) {
        holidays.splice(index,1)
    } else {
      holidays.push(day.valueOf())
      holidays.sort()
    };
    M.Datepicker.getInstance(document.querySelector('#addHoliday')).options.events = holidays.map ((day) => {return new Date(day).toDateString()})

    disposeHolidays()   
  }
}

M.Datepicker.init(datepicker, options)
disposeHolidays()

function disposeHolidays () {
  holidaysList.innerHTML = holidays.map ((day) => {
    return '<li class="collection-item">' + new Date(day).toDateString() + '</li>'}).join('')
}

.has-event {
  background : #FF6666 !important
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<div class="row">
  <div class="input-field col s6 l3 offset-s1 offset-l1">
    <input type="text" class="datepicker" id="addHoliday">
    <label for="addHoliday">Pick a date</label>

    <div class="row">
      <ul class="collection" id="holidaysList">
      </ul>
    </div>
  </div> 
</div>