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á!