vue.js - 日期范围选择的 Vuetify 日历视图更新不起作用

Question

我正在尝试使用 Vuetify UI 框架获取有关日期范围选择的日历视图更新，但它似乎不起作用。我已经浏览了日历的 vuetifyAPI 文档，但没有运气。请问有什么建议吗？

这是我正在尝试的代码：

new Vue({
  el: "#app",
  vuetify: new Vuetify(),
  data: () => ({
    type: "week",
    date: [],
    menu: false,
    types: ["month", "week", "day", "4day"],
    mode: "stack",
    modes: ["stack", "column"],
    weekday: [0, 1, 2, 3, 4, 5, 6],
    weekdays: [{
        text: "Sun - Sat",
        value: [0, 1, 2, 3, 4, 5, 6]
      },
      {
        text: "Mon - Sun",
        value: [1, 2, 3, 4, 5, 6, 0]
      },
      {
        text: "Mon - Fri",
        value: [1, 2, 3, 4, 5]
      },
      {
        text: "Mon, Wed, Fri",
        value: [1, 3, 5]
      }
    ],
    value: "",
    events: [],
    colors: [
      "blue",
      "indigo",
      "deep-purple",
      "cyan",
      "green",
      "orange",
      "grey darken-1"
    ],
    names: [
      "Meeting",
      "Holiday",
      "PTO",
      "Travel",
      "Event",
      "Birthday",
      "Conference",
      "Party"
    ]
  }),
  computed: {
    dateRange() {
      if (this.date.length) {
        const a = this.formatDate(this.date[0]);
        const b = this.formatDate(this.date[1]);
        return a + "-" + b;
      } else {
        const curr = new Date(); // get current date
        const first = curr.getDate() - ((curr.getDay() + 6) % 7); // First day as Monday of the week
        const last = first + 6; // last day is the first day + 6

        const firstday = new Date(curr.setDate(first))
          .toISOString()
          .split("T")[0];
        const lastday = new Date(curr.setDate(last))
          .toISOString()
          .split("T")[0];
        const a = this.formatDate(firstday);
        const b = this.formatDate(lastday);
        return a + "-" + b;
      }
    }
  },
  methods: {
    formatDate(date) {
      if (!date) return null;
      const [year, month, day] = date.split("-");
      return `${day}/${month}/${year}`;
    },
    changeDateFormat(date) {
      if (!date) return null;
      const [day, month, year] = date.split("/");
      return `${year}-${month}-${day}`;
    },
    loadCalendar() {
      const dates = this.dateRange.split("-");
      let start_date = this.changeDateFormat(dates[0]);
      let end_date = this.changeDateFormat(dates[1]);
      console.log(start_date, end_date);
      this.getEvents({
        start_date,
        end_date
      });
    },
    getEvents({
      start,
      end
    }) {
      console.log(start, end);
      const events = [];

      const min = new Date(`${start.date}T00:00:00`);
      const max = new Date(`${end.date}T23:59:59`);
      const days = (max.getTime() - min.getTime()) / 86400000;
      const eventCount = this.rnd(days, days + 20);

      for (let i = 0; i < eventCount; i++) {
        const allDay = this.rnd(0, 3) === 0;
        const firstTimestamp = this.rnd(min.getTime(), max.getTime());
        const first = new Date(firstTimestamp - (firstTimestamp % 900000));
        const secondTimestamp = this.rnd(2, allDay ? 288 : 8) * 900000;
        const second = new Date(first.getTime() + secondTimestamp);

        events.push({
          name: this.names[this.rnd(0, this.names.length - 1)],
          start: first,
          end: second,
          color: this.colors[this.rnd(0, this.colors.length - 1)],
          timed: !allDay
        });
      }

      this.events = events;
    },
    getEventColor(event) {
      return event.color;
    },
    rnd(a, b) {
      return Math.floor((b - a + 1) * Math.random()) + a;
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.5.12/dist/vuetify.min.js"></script>
<div id="app">
  <v-app id="inspire">
    <div>
      <v-sheet tile height="54" class="d-flex">
        <v-btn icon class="ma-2" @click="$refs.calendar.prev()">
          <v-icon>mdi-chevron-left</v-icon>
        </v-btn>
        <v-menu ref="menu" v-model="menu" :close-on-content-click="false" offset-y min-width="auto">
          <template v-slot:activator="{ on, attrs }">
            <v-text-field v-model="dateRange" v-bind="attrs" v-on="on" prepend-inner-icon="mdil-calendar" flat outlined autocomplete="off" solo hide-details class="search-input">
            </v-text-field>
          </template>
          <v-date-picker v-model="date" range no-title scrollable>
            <v-spacer></v-spacer>
            <v-btn text color="primary" @click="menu = false">
              Cancel
            </v-btn>
            <v-btn text color="primary" @click="$refs.menu.save(date); loadCalendar()">
              OK
            </v-btn>
          </v-date-picker>
        </v-menu>
        <v-btn icon class="ma-2" @click="$refs.calendar.next()">
          <v-icon>mdi-chevron-right</v-icon>
        </v-btn>
      </v-sheet>
      <v-sheet height="600">
        <v-calendar ref="calendar" v-model="value" :weekdays="weekday" :type="type" :events="events" :event-overlap-mode="mode" :event-overlap-threshold="30" :event-color="getEventColor" @change="getEvents"></v-calendar>
      </v-sheet>
    </div>
  </v-app>
</div>

请在此处找到工作的 codepen：https ://codepen.io/harshitha_naidu/pen/VwzXMXR?editors=1010

标签： vue.jsvuetify.js