Reactjs: TypeError: Cannot read property 'eventSlots' of undefined

Question

I am creating a calendar with events using reactjs, Now when the calendar shows the current month, when I click next its shows the April month if I click again next I get the following error.

TypeError: Cannot read property 'eventSlots' of undefined.

The error appears in a function where I try to get days with the event here its.

  getDaysWithEvents() {
        // Get all the days in this months calendar view
        // Sibling Months included
        const days = this.getCalendarDays();

        // Set Range Limits on calendar
        this.calendar.setStartDate(days[0]);
        this.calendar.setEndDate(days[days.length - 1]);

        // Iterate over each of the supplied events
        this.props.events.forEach((eventItem) => {

            const eventStart = this.getCalendarDayObject(eventItem.start);
            const eventEnd = this.getCalendarDayObject(eventItem.end);
            const eventMeta = this.getEventMeta(days, eventStart, eventEnd);

            if (eventMeta.isVisibleInView) {
                const eventLength = eventMeta.visibleEventLength;

                console.log("Days", days); 

                const eventSlotIndex = days[eventMeta.firstVisibleDayIndex].eventSlots.indexOf(false); // this line returns error
                //console.log("eventSotsindex", eventSlotIndex);
                let dayIndex = 0;

                // For each day in the event
                while (dayIndex < eventLength) {
                    // Clone the event object so we acn add day specfic data
                    const eventData = Object.assign({}, eventItem);

                    if (dayIndex === 0) {
                         // Flag first day of event
                        eventData.isFirstDay = true;
                    }

                    if (dayIndex === eventLength - 1) {
                        // Flag last day of event
                        eventData.isLastDay = true;
                    }

                    if (!eventData.isFirstDay || !eventData.isLastDay) {
                        // Flag between day of event
                        eventData.isBetweenDay = true;
                    }

                    // Apply Event Data to the correct slot for that day
                   //console.log(eventMeta, dayIndex, days);

                    if (days[eventMeta.firstVisibleDayIndex + dayIndex]) {
                       if (days[eventMeta.firstVisibleDayIndex + dayIndex].eventSlots) {
                            days[eventMeta.firstVisibleDayIndex + dayIndex].eventSlots[eventSlotIndex] = eventData;

                       }
                    }

                    // Move to next day of event
                    dayIndex++;
                }
            }
        });

        return days;
    }

The line of code causing the problem : const eventSlotIndex = days[eventMeta.firstVisibleDayIndex].eventSlots.indexOf(false);

NOTE: If someone wishes here is a repository with full code calenar demo, clone, npm install and npm start

What do I need to do to solve the problem? any help or contributions will be appreciated.

Answer 1

The eventMeta.firstVisibleDayIndex goes out of bounds (i.e., eventMeta.firstVisibleDayIndex is greater than or equal to days.length).

A workaround would be to reset the first day index to 0 as follows:

const firstDayIndex = eventMeta.firstVisibleDayIndex < days.length ? eventMeta.firstVisibleDayIndex : 0;

const eventSlotIndex = days[firstDayIndex].eventSlots.indexOf(false);