Maybe trivial but cannot see why my events are not display, anyone has an idea?
would be grateful for help, ma events are being fetch from server in format like below:

I was trying multiple data type but somehow it doesnt read them properly

description : "raz" end_date : "2024-05-15T12:00:00" event_title : "raz" id : 2 organizer_id : 3 start_date : "2024-05-15T10:00:00"

Br Jakub

import { AxiosRequestConfig } from "axios";
import useData from "../services/useData";

export interface CalendarEvent {
  id: number;
  organizer_id: number;
  event_title: string;
  start_date: string;
  end_date: string;
  description: string;
}

const useEventsNew = (organizerId: number) => {
  const endpoint = `/calendar/events/?organizer_id=${organizerId}`;
  const requestConfig: AxiosRequestConfig = {};
  const { data, error, isLoading } = useData<CalendarEvent>(
    endpoint,
    requestConfig
  );

  return { data, isLoading, error };
};

export default useEventsNew;

import React, { useState, useEffect } from "react";
import { Calendar as BigCalendar, momentLocalizer } from "react-big-calendar";
import moment from "moment";
import "react-big-calendar/lib/css/react-big-calendar.css";
import { useDisclosure } from "@chakra-ui/react";
import AddEventModal from "../test/AddEventModal";
import useEventsNew, { CalendarEvent } from "../../../../hooks/useEventNew";

const localizer = momentLocalizer(moment as any);

const Calendar: React.FC = () => {
  const [events, setEvents] = useState<CalendarEvent[]>([]);
  const { isOpen, onOpen, onClose } = useDisclosure();
  const [startDate, setStartDate] = useState(new Date());
  const [endDate, setEndDate] = useState(new Date());

  const { data, isLoading, error } = useEventsNew(3);

  useEffect(() => {
    if (!isLoading && !error && data) {
      setEvents(data);
    }
  }, [isLoading, error, data]);

  const handleSelectSlot = (slotInfo: any) => {
    setStartDate(slotInfo.start);
    setEndDate(slotInfo.end);
    onOpen();
  };

  return (
    <>
      <BigCalendar
        selectable
        localizer={localizer}
        events={events}
        views={["month", "week", "day"]}
        step={60}
        showMultiDayTimes
        defaultDate={new Date()}
        onSelectSlot={handleSelectSlot}
        style={{ height: 500 }}
      />
      <AddEventModal
        isOpen={isOpen}
        onClose={onClose}
        startDate={startDate}
        endDate={endDate}
      />
    </>
  );
};

export default Calendar;

declare module "react-big-calendar" {
  import { ComponentType } from "react";
  import { Moment } from "moment";

  export interface Event {
    id: number;
    organizer_id: number;
    event_title: string;
    start_date: string;
    end_date: string;
    description: string;

    allDay?: boolean;
    resource?: any;
  }

  export interface BigCalendarProps {
    localizer: any;
    events: Event[];
    views: string[];
    step: number;
    showMultiDayTimes: boolean;
    defaultDate: Date;
    selectable: boolean;
    onSelectSlot: (slotInfo: any) => void;
    style?: React.CSSProperties;
  }

  export const Calendar: ComponentType<BigCalendarProps>;
  export function momentLocalizer(moment: Moment): any;
  export const Views: { [view: string]: string };
}

i have tried with different data type but is simply doesnt match