Vue

by saitam

HTML

<script src="https://unpkg.com/v-calendar"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.26.0/moment.min.js"></script>
<div id="app">

  <h2>Calendar:</h2>
  
  <button @click="redOnOff = !redOnOff">
  red: {{ redOnOff }}
  </button>
  <button @click="blueOnOff = !blueOnOff">
  blue: {{ blueOnOff }}
  </button>
  <button @click="yellowOnOff = !yellowOnOff">
  yellow: {{ yellowOnOff }}
  </button>
  <v-date-picker
    :attributes="attributes"
    is-inline
    is-expanded
  />

</div>

Vue

new Vue({
  el: "#app",
  data: {
  	myDates: [],
  	redOnOff: true,
    blueOnOff: true,
    yellowOnOff: true,
    startDate: moment("2020-06-01T00:00:00.000Z"),
    endDate : moment("2020-08-01T00:00:00.000Z").endOf('month'),
  },
  methods: {
    generateArrayOfDates() {
      var allMonthsInPeriod = []
      // loop by months
      while (this.endDate > this.startDate) {
        allMonthsInPeriod.push(new Date(moment(this.startDate).add(10, 'days')));
        this.startDate = this.startDate.add(1, "month");
      }
      return allMonthsInPeriod
    }
  },
  created() {
  	this.myDates = this.generateArrayOfDates()
  },
  computed: {
  	attributes() {
      return [

        // Today
        { 
          highlight: this.blueOnOff ? 'blue' : false,
          dates: new Date()
        },
        // Today + 1 + 2 +3
        { 
          highlight: this.yellowOnOff ? 'yellow' : false,
          dates: [
            new Date(moment(moment.now()).add(1, 'days')),
            new Date(moment(moment.now()).add(2, 'days')),
            new Date(moment(moment.now()).add(3, 'days'))
          ]
        },
        { 
          highlight: this.redOnOff ? 'red' : false,
          dates: this.myDates
        },
      ]
    }
    
  }
 
})