vue.js - events.push(event) 在全日历中工作，但不在资源时间网格日视图中

Question

我希望在选择时间时添加事件。

这在没有资源的 fullcalendar 上运行良好。

但是，当我将 defaultview 更改为“resourceTimeGridDay”时，它不会创建任何事件。我已经添加了 resourceID。当我检查 console.log 但现在显示在日历上时，它会生成 EVENTS 数组

有什么帮助吗？

我正在使用 Vue js。

   <template>
  <FullCalendar
    schedulerLicenseKey="GPL-My-Project-Is-Open-Source"
    ref="fullCalendar"
    defaultView="resourceTimeGridDay"
    :plugins="calendarPlugins"
    :config="config"
    :events="EVENTS"
    :resources="resources"
    :selectable="true"
    :editable="true"
    @select="handleSelect"
  />
</template>

<script>
import FullCalendar from "@fullcalendar/vue";
import { Calendar } from "@fullcalendar/core";
import resourceTimelinePlugin from "@fullcalendar/resource-timeline";
import resourceTimeGridPlugin from "@fullcalendar/resource-timegrid";
import InteractionPlugin from "@fullcalendar/interaction";

import { mapGetters } from "vuex";

export default {
  components: {
    FullCalendar // make the <FullCalendar> tag available
  },
  data() {
    return {
      calendarPlugins: [resourceTimeGridPlugin, InteractionPlugin],

      },
      resources: [
        { id: "a", title: "Auditorium A" },
        { id: "b", title: "Auditorium B" },
        { id: "c", title: "Auditorium C" }
      ],
      calendarApi: null,

    };
  },

  methods: {
    handleSelect(arg) {

      var resourceid = arg.resource.id;

      this.$store.commit("events/ADD_EVENT", {
        title: "test",
        start: arg.start,
        end: arg.end,
        resourceID: resourceid
      });

    },


  },
  mounted() {
    this.calendarApi = this.$refs.fullCalendar.getApi();
  },

  computed: {
    ...mapGetters("events", ["EVENTS"]),

  },


};
</script>

<style lang="scss">
@import "~@fullcalendar/core/main.css";
@import "~@fullcalendar/daygrid/main.css";
@import "~@fullcalendar/timeline/main.css";
@import "~@fullcalendar/resource-timeline/main.css";
@import "~@fullcalendar/timegrid/main.css";
</style>

标签： vue.jsfullcalendarfullcalendar-scheduler