javascriptreactjsreact-big-calendar

React Big Calendar views not showing


In a minimal configuration for the views, where I set the views prop to an array with one element = "day" I get a row of 9 empty views buttons. I want to use a custom View, but at this point I am stuck just trying to define the views prop.

<DnDCalendar
  viewType="Resources"
  localizer={localizer}
  events={events}
  startAccessor="start"
  views="{['day']}"
  endAccessor="end"
  defaultDate={visibleDate}
  draggableAccessor={(event) => true}
  onEventDrop={onEventDrop}
  resourceIdAccessor="resourceId"
  resources={resources}
  resourceTitleAccessor="resourceTitle"
/>

Styles included:

import './../node_modules/react-big-calendar/lib/css/react-big-calendar.css'
import './../node_modules/react-big-calendar/lib/addons/dragAndDrop/styles.css'

Solution

  • Quotes around the views prop were the mistake. It also requires "view" or "defaultView" prop:

    <DnDCalendar
     viewType="Resources"                      
     localizer={localizer}
     events={events}           
     startAccessor="start"
     views={['day']}
     defaultView="day"
     endAccessor="end"
     defaultDate={visibleDate}
     draggableAccessor={(event) => true}
     onEventDrop={onEventDrop}
     resourceIdAccessor="resourceId"
     resources={resources}
     resourceTitleAccessor="resourceTitle"
    />