fullcalendar.io react code example

Example 1: fullcalendar react add event duration

FullCalendar defaultView="dayGridMonth" dateClick={this.handleDateClick} select={this.handleSelectClick} selectable='true' plugins={[ dayGridPlugin, interactionPlugin ]}  events={[
                { title: 'event 1', allDay: true, start: '2020-05-29', end: '2020-05-30' },
                { title: 'event 2', allDay: true, start: '2020-05-29', end: '2020-05-30'}
            ]}/>

Example 2: fullcalendar react

@import '~@fullcalendar/core/main.css';
@import '~@fullcalendar/daygrid/main.css';

Example 3: fullcalendar react

import React from 'react'
import FullCalendar from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid'

import './main.scss' // webpack must be configured to do this

export default class DemoApp extends React.Component {

  render() {
    return (
      <FullCalendar defaultView="dayGridMonth" plugins={[ dayGridPlugin ]} />
    )
  }

}