React FullCalendar snippet

#react #fullcalendar

This was originally published on https://eichgi.hashnode.dev/react-fullcalendar-snippet

Hey folks, the following snippet is a basic example of what you can achieve with FullCalendar library for React. I hope you find my appointments calendar interesting, so let's dive into.

Here you have the react component full calendar docs:
https://fullcalendar.io/docs/react

Once you have installed the package let's focus on the component:

<FullCalendar
              ref={calendar}
              fixedWeekCount={false}
              height={'auto'}
              locale={esLocale}
              plugins={[dayGridPlugin, interactionPlugin]}
              initialView={setCalendarViewByWidth()}
              headerToolbar={{
                start: 'prev today next',
                center: 'title',
                end: 'newAppointment'
              }}
              footerToolbar={{
                center: 'toggleMonth toggleWeek toggleDay',
              }}
              customButtons={{
                newAppointment: {
                  text: 'Nueva cita',
                  click: () => {
                    dateClickHandler();
                  },
                },
                toggleDay: {
                  text: 'Hoy',
                  click: () => {
                    calendar.current.getApi().changeView('dayGridDay');
                  }
                },
                toggleWeek: {
                  text: 'Semana',
                  click: () => {
                    calendar.current.getApi().changeView('dayGridWeek');
                  }
                },
                toggleMonth: {
                  text: 'Mes',
                  click: () => {
                    calendar.current.getApi().changeView('dayGridMonth')
                  }
                },
              }}
              dateClick={e => dateClickHandler(e)}
              events={appointments}
              datesSet={async (dateInfo) => {
                await getEvents(dateInfo.startStr.split('T')[0], dateInfo.endStr.split('T')[0]);
              }}
              eventsSet={(events => {
                console.log('Events set: ', events);
              })}
              eventClick={e => eventsHandler(e)}
            />

I will describe the props described in the snippet. These are the very basics functionalities you might need for a full dynamic calendar.

Make a reference for you calendar, it might be handy for working directly with the API

const calendar = useRef(null);

I set my calendar in spanish by doing this, there are plenty of languages available, just dig into the docs to find the desired one.

import esLocale from '@fullcalendar/core/locales/es';

In order to interact with the events and have this dayGrid/monthGrid view it is important that you import the following plugins

import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';

You can customize the default buttons and their order by defining the following props. You can as well create your own buttons and defined them inside the toolbar as follows:

headerToolbar={{
                start: 'prev today next',
                center: 'title',
                end: 'newAppointment'
              }}
footerToolbar={{
                center: 'toggleMonth toggleWeek toggleDay',
              }}

As mentioned previously, this is the way you define custom buttons and their events:

customButtons={{
                newAppointment: {
                  text: 'Nueva cita',
                  click: () => {
                    dateClickHandler();
                  },
                },
               ...
              }}

For every click inside the calendar you will set the event this way (where e contains the date information regarding the clicked date):

dateClick={e => dateClickHandler(e)}

You place events into the calendar defining them with this prop:

events={[
    { title: 'event 1', date: '2019-04-01' },
    { title: 'event 2', date: '2019-04-02' }
  ]}

When you need to know which are the dates the calendar is currently showing define the following prop:

datesSet={async (dateInfo) => {
                await getEvents(dateInfo.startStr.split('T')[0], dateInfo.endStr.split('T')[0]);
              }}

Every time you change the view you can request events from the backend like this. (Don't forget to create your own getEvents definition)

Now that you have events placed, you might need to interact with them for showing or modifying purposes. This props is handy when you need to access the event information:

eventClick={e => eventsHandler(e)}

Here you have it, simple react fullcalendar snippet. There are plenty of options in the docs so you can customize your own calendar. CSS, Events, formats, etc... you will find them here: https://fullcalendar.io/docs#toc