React Event Calendar

With the help of react-big-calendar library we can add a calendar in our react application and we can manage events and dates from this calendar.

Let’s see what needs to be done to use react-big-calendar

(https://jquense.github.io/react-big-calendar/examples/index.html)

Installation

npm install –save react-big-calendar

You can use this calendar  by adding in your component as shown below

Import react from “react”
Import {Calendar, momentLocalizer} from “react-big-calendar”;
Import moment from “moment”; // to provide localizer
Import ‘react-big-calendar/lib/css/react-big-calender.css’;               //    for adding style in your calendar

export default function Calendar() {

const localizer = momentLocalizer(moment)
const events = [{ 
   title= “Meeting”,
   startDate = new Date(), 
   endDate = new Date()
 }]

return ( 
    <div> 
     <Calendar 
        events={event}
        views={{
            month: true, 
            week:  true, 
             day:  true
        }}, 
         startAccessor= "startDate"
         endAccessor = "endDate"
         defaultDate={new Date()}
         localizer={localizer}
         style={height:500} // 
        onView(tabName => { selectedTab(tabName) } 
        onNavigate((focusDate, flipUnit, prevOrNext) = {
           handlePrevOrNext(focusDate, flipUnit, prevOrNext)
        })
    />
   <div>
)}

NOTES : 
1. With the help of views,you can define how you want to view the calendar for e.g. in terms of month,in terms of week or in terms of day
2. Calendar default height is 100 so we have to define height
3. When you need to call a function on the click of Month,Day or Week button then use onView to call a function.
4. When you need to call a function on the click of Next,Back or Today button then use onNavigate to call a function.