CODEWITHSUNDEEP
vue.jsdatepickervuejs-datepicker
Andy Brown
Andy Brown

Reputation: 5522

Using vuejs-datepicker how do I customise appearance of each date?

I am using the excellent component vuejs-datepicker, and as is so often the case with add-ins like this, it does 99% of what I want, but sadly that's not quite enough ...

I understand that I can set highlighted dates and disabled dates, but I would like to be able to apply different formatting to different dates (so dates in London appear in red, Manchester blue and Timbuktu green for example).

The closest I've got to this is to use the day-cell-content property:

:day-cell-content="setcell"

In conjunction with this function:

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

This works, but the only thing I can get it is the day number, and I want the date. Other possibilities include these properties:

enter image description here

However, I can't get these to work, and anyway they apply to the whole calendar, and not to each individual date.

It's really frustrating, because I've had a look at the object model (sample shown below), and all I'd need to do would be to tag each day somehow!

enter image description here

Am I missing anything?

Upvotes: 2

Views: 4557

Answers (1)

Roy J
Roy J

Reputation: 43881

If you want to work with the tools datepicker gives you, I think you'll have to modify your approach. I use the highlighted prop to highlight dates for a selected city. I put them in the beforeCalendarHeader slot so that you can select the city with the picker open. This is pretty simple if it will work for you.

I think that if you must do custom coloring of dates, you need to get into the source of the component and create a custom extension.

It is not clear under your plan, what color cells would be if dates overlapped (maybe they just don't overlap in your use case).

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>

Upvotes: 3

Related Questions