Two days ago I created a cal with events from my database and it worked just fine. now, not even the basic setup works with dummy events evn though my events print properly to the console.
export default function CalendarModal({ onClose }) {
const [savedPosters, setSavedPosters] = useState<IPoster[]>([]);
const [profile] = useRecoilState(profileState);
const localizer = momentLocalizer(moment);
const [isReady, setIsReady] = useState(false);
const [events, setEvents] = useState<
{
title: string;
start: Date;
end: Date;
}[]
>([]);
useEffect(() => {
setIsReady(false);
const storedProfile = localStorage.getItem("userProfile");
if (storedProfile) {
fetchData();
}
}, []);
useEffect(() => {
if (isReady) {
makeEvents();
}
}, [isReady]);
const fetchData = async () => {
await getUserLikes();
setIsReady(true);
};
const getUserLikes = async () => {
try {
const likesResp = await fetch(actual backend call
);
if (likesResp.ok) {
const likes = await likesResp.json();
setSavedPosters(likes.data);
}
} catch (error) {
console.error("Error fetching likes:", error);
}
};
const makeEvents = () => {
const newEvents = [
...savedPosters.map((poster) => {
const startDate = moment(poster.startDate).toDate();
const endDate = poster.endDate
? moment(poster.endDate).toDate()
: moment(poster.startDate).toDate();
const event = {
title: poster.title!,
start: startDate,
end: endDate,
};
return event;
}),
];
setEvents(newEvents);
};
const customStyle = {
minHeight: 500,
width: 700,
fontFamily: "'quicksand', sans-serif",
};
const eventStyleGetter = (event, start, end, isSelected) => {
const style = {
border: "none",
borderRadius: "0",
backgroundColor: isSelected
? "var(--dark-purple70)"
: "var(--dark-purple100)",
};
return {
style,
};
};
return (
{modal creation} ...
{events.length > 0 && (
<ChakraProvider>
<Calendar
localizer={localizer}
events={events}
defaultView="week"
views={["day", "week", "month"]}
startAccessor="start"
endAccessor="end"
style={customStyle}
eventPropGetter={eventStyleGetter}
/>
</ChakraProvider>
)}
);
}
I tried creating a basic calendar with dummy events and they no longer show up either. I've also set some custom styling such as the height. My calendar was displaying properly a few days ago and now no events show up. The main change was that the profile page now allows for editing, but that's a separate component to the calendar.