使用 vuejs-datepicker 如何自定义每个日期的外观？

Question

我正在使用出色的组件 vuejs-datepicker，就像这样的插件经常出现的情况，它完成了我想要的 99%，但遗憾的是，这还不够......

我知道我可以设置突出显示的日期和禁用的日期，但我希望能够对不同的日期应用不同的格式（例如，伦敦的日期显示为红色、曼彻斯特蓝色和廷巴克图绿色）。

我最接近的方法是使用 day-cell-content 属性：

:day-cell-content="setcell"

结合这个功能：

setcell(x) {      
  // put day number in italics
  return '<em>' + (x.date) + '</em>';
}

这行得通，但我唯一能得到的是日期，我想要日期。其他可能性包括以下属性：

但是，我无法让这些工作，而且无论如何它们适用于整个日历，而不是适用于每个单独的日期。

这真的很令人沮丧，因为我已经查看了对象模型（示例如下所示），而我需要做的就是以某种方式标记每一天！

我错过了什么吗？

Answer 1

如果您想使用 datepicker 提供的工具，我认为您必须修改您的方法。我使用 highlighted 属性来突出显示选定城市的日期。我将它们放在beforeCalendarHeader slot 中，以便您可以选择打开选择器的城市。如果它适合你，这很简单。

我认为如果你必须对日期进行自定义着色，你需要进入组件的源代码和create a custom extension。

在您的计划中不清楚，如果日期重叠（也许它们只是在您的用例中不重叠），那么颜色单元格会是什么。

const app = new Vue({
  el: '#app',
  data: {
    selectedCity: 'London',
    cityDates: {
      London: [
        [1, 13],
        [1, 14],
        [1, 15]
      ],
      Manchester: [
        [1, 16],
        [1, 17],
        [1, 18]
      ]
    }
  },
  computed: {
    highlighted() {
      return this.selectedCity ? {
        dates: this.cityDates[this.selectedCity].map((pair) => new Date(2019, ...pair))
      } : {};
    }
  },
  components: {
    vuejsDatepicker
  }
});

<div id="app">
  <vuejs-datepicker :highlighted="highlighted" :open-date="new Date(2019, 1, 1)">
    <div slot="beforeCalendarHeader" class="calender-header">
      <div v-for="city in Object.keys(cityDates)">
        <label><input type="radio" v-model="selectedCity" :value="city">{{city}}</label>
      </div>
    </div>
  </vuejs-datepicker>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuejs-datepicker"></script>