javascript reactjs bootstrap-4 fullcalendar fullcalendar-4

How separate between days on the week view with fullcalendar react?

I have a FullCalendar :

import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";

// must manually import the stylesheets for each plugin

import "@fullcalendar/core/main.css";
import "@fullcalendar/daygrid/main.css";
import "@fullcalendar/timegrid/main.css";


<FullCalendar 
                   locale={frLocale}
                   allDaySlot={false}
            defaultView="timeGridWeek"
            nowIndicator={true}
            hiddenDays={[0]}
            slotDuration='00:45:00'
            minTime="07:00:00"
            maxTime="20:00:00"
            slotEventOverlap={false}
            handleWindowResize={true}
            header={{
              left: "prev,next today",
              center: "title",
              right: "dayGridMonth,timeGridWeek,timeGridDay"
            }}
            plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin ]}
            ref={this.calendarComponentRef}
            events={this.state.events}
            displayEventEnd={true}
          />

when I run it, I get:

I want to separate between days like a yellow line :

My package.json :

I try to add this css :

.fc-timeGrid-view .fc-time-grid tbody tr:nth-of-type(even) {
    background: rgba(246, 246, 246, 0.667);
}

.fc-timeGrid-view .fc-widget-content {
  border-right: 2px solid #EE7 !important;
}

.fc-timeGrid-view .fc-widget-content:first-child {
  border-right: inherit !important;
}

But it doesn't working and I want the background color of the calendar is white.

How can I fix it ?

Solution

Unless you're using Bootstrap, the grid shows up fine. The example below uses an identical configuration to your <FullCalendar> attributes.

Edit: Added the Bootstrap theme and the columns are still separated.

plugins: [ 'bootstrap',  ... ],
themeSystem: 'bootstrap'

Edit #2: If you REALLY want to style the columns, you can try this:

.fc-widget-content {
  border-right: 2px solid #EE7 !important; /* Line thickness is 2px to better show */
}
.fc-widget-content:first-child {
  border-right: inherit !important; /* Revert the first child */
}

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: [ 'dayGrid', 'timeGrid' ],
    defaultView: 'timeGridWeek',
    locale: 'fr',
    allDaySlot: false,
    nowIndicator: true,
    hiddenDays: [0],
    slotDuration: '00:45:00',
    minTime: "07:00:00",
    maxTime: "20:00:00",
    slotEventOverlap: false,
    handleWindowResize: true,
    eventLimit: true,
    displayEventEnd: true,
    header : {
      left: "prev,next today",
      center: "title",
      right: "dayGridMonth,timeGridWeek,timeGridDay"
    }
  });
  calendar.render();
});

.fc-timeGrid-view .fc-time-grid tbody tr:nth-of-type(even) {
    background: rgba(246, 246, 246, 0.667);
}

.fc-timeGrid-view .fc-widget-content {
  border-right: 2px solid #EE7 !important;
}

.fc-timeGrid-view .fc-widget-content:first-child {
  border-right: inherit !important;
}

<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/main.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/daygrid/main.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/timegrid/main.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/bootstrap/main.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/main.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/locales/fr.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/daygrid/main.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/timegrid/main.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/bootstrap/main.min.js"></script>
<div id="calendar"></div>