DEV Community

Hiram
Hiram

Posted on

React FullCalendar snippet

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)}
            />
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode
  • 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';
Enter fullscreen mode Exit fullscreen mode
  • 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';
Enter fullscreen mode Exit fullscreen mode
  • 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',
              }}
Enter fullscreen mode Exit fullscreen mode
  • As mentioned previously, this is the way you define custom buttons and their events:
customButtons={{
                newAppointment: {
                  text: 'Nueva cita',
                  click: () => {
                    dateClickHandler();
                  },
                },
               ...
              }}
Enter fullscreen mode Exit fullscreen mode
  • 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)}
Enter fullscreen mode Exit fullscreen mode
  • 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' }
  ]}
Enter fullscreen mode Exit fullscreen mode
  • 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]);
              }}
Enter fullscreen mode Exit fullscreen mode

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)}
Enter fullscreen mode Exit fullscreen mode

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

Top comments (3)

Collapse
 
andifaizal profile image
Andi Faizal

Thank you for sharing, this is help me alot

Collapse
 
juvielone profile image
Juvielone Lagos • Edited

Hi thank you for this. Do you have a full source code so that I can refer your functions to? The blog link doesn't work. Again thank you

Collapse
 
krishnare profile image
Krishnare

If we click on Next and previous buttons of calendar, which method can handled I did't get, can you please help me