Fullcalendar 在加载数据之前初始化（空日历）

Question

我正在尝试使用 Vuejs 从 Fullcalendar 实施时间线日历，但日历在数据准备好之前正在初始化。如果我导航到其他页面并返回，它会起作用。所有数据都在那里。我创建了方法：getEmployees() 和 getApprovedAbsences()，以创建包含所需数据的数组。我是 Vue js 的新手，所以我们将不胜感激。谢谢

代码：

<template>
    <div class="admin-calendar">
        <FullCalendar :options="calendarOptions" />
    </div>
</template>

<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'
import resourceTimelinePlugin from '@fullcalendar/resource-timeline'
import ptLocale from '@fullcalendar/core/locales/pt';
import moment from "moment";

export default {
  components: { FullCalendar },

  props: {
    getAbsencesRequests: {
      type: Array,
    },
    employees: {
      type: Array,
    },
  },
  
  data() {
    return {
      calendarOptions: {
        plugins: [ resourceTimelinePlugin ],
        headerToolbar: {
            left: 'today prev,next',
            center: 'title',
            right: 'resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth'
        },
        locales: [ ptLocale ],
        locale: 'pt',
        aspectRatio: 1.6,
        initialView: 'resourceTimelineDay',
        resourceGroupField: 'department',
        resourceAreaHeaderContent: 'Colaboradores',
        handleWindowResize: false,
        height: 400,
        resources: this.getEmployees,
        events: this.getApprovedAbsences,
      }
    }
  },

  methods: {
    async getApprovedAbsences() {
        let absenceList = []
        this.getAbsencesRequests.forEach(absence => {
          if (absence.status === "APPROVED") {
            absence.periods.forEach((period) => {
              absenceList.push({
                start: moment(period.validFromLocaleDate, "DD/MM/YYYY").format("YYYY-MM-DD"),
                end: moment(period.validToLocaleDate, "DD/MM/YYYY").format("YYYY-MM-DD"),
                title: absence.absenceName,
                resourceId: absence.requesterId,
              });
            });
          }
        })  
        return absenceList
    },

    async getEmployees() {
      let employeeList = []
      this.employees.forEach(employee => {
        employeeList.push({
          id: employee.id,
          department: employee.department["id"] === "" ? "SEM DEPARTAMENTO ATRIBUÍDO" : employee.department["name"],
          title: employee.name,
        })
      })
      return employeeList
    }
  },
}
</script>

Answer 1

您可以添加 if 语句来检查数据是否准备就绪。像这样：

<template>
    <div class="admin-calendar">
        <FullCalendar 
             v-if="employeeList && absenceList" 
             :options="calendarOptions" />
    </div>
</template>

这只会在资源和事件不为空后加载 FullCalendar 组件。

现在，将 data 更改为：

data() {
    return {
      employeeList: null,
      absenceList: null,
      calendarOptions: {
        plugins: [ resourceTimelinePlugin ],
        headerToolbar: {
            left: 'today prev,next',
            center: 'title',
            right: 'resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth'
        },
        locales: [ ptLocale ],
        locale: 'pt',
        aspectRatio: 1.6,
        initialView: 'resourceTimelineDay',
        resourceGroupField: 'department',
        resourceAreaHeaderContent: 'Colaboradores',
        handleWindowResize: false,
        height: 400,
        resources: this.getEmployees,
        events: this.getApprovedAbsences,
      }
    }
 }

并更改加载方法以将数据存储在组件变量中：

methods: {
    async getApprovedAbsences() {
        let tmpAbsenceList = []
        this.getAbsencesRequests.forEach(absence => {
          if (absence.status === "APPROVED") {
            absence.periods.forEach((period) => {
              tmpAbsenceList.push({
                start: moment(period.validFromLocaleDate, "DD/MM/YYYY").format("YYYY-MM-DD"),
                end: moment(period.validToLocaleDate, "DD/MM/YYYY").format("YYYY-MM-DD"),
                title: absence.absenceName,
                resourceId: absence.requesterId,
              });
            });
          }
        })
        absenceList = tmpAbsenceList  
    },

    async getEmployees() {
      let tmpEmployeeList = []
      this.employees.forEach(employee => {
        tmpEmployeeList.push({
          id: employee.id,
          department: employee.department["id"] === "" ? "SEM DEPARTAMENTO ATRIBUÍDO" : employee.department["name"],
          title: employee.name,
        })
      })
      employeeList = tmpEmployeeList
    }
  },

最后，在 created():

内调用 getMethods

async created() {
    await this.getApprovedAbsences()
    await this.getEmployees()
}

这应该首先加载所有内容，然后调用 FullCalendar。它应该保证在加载组件之前设置好所有内容。试试看这个想法是否适合你...

Fullcalendar 在加载数据之前初始化（空日历）

Fullcalendar initializing before data is loaded (Empty calendar)

javascript

vue.js

fullcalendar

timeline