Element implicitly has an 'any' type because expression of type '"eventGroups"' can't be used to index type 'MonthViewDay<EventGroupMeta>'

Question

I'm following the tutorial for Angular 14+ calendar here: https://mattlewis92.github.io/angular-calendar/#/group-similar-events

But it's giving me an exception when trying to assign the array.

Element implicitly has an 'any' type because expression of type '"eventGroups"' can't be used to index type 'MonthViewDay<EventGroupMeta>'.
  Property 'eventGroups' does not exist on type 'MonthViewDay<EventGroupMeta>'.ts(7053)

What am I missing here?

beforeMonthViewRender({
        body,
      }: {
        body: CalendarMonthViewDay<EventGroupMeta>[];
      }): void {
        // month view has a different UX from the week and day view so we only really need to group by the type
        body.forEach((cell) => {
          var groups: any;
          cell.events.forEach((event: CalendarEvent<EventGroupMeta>) => {
            groups[event.meta!.type] = groups[event.meta!.type] || [];
            groups[event.meta!.type].push(event);
          });
          cell['eventGroups'] = Object.entries(groups);
        });
      }

Answer 1

You need to dig into the types used in the github packages, I was able to trace it to this file but I am under the impression that the error needs to be removed, so you can use the type {[key: string]: any} which will accept any inputs.

beforeMonthViewRender({
    body,
  }: {
    body: CalendarMonthViewDay<EventGroupMeta>[];
  }): void {
    // month view has a different UX from the week and day view so we only really need to group by the type
    body.forEach((cell) => {
      const groups: {[key: string]: any} = {};
      cell.events.forEach((event: CalendarEvent<EventGroupMeta>) => {
        groups[event.meta.type] = groups[event.meta.type] || [];
        groups[event.meta.type].push(event);
      });
      cell['eventGroups'] = Object.entries(groups);
    });
  }

Since you did not define type for groups we are getting the error, where angular is asking you to define a type!

Answer 2

I know this is not a permanent fix (which is why I didn't accept my own answer). But as a dirty workaround I added // @ts-ignore to ignore the error.