React Component
FullCalendar seamlessly integrates with the React JavaScript framework. It provides a component that exactly matches the functionality of FullCalendar’s standard API.
This is more than a mere “connector”. It tells the core FullCalendar package to begin rendering with React virtual DOM nodes as opposed to the Preact nodes it normally uses, transforming FullCalendar into a “real” React component. You can learn a bit more from this blog post (more info to come).
This package is released under an MIT license, the same license the standard version of FullCalendar uses. Useful links:
- Browse the Github repo (please star it!)
- Bug report instructions
- Example project leveraging Webpack, Babel, and css-loader (the code in this guide loosely follows it)
- Runnable project in a code playground
This guide does not go into depth about initializing a React project. Please consult the aforementioned example/runnable projects for that.
The first step is to install the FullCalendar-related dependencies. You’ll need the React adapter any additional plugins you plan to use:
npm install --save @fullcalendar/react @fullcalendar/daygrid
You may then begin to write a parent component that leverages the <FullCalendar> component (DemoApp.jsx):
import React from 'react'
import FullCalendar from '@fullcalendar/react' // must go before plugins
import dayGridPlugin from '@fullcalendar/daygrid' // a plugin!
export default class DemoApp extends React.Component {
render() {
return (
<FullCalendar
plugins={[ dayGridPlugin ]}
initialView="dayGridMonth"
/>
)
}
}
You must initialize your calendar with at least one plugin that provides a view!
CSS
All of FullCalendar’s CSS will be automatically loaded as long as your build system is able to process .css file imports. See Initializing with an ES6 Build System for more information on configuring your build system.
Props
The <FullCalendar> component is equipped with all of FullCalendar’s options! Just pass them in as props. Example:
<FullCalendar
plugins={[ dayGridPlugin ]}
initialView="dayGridMonth"
weekends={false}
events={[
{ title: 'event 1', date: '2019-04-01' },
{ title: 'event 2', date: '2019-04-02' }
]}
/>
Callbacks
A callback function can be passed into a React component and it will be called when something happens. For example, the dateClick handler is called whenever the user clicks on a date:
import React from 'react'
import FullCalendar from '@fullcalendar/react' // must go before plugins
import dayGridPlugin from '@fullcalendar/daygrid' // a plugin!
import interactionPlugin from "@fullcalendar/interaction" // needed for dayClick
export default class DemoApp extends React.Component {
render() {
return (
<FullCalendar
plugins={[ dayGridPlugin, interactionPlugin ]}
dateClick={this.handleDateClick}
/>
)
}
handleDateClick = (arg) => { // bind with an arrow function
alert(arg.dateStr)
}
}
Make sure your callbacks methods are bound to your component’s context!
Content Injection
There are many settings throughout the API for injecting custom content, like the eventContent event render hook. The Content Injection article explains the general concept. When you’re using the React connector, it’s possible to return React JSX nodes. Example:
import React from 'react'
import FullCalendar from '@fullcalendar/react' // must go before plugins
import dayGridPlugin from '@fullcalendar/daygrid' // a plugin!
export default class DemoApp extends React.Component {
render() {
return (
<FullCalendar
plugins={[ dayGridPlugin ]}
eventContent={renderEventContent}
/>
)
}
}
function renderEventContent(eventInfo) {
return (
<>
<b>{eventInfo.timeText}</b>
<i>{eventInfo.event.title}</i>
</>
)
}
FullCalendar Utilities
All of FullCalendar’s utility functions that would normally be accessible via @fullcalendar/core will also be accessible via @fullcalendar/react. The formatDate utility for example. This prevents you from needing to add another dependency to your project.
import { formatDate } from '@fullcalendar/react';
let str = formatDate(new Date(), {
month: 'long',
year: 'numeric',
day: 'numeric'
});
console.log(str);
Custom Views with Components
It’s possible to make calendar views that have custom rendering logic. The Custom Views via JS article explains the general concept. When you’re using the React connector, it’s possible to specify a React component. Example:
import React from 'react';
import { sliceEvents, createPlugin } from '@fullcalendar/react';
class CustomView extends React.Component {
render(props) {
let segs = sliceEvents(props, true); // allDay=true
return (
<Fragment>
<div className='view-title'>
{props.dateProfile.currentRange.start.toUTCString()}
</div>
<div className='view-events'>
{segs.length} events
</div>
</Fragment>
);
}
}
export default createPlugin({
views: {
custom: CustomView
}
});
Calendar API
Hopefully you won’t need to do it often, but sometimes it’s useful to access the underlying Calendar object for raw data and methods.
This is especially useful for controlling the current date. The initialDate prop will set the initial date of the calendar, but to change it after that, you’ll need to rely on the date navigation methods.
To do something like this, you’ll need to get ahold of the component’s ref (short for “reference”). Once you do that, you call the getApi method of the “current” component instance:
export default class DemoApp extends React.Component {
calendarRef = React.createRef()
render() {
return (
<FullCalendar ref={this.calendarRef} plugins={[ dayGridPlugin ]} />
)
}
someMethod() {
let calendarApi = this.calendarRef.current.getApi()
calendarApi.next()
}
}
FullCalendar Premium
How do you use FullCalendar Premium’s plugins with React? They are no different than any other plugin. Just follow the same instructions as you did dayGridPlugin in the above example. Also, make sure to include your schedulerLicenseKey:
import React from 'react'
import FullCalendar from '@fullcalendar/react' // must go before plugins
import resourceTimelinePlugin from '@fullcalendar/resource-timeline' // a plugin!
export default class DemoApp extends React.Component {
render() {
return (
<FullCalendar schedulerLicenseKey="XXX" plugins={[ resourceTimelinePlugin ]} />
)
}
}
State Management
The above mentioned sample project uses a rather simple technique to store event data: it uses the FullCalendar component itself. It’s possible to share this data with other parts of the application, but it’s often useful to have a more sophisticated setup. For example, if you need access to event data when a FullCalendar component isn’t visible.
Please check out the following example projects that demonstrate usage with third-party state-management libraries:
TypeScript
React goes really well with TypeScript!
Next.js
If you plan to use the Next.js React framework, you’ll need special configuration. See the following example projects: