DEV Community

loading...
Cover image for React FullCalendar

React FullCalendar

primetek profile image PrimeTek ・2 min read

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';
Enter fullscreen mode Exit fullscreen mode

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

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

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

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

Methods

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

<FullCalendar ref={fc} events={events} options={options} />
Enter fullscreen mode Exit fullscreen mode
fc.current.calendar.nextYear();
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (0)

pic
Editor guide