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

Question

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 ?

Answer 1

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>

Answer 2

I resolve that by adding:

.fc-timeGrid-view .fc-time-grid tbody tr:nth-of-type(even) {
  background-color: transparent;
  border-right: 1px solid #f0f0f0 !important;
}
.fc-timeGrid-view .fc-time-grid tbody tr:nth-of-type(odd) {
  background: transparent;
  border-right: 1px solid #f0f0f0 !important;
}

.fc-widget-content {
  border-right: 1px solid #ddd !important; /* Line thickness is 2px to better show */
}
.fc-timeGrid-view .fc-widget-content:first-child{
  border-right: 1px solid #ddd !important;
}

Answer 3

I fixed it with:

.fc .fc-scrollgrid-section .fc-timegrid-cols table {
    height: 100%;
}

I'm using fullcalendar 5.11.0 with bootstrap 4.6.1, loaded with webpack. Apparently there is a rule which has something to do with making the grid scrollable that sets the column height to 1px. This rule resets it to the original 100%.