React FullCalendar

React FullCalendar is an event calendar based on the FullCalendar library.

Setup

Refer to PrimeReact setup documentation for download and installation steps for your environment.

Import

import { FullCalendar } from 'primereact/fullcalendar';

Getting Started

FullCalendar is a wrapper around on FullCalendar 4.0.1+ so fullcalendar core needs to be included in your project. For a complete documentation and samples please refer to the fullcalendar website.

npm install @fullcalendar/core --save

FullCalendar is plugin based so install the plugins you require and define them with the options property.

npm install @fullcalendar/daygrid --save
npm install @fullcalendar/timegrid --save
npm install @fullcalendar/interaction --save

FullCalendar properties are defined with the options property and the events to display with the events property which should be an array and defined using the events property. Refer to Event API for more information.

export const FullCalendarDemo = () => {

    const [events, setEvents]: useState([]);
    const options = {
        plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
        defaultView: 'dayGridMonth',
        defaultDate: '2017-02-01',
        header: {
            left: 'prev,next',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        editable: true
    };

    useEffect(() => {
        eventService = new EventService();
        eventService.getEvents().then(data => setEvents(data));
    }, []);

    return (
        <FullCalendar events={events} options={options} />
    );
}

Callbacks

Callbacks of the FullCalendar such as dateClick are also defined with the options property.

let options: {
    defaultDate: '2017-02-01',
    header: {
        left: 'prev,next',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    editable: true,
    dateClick: (e) =>  {
        //handle date click
    }
}

Methods

Methods of the underlying calendar instance is accessible using the reference of the components calendar API.

<FullCalendar ref={fc} events={events} options={options} />

fc.current.calendar.nextYear();

Theming

FullCalendar supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeReact FullCalendar showcase for demos and documentation.