0

I am new to LWC so i maybe doing something silly mistake here. I have implemented a custom calendar solution via a LWC. Now i want to get the events for the current user so what i have done is created an Apex method and having a @wire in my lwc js. The problem is that although it seems that i get the response, i cannot get its length. Code below: In line 32 i try to console.log this.myEvents.length but it returns undefined. However, it gets inside the if, so this.myEvents maybe has the results...

import { LightningElement, wire, track, api } from "lwc";
import { loadScript, loadStyle } from "lightning/platformResourceLoader";
import FullCalendarJS from "@salesforce/resourceUrl/FullCalendarJS";
import { NavigationMixin } from "lightning/navigation";
import { encodeDefaultFieldValues } from "lightning/pageReferenceUtils";
import getMyEvents from "@salesforce/apex/fullCalendarController.getEventsForCurrentUser";
import { RecordFieldDataType } from "lightning/uiRecordApi";

export default class FullCalendarJs extends LightningElement {
  @wire(getMyEvents) myEvents;

  renderedCallback() {
    Promise.all([
      // First step: load FullCalendar core
      loadStyle(this, FullCalendarJS + "/packages/core/main.css"),
      loadScript(this, FullCalendarJS + "/packages/core/main.js")
    ])
      .then(() => {
        // Second step: Load the plugins in a new promise
        Promise.all([
          loadStyle(this, FullCalendarJS + "/packages/daygrid/main.css"),
          loadScript(this, FullCalendarJS + "/packages/daygrid/main.js"),
          loadStyle(this, FullCalendarJS + "/packages/timegrid/main.css"),
          loadScript(this, FullCalendarJS + "/packages/timegrid/main.js"),
          loadScript(this, FullCalendarJS + "/packages/interaction/main.js")
        ]).then(() => {
          // Third step: calls your calendar builder once the plugins have been also loaded
          this.initialiseFullCalendar();
          console.log("initialize!!!!");
          if (this.myEvents) {
            getMyEvents();
            console.log("length of events is :" + this.myEvents.length);
          }
        });
      })
      .catch(error => {
        // Catch any error while loading the scripts here
      });
  }
  getMyEvents() {
    return this.myEvents;
  }
  initialiseFullCalendar() {
    // eslint-disable-next-line no-console
    console.log("begin");
    const ele = this.template.querySelector("div.fullcalendar");
    // eslint-disable-next-line no-console
    console.log("ele >>> " + ele);
    var calendar = new FullCalendar.Calendar(ele, {
      header: {
        left: "prev,next,today",
        center: "title",
        right:
          "timeGridWeek,timeGridDay,dayGridMonth,dayGridWeek,dayGrid,timegrid"
      },
      plugins: [
        "interaction",
        "resourceDayGrid",
        "resourceTimeGrid",
        "dayGrid",
        "timegrid"
      ],

      events: [
        {
          id: "1",
          start: "2020-04-03",
          end: "2020-04-04",
          title: "event 1"
        },
        {
          id: "2",
          start: "2020-04-03T09:00:00",
          end: "2020-04-03T14:00:00",
          title: "event 2"
        },
        {
          id: "3",
          start: "2020-04-03T12:00:00",
          end: "2020-04-03T06:00:00",
          title: "event 3"
        },
        {
          id: "4",
          start: "2020-04-03T07:30:00",
          end: "2020-04-03T09:30:00",
          title: "event 4"
        },
        {
          id: "5",
          start: "2020-04-03T10:00:00",
          end: "2020-04-03T15:00:00",
          title: "event 5"
        }
      ],
      defaultView: "dayGridWeek"
    });

    calendar.render();
    console.log("Rendering");
  }

  createNewEvent() {
    console.log("called");
    this[NavigationMixin.Navigate]({
      type: "standard__objectPage",
      attributes: {
        objectApiName: "Account",
        actionName: "new"
      },
      state: {
        nooverride: "1"
      }
    });
  }
}


Apex

public with sharing class fullCalendarController {
    @AuraEnabled(cacheable=true)
    public static List<Event> getEventsForCurrentUser() {
        List<Event> eventsList = [select id, Subject, OwnerId, StartDateTime, EndDateTime, Street__c, City__c, Country__c, Postal_Code__c from Event where ownerId =: UserInfo.getUserId()];
        return eventsList;
    }
}

Any help would be really appreciated

2

The result of a wire call stored in a property is an object that contains:

  • data property for the successful response's payload
  • error property when the wire fails, containing the error details.

To access your data you need to use this.myEvents.data.*, e.g. this.myEvents.data.length.

Take a look at the documentation, which says:

propertyOrFunction — A private property or function that receives the stream of data from the wire service. If a property is decorated with @wire, the results are returned to the property’s data property or error property. If a function is decorated with @wire, the results are returned in an object with a data property or an error property.

1
1

When you create a wire method to a prop(@wire(getMyEvents) myEvents), this property is reactive, so, you don't need to create a getter like you did:

getMyEvents() {
    return this.myEvents;
  }

And also, as Phil Says the array in your case gonna be inside the data property, but you have another issue there, both methods runs in parallel, so even If you resolve in this way:

    get myEventsLength() {
         return this.myEvents.data ? this.myEvents.data.length : 0;
    }
    console.log("length of events is :" + myEventsLength);

That number will always depend on what loads faster, I suggest @wire to a method and if you get the data, call the calendar init.

1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.