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