CODEWITHSUNDEEP
reactjsfullcalendar
Patrick Johnson
Patrick Johnson

Reputation: 1

How to use events as a function in React FullCalendar?

I currently need to dynamically load events in my database, however after numerous attempts, I still have not gotten it to work with React FullCalendar. Has anyone successfully gotten this to work?

In this method, I am successfully able to get the events to load in the calendar, however, my API is being continuously being called. This led me to think it was because I do not have an arrow function in events

const [events, setEvents] = useState(0);
const getEvents = async () => {
    //Get events from database
    const theEvents = await ...
    setEvents(theEvents);
};

const returnEvent = () => {
    getEvents();
    return events;
}

<FullCalendar
    timeZone={'Europe/London'}
    now={DateTime.local().setZone('Europe/London').toISO()}
    ref={calendarRef}
    initialView="dayGridMonth"
    height='100%'
    ...
    events = {returnEvent()}
/>

However, if I do

<FullCalendar
    timeZone={'Europe/London'}
    now={DateTime.local().setZone('Europe/London').toISO()}
    ref={calendarRef}
    initialView="dayGridMonth"
    height='100%'
    ...
    events = {() => returnEvent()}
/>

My API gets called continuously called and none of the events load on the calendar. I think if you do arrow functions on events, none of the events will load as when I do something like this, it does not even work.

const returnEvent = () => {
    let todayStr = new Date().toISOString().replace(/T.*$/, '') // YYYY-MM-DD of today
    const events = [
      {
        id: createEventId(),
        title: 'All-day event',
        start: todayStr
      },
      {
        id: createEventId(),
        title: 'Timed event',
        start: todayStr + 'T12:00:00'
      }
    ]
    // getEvents();
    return events;
}

<FullCalendar
    timeZone={'Europe/London'}
    now={DateTime.local().setZone('Europe/London').toISO()}
    ref={calendarRef}
    initialView="dayGridMonth"
    height='100%'
    ...
    events = {() => returnEvent()}
/>

However, if I change events = {returnEvent()} it does work. Can someone please send an example or guide me on how to call events as a function in React FullCalendar?

Upvotes: 0

Views: 3265

Answers (3)

katsikar
katsikar

Reputation: 1

Leaving this here in case still needed:

import React, { useState } from 'react';
import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';

const DynamicCalendar = () => {
  const [events, setEvents] = useState([]);

  const fetchEvents = async (start, end) => {
    const response = await fetch(`https://api.example.com/events?start=${start}&end=${end}`);
    const data = await response.json();
    setEvents(data);
  };

  return (
    <FullCalendar
      plugins={[dayGridPlugin]}
      initialView="dayGridMonth"
      events={events}
      datesSet={(info) => fetchEvents(info.startStr, info.endStr)}
    />
  );
};

Upvotes: 0

Bryan Dellinger
Bryan Dellinger

Reputation: 5294

I was just struggling with the same problem this is how I go it to work.

I had to place the events I received from my api call into the successcallback.

  <FullCalendar
         displayEventEnd
        initialView="dayGridMonth"
        headerToolbar={{
          left: "prev,next",
          center: "title",
          right: "dayGridMonth,timeGridWeek,timeGridDay"
        }}
        plugins={[dayGridPlugin, timeGridPlugin]}
        events={(info, successCallback) => getEvents(info, successCallback)}
      />

 const getEvents = (info : any, successCallback: any) =>{
     getAcademicCalendarEvents(info.startStr, info.endStr).then((events) =>{
      successCallback(events)
      })
     }

Upvotes: 1

Willey Ohana
Willey Ohana

Reputation: 402

When you change the line to events = {returnEvent()}, events is being assigned to the returned value of calling returnEvent().

You do not need to return anything from returnEvent() because events is available in your application state. If you want to pass the events state to <FullCalendar>, you can simply pass it the prop events = {events}.

<FullCalendar
    timeZone={'Europe/London'}
    now={DateTime.local().setZone('Europe/London').toISO()}
    ref={calendarRef}
    initialView="dayGridMonth"
    height='100%'
    ...
    events={events}
/>

Obviously, events is not going to hold anything meaningful when the application first renders as it is being initialized as 0.

If you'd like to have events be initialized as the response from your API call, you can return it in the useState callback function:

const [events, setEvents] = useState(() => {
    const res = await fetch('/api/events');
    const data = await res.json();

    return data;
})

Upvotes: 0

Related Questions