1
resposta

[Dúvida] Problema com events do Kalend

Estou repostando uma dúvida de outra pessoa, porque aconteceu a mesma coisa comigo:

Ao refatorar o index do componente Calendário, apareceu o seguinte erro:

ERROR in src/components/Calendario/index.tsx:38:9
TS2740: Type '{ [k: string]: IKalendEvento[]; }' is missing the following properties from type 'CalendarEvent[]': length, pop, push, concat, and 29 more.  
    36 |     <div className={style.Container}>
    37 |       <Kalend
  > 38 |         events={Object.fromEntries(eventosKalend)}
       |         ^^^^^^
    39 |         initialDate={new Date().toISOString()}
    40 |         hourHeight={60}
    41 |         initialView={CalendarView.WEEK}

Aparentemente, a prop event é configurada como do tipo 'CalendarEvent' e isso impede que o formato da interface que criamos, IKalendEvento, seja usada. Esse é o código do Calendário:

import React from 'react'
import style from './Calendario.module.scss';
import ptBR from './localizacao/ptBR.json'
import Kalend, { CalendarView } from 'kalend'
import 'kalend/dist/styles/index.css';
import { useRecoilValue } from 'recoil';
import { listaDeEventosState } from '../../state/Atom';

interface IKalendEvento {
  id?: number
  startAt: string
  endAt: string
  summary: string
  color: string
}

const Calendario: React.FC = () => {

  const eventos = useRecoilValue(listaDeEventosState);
  const eventosKalend = new Map<string, IKalendEvento[]>();

  eventos.forEach(evento => {
    const chave = evento.inicio.toISOString().slice(0, 10)
    if (!eventosKalend.has(chave)) {
      eventosKalend.set(chave, [])
    }
    eventosKalend.get(chave)?.push({
      id: evento.id,
      startAt: evento.inicio.toISOString(),
      endAt: evento.fim.toISOString(),
      summary: evento.descricao,
      color: 'blue'
    })
  })
  return (
    <div className={style.Container}>
      <Kalend
        events={Object.fromEntries(eventosKalend)}
        initialDate={new Date().toISOString()}
        hourHeight={60}
        initialView={CalendarView.WEEK}
        timeFormat={'24'}
        weekDayStart={'Monday'}
        calendarIDsHidden={['work']}
        language={'customLanguage'}
        customLanguage={ptBR}
      />
    </div>
  );
}

export default Calendario

Uma coisa que me deixou confusa sobre isso é que na própria biblioteca kalend a interface de 'CalendarEvent' é compatível com a da IKalendEvento:

export interface CalendarEvent {
    id: any;
    startAt: string;
    endAt: string;
    timezoneStartAt?: string;
    timezoneEndAt?: string;
    summary: string;
    color: string;
    type?: CALENDAR_EVENT_TYPE;
    internalID?: string;
    children?: {
        agendaView?: ReactNode;
        daysView?: ReactNode;
        monthView?: ReactNode;
    };
    [key: string]: any;
}

Tentei encontrar uma solução mas não consegui, alguém poderia me ajudar? Agradeço desde já!

1 resposta

Boa tarde. Sem o código todo fica um pouco ruim de ajudar mas pelo o que vejo, problema ta rolando porque a propriedade events esperada pelo componente Kalend deve ser um array de CalendarEvent, mas atualmente você está passando um objeto gerado por Object.fromEntries(eventosKalend), que é um objeto com chaves de datas e valores como arrays de IKalendEvento[].

Você pode transformar o eventosKalend em um array de CalendarEvent.

Substitua:

<Kalend events={Object.fromEntries(eventosKalend)} ... />

Por:

<Kalend events={Array.from(eventosKalend.values()).flat()} ... />
  1. eventosKalend.values() retorna apenas os arrays de eventos (descarta as chaves).
  2. Array.from(eventosKalend.values()) transforma o Map em uma array de arrays.
  3. .flat() une todos os eventos em um único array, que é o formato esperado pelo Kalend.

Isso deve resolver;