加载数据前的全日历初始化空日历

问题描述

我正在尝试使用 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,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>

解决方法

您可以添加 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,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。它应该保证在加载组件之前一切都设置好了。试试看，看看这个想法是否适合你...