1
resposta

Problema com events do Kalend

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

Opa Emmanuelle, tudo certo?

O erro em questão indica uma incompatibilidade entre o tipo de propriedade "events" esperada pelo componente Kalend e o formato da interface criado. O erro "missing the following properties from type" indica que o tipo "{ [k: string]: IKalendEvento[]; }" não possui todas as propriedades necessárias do tipo "CalendarEvent[]".

Embora compatíveis, o que pode estar ocorrendo é que a biblioteca Kalend espera receber um array de objetos do tipo "CalendarEvent[]" como propriedade "events".

Fico à disposição.

Tenha um bom dia e bons estudos.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software