calendar-react.md

Calendars in React

1. Install package

We will use this package to show an interactive calendar on our site

In your React code terminal run

Check the docs for which scopes you will need from Fullcalendar and install the necessar ones. We will use these three scopes

npm i --save @fullcalendar/react @fullcalendar/daygrid @fullcalendar/interaction

2. Set up Component

Create a component called MyCalendar

import FullCalendar from  '@fullcalendar/react'
import dayGridPlugin from  '@fullcalendar/daygrid'
import interactionPlugin from  "@fullcalendar/interaction"; // needed for dayClick

function MyCalendar() {
	const handleDateClick = (arg) => { // bind with an arrow function
		alert(arg.dateStr)
	}

	return (
		     	<div style={{width: '500px', height: '600px'}}>
				<FullCalendar
					plugins={[ dayGridPlugin, interactionPlugin ]}
					dateClick={handleDateClick}
				/>
			</div>
		)
}

export default MyCalendar 

Invoke the component correctly and your calendar should show up.

Happy coding! ❤️